diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index c644ba5..281c877 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -2,13 +2,19 @@ # These owners will be the default owners for everything in # the repo. Unless a later match takes precedence -* @leoyuan @alvarto +* @liujuping @JackLian @alvarto /packages/plugin-manual/ @alvarto -/packages/base-monaco-editor/ @alvarto @wangshihao111 -/packages/plugin-code-editor/ @alvarto +/packages/base-monaco-editor/ @alvarto @wangshihao111 @SuSunSam +/packages/plugin-code-editor/ @alvarto @SuSunSam /packages/plugin-schema/ @alvarto -/packages/plugin-components-pane/ @mark-ck -/packages/plugin-datasource-pane/ @xingmolu -/packages/plugin-zh-en/ @leoyuan -/packages/plugin-undo-redo/ @leoyuan +/packages/plugin-components-pane/ @mark-ck @love999262 +/packages/plugin-datasource-pane/ @YSMJ1994 +/packages/plugin-zh-en/ @JackLian @liujuping +/packages/plugin-undo-redo/ @JackLian @liujuping +/packages/plugin-resource-tabs/ @JackLian @liujuping +/packages/plugin-set-ref-prop/ @JackLian @liujuping +/packages/plugin-view-manager-pane/ @JackLian @liujuping +/packages/base-monaco-editor/ @hzd822 +/packages/plugin-multiple-editor/ @hzd822 +/packages/action-block @liujuping \ No newline at end of file diff --git a/.github/workflows/deprecate npm.yml b/.github/workflows/deprecate npm.yml new file mode 100644 index 0000000..ea096ec --- /dev/null +++ b/.github/workflows/deprecate npm.yml @@ -0,0 +1,32 @@ +name: deprecate Package Version + +on: + workflow_dispatch: + inputs: + version: + description: 'Version to be deleted package@version' + required: true + +jobs: + delete-package-version: + runs-on: ubuntu-latest + if: >- + github.ref == 'refs/heads/main' && + (github.actor == 'JackLian' || github.actor == 'liujuping') + + steps: + - name: Checkout repository + uses: actions/checkout@v2 + + - name: Set up Node.js + uses: actions/setup-node@v2 + with: + node-version: '14' + + - name: deprecate Package Version + run: | + git config --local user.email "action@github.com" + git config --local user.name "GitHub Action" + + echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc + npm deprecate ${{ github.event.inputs.version }} "This version is deprecated. Please consider upgrading to a newer version." diff --git a/.github/workflows/publish beta npm.yml b/.github/workflows/publish beta npm.yml new file mode 100644 index 0000000..01ab685 --- /dev/null +++ b/.github/workflows/publish beta npm.yml @@ -0,0 +1,38 @@ +name: Publish Beta NPM Packages +on: + workflow_dispatch: + inputs: + packagePath: + description: 'Path to the package (e.g., action-block)' + required: true + betaVersion: + description: 'Beta version number (e.g., 1.0.1-beta.0)' + required: true + +jobs: + publish-package: + runs-on: ubuntu-latest + if: >- + github.actor == 'JackLian' || github.actor == 'liujuping' + + steps: + - name: Checkout Repository + uses: actions/checkout@v2 + + - name: Setup Node.js + uses: actions/setup-node@v2 + with: + node-version: '16' # 或者您希望的任何版本 + + - name: Change to Package Directory + run: | + git config --local user.email "action@github.com" + git config --local user.name "GitHub Action" + npm install --legacy-peer-deps + echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc + cd packages/${{ github.event.inputs.packagePath }} + npm install --legacy-peer-deps + npm run build + npm version ${{ github.event.inputs.betaVersion }} + echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc + npm publish --tag beta \ No newline at end of file diff --git a/.github/workflows/publish npm.yml b/.github/workflows/publish npm.yml new file mode 100644 index 0000000..5ada959 --- /dev/null +++ b/.github/workflows/publish npm.yml @@ -0,0 +1,51 @@ +name: Publish NPM Packages +on: + workflow_dispatch: + inputs: + packagePath: + description: 'Path to the package (e.g., action-block)' + required: true + versionType: + description: 'Version update type (major, minor, patch)' + required: true + default: 'patch' + +jobs: + publish-package: + runs-on: ubuntu-latest + if: >- + github.ref == 'refs/heads/main' && + (github.actor == 'JackLian' || github.actor == 'liujuping') + + steps: + - name: Checkout Repository + uses: actions/checkout@v2 + + - name: Setup Node.js + uses: actions/setup-node@v2 + with: + node-version: '16' # 或者您希望的任何版本 + + - name: Publish Package + run: | + git config --local user.email "action@github.com" + git config --local user.name "GitHub Action" + + echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc + npm install --legacy-peer-deps + cd packages/${{ github.event.inputs.packagePath }} + npm install --legacy-peer-deps + npm version ${{ github.event.inputs.versionType }} + npm run build + + echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc + npm publish + + echo "PACKAGE_NAME=$(node -p "require('./package.json').name")" >> $GITHUB_ENV + echo "PACKAGE_VERSION=$(node -p "require('./package.json').version")" >> $GITHUB_ENV + + git add package.json + git commit -m "Bump version to ${PACKAGE_VERSION}" + + git tag -a "${PACKAGE_NAME}@${PACKAGE_VERSION}" -m "Release ${PACKAGE_NAME} version ${PACKAGE_VERSION}" + git push origin "${PACKAGE_NAME}@${PACKAGE_VERSION}" \ No newline at end of file diff --git a/package.json b/package.json index 58231d4..761e9e0 100644 --- a/package.json +++ b/package.json @@ -40,9 +40,9 @@ } }, "devDependencies": { - "lerna": "^4.x", "f2elint": "^2.0.1", "husky": "^7.0.4", + "lerna": "^4.x", "typescript": "^3.2.2" }, "engines": { @@ -54,5 +54,6 @@ }, "resolutions": { "@builder/babel-preset-ice": "1.0.1" - } -} + }, + "repository": "https://github.com/alibaba/lowcode-plugins.git" +} \ No newline at end of file diff --git a/packages/action-block/package.json b/packages/action-block/package.json index 80aaf97..e9c0c00 100644 --- a/packages/action-block/package.json +++ b/packages/action-block/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/action-block", - "version": "1.0.0-beta.0", + "version": "1.0.1", "description": "", "main": "lib/index.js", "repository": { @@ -27,5 +27,5 @@ "build-plugin-fusion": "^0.1.22", "build-plugin-moment-locales": "^0.1.3" }, - "homepage": "https://unpkg.com/@alilc/action-block@1.0.0-beta.0/build/index.html" + "homepage": "https://unpkg.com/@alilc/action-block@1.0.1/build/index.html" } diff --git a/packages/action-block/src/index.tsx b/packages/action-block/src/index.tsx index 02e69eb..22eaa46 100644 --- a/packages/action-block/src/index.tsx +++ b/packages/action-block/src/index.tsx @@ -30,7 +30,7 @@ const SaveAsBlock = (props: SaveAsBlockProps) => { React.useEffect(() => { const generateImage = async () => { let dom2 = node.getDOMNode(); - console.log('html2canvas: ', html2canvas); + // console.log('html2canvas: ', html2canvas); const canvas = await html2canvas?.(dom2, { scale: 0.5 }); const dataUrl = canvas.toDataURL(); setSrc(dataUrl); @@ -106,7 +106,7 @@ export default { }, title: '新增', action(node: Node) { - console.log('node: ', node); + // console.log('node: ', node); dialog = Dialog.show({ v2: true, title: "保存为区块", @@ -116,4 +116,4 @@ export default { }, }, important: true, -}; \ No newline at end of file +}; diff --git a/packages/base-monaco-editor/package.json b/packages/base-monaco-editor/package.json index c6153a3..6dfa41a 100644 --- a/packages/base-monaco-editor/package.json +++ b/packages/base-monaco-editor/package.json @@ -1,8 +1,9 @@ { "name": "@alilc/lowcode-plugin-base-monaco-editor", - "version": "1.1.1", + "version": "1.1.2", "description": "代码编辑组件，monaco-editor 的低代码适配封装", "publishConfig": { + "registry": "https://registry.npmjs.org/", "access": "public" }, "files": [ @@ -62,7 +63,7 @@ "commit-msg": "f2elint commit-msg-scan" } }, - "homepage": "https://unpkg.com/@alilc/lowcode-plugin-base-monaco-editor@1.1.1/build/index.html", + "homepage": "https://unpkg.com/@alilc/lowcode-plugin-base-monaco-editor@1.1.2/build/index.html", "repository": { "type": "git", "url": "https://github.com/alibaba/lowcode-plugins.git", diff --git a/packages/base-monaco-editor/src/helper.ts b/packages/base-monaco-editor/src/helper.ts index 614ee8d..5180c52 100644 --- a/packages/base-monaco-editor/src/helper.ts +++ b/packages/base-monaco-editor/src/helper.ts @@ -44,6 +44,7 @@ export interface IGeneralManacoEditorProps { enableOutline?: boolean; /** style of wrapper */ style?: CSSProperties; + overrideServices?: oEditor.IEditorOverrideServices; enhancers?: EditorEnhancer[]; } @@ -113,7 +114,7 @@ const DIFF_EDITOR_INITIAL_OPTIONS: oEditor.IStandaloneDiffEditorConstructionOpti export const useEditor = (type: 'single' | 'diff', props: IGeneralManacoEditorProps) => { const { - editorDidMount, editorWillMount, theme, value, path, language, saveViewState, defaultValue, enhancers, + editorDidMount, editorWillMount, theme, value, path, language, saveViewState, defaultValue, enhancers, overrideServices } = props; const [isEditorReady, setIsEditorReady] = useState(false); @@ -196,7 +197,7 @@ export const useEditor = (type: 'single' | 'diff', props: I automaticLayout: true, ...INITIAL_OPTIONS, ...optionRef.current, - }); + }, overrideServices); editor.setModel(model); } else { const originalModel = monaco @@ -211,7 +212,7 @@ export const useEditor = (type: 'single' | 'diff', props: I automaticLayout: true, ...DIFF_EDITOR_INITIAL_OPTIONS, ...optionRef.current, - }); + }, overrideServices); editor.setModel({ original: originalModel, modified: modifiedModel }); } diff --git a/packages/plugin-block/src/index.tsx b/packages/plugin-block/src/index.tsx index afd3b29..dfbbb71 100644 --- a/packages/plugin-block/src/index.tsx +++ b/packages/plugin-block/src/index.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import { ILowCodePluginContext } from '@alilc/lowcode-engine'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; import { default as BlockPane } from './pane'; -const LowcodePluginCusPlugin = (ctx: ILowCodePluginContext) => { +const LowcodePluginCusPlugin = (ctx: IPublicModelPluginContext) => { return { // 插件名，注册环境下唯一 name: 'LowcodePluginCusPlugin', diff --git a/packages/plugin-code-editor/package.json b/packages/plugin-code-editor/package.json index c9814b4..340bc01 100644 --- a/packages/plugin-code-editor/package.json +++ b/packages/plugin-code-editor/package.json @@ -1,7 +1,7 @@ { "name": "@alilc/lowcode-plugin-code-editor", "author": "59174526@qq.com & humphry.huang9@gmail.com", - "version": "1.0.6", + "version": "1.0.9", "description": "CodeEditor", "files": [ "es", @@ -17,6 +17,7 @@ "build": "build-scripts build --config build.js" }, "publishConfig": { + "registry": "https://registry.npmjs.org/", "access": "public" }, "dependencies": { @@ -24,7 +25,7 @@ "@alilc/lowcode-plugin-base-monaco-editor": "^1.1.1", "@babel/core": "^7.15.8", "@babel/parser": "^7.15.8", - "@babel/preset-env": "^7.15.8", + "@babel/preset-env": "7.22.9", "@babel/preset-react": "^7.14.5", "@babel/standalone": "^7.15.8", "@babel/traverse": "^7.15.4", diff --git a/packages/plugin-code-editor/src/components/ErrorBoundary/ErrorBoundary.less b/packages/plugin-code-editor/src/components/ErrorBoundary/ErrorBoundary.less index ab8f7b3..5a9324d 100644 --- a/packages/plugin-code-editor/src/components/ErrorBoundary/ErrorBoundary.less +++ b/packages/plugin-code-editor/src/components/ErrorBoundary/ErrorBoundary.less @@ -1,7 +1,4 @@ -.container { - min-width: 300px; -} -.actions { +.plugin-code-editor-errorBoundary-actions { margin: 12px auto; width: fit-content; text-align: center; diff --git a/packages/plugin-code-editor/src/components/ErrorBoundary/ErrorBoundary.tsx b/packages/plugin-code-editor/src/components/ErrorBoundary/ErrorBoundary.tsx index fabd328..72159fd 100644 --- a/packages/plugin-code-editor/src/components/ErrorBoundary/ErrorBoundary.tsx +++ b/packages/plugin-code-editor/src/components/ErrorBoundary/ErrorBoundary.tsx @@ -1,7 +1,7 @@ import React, { Component, ErrorInfo, Suspense } from 'react'; import { Loading, Message, Button } from '@alifd/next'; -import styles from './ErrorBoundary.less'; +import './ErrorBoundary.less'; interface ErrorBoundaryProps { onCatch?: (error: Error, info: ErrorInfo) => void; @@ -41,7 +41,7 @@ export class ErrorBoundary extends Component

详细错误: {errorInfo || '未知原因'}

-
+
diff --git a/packages/plugin-code-editor/src/index.tsx b/packages/plugin-code-editor/src/index.tsx index d7caf4c..c40e74e 100644 --- a/packages/plugin-code-editor/src/index.tsx +++ b/packages/plugin-code-editor/src/index.tsx @@ -1,8 +1,9 @@ import { CodeEditorPane } from './pane'; -import { project, ILowCodePluginContext } from '@alilc/lowcode-engine'; +import { project } from '@alilc/lowcode-engine'; import icon from './icon'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; -const plugin = (ctx: ILowCodePluginContext) => { +const plugin = (ctx: IPublicModelPluginContext) => { return { name: 'codeEditor', width: 600, diff --git a/packages/plugin-code-editor/src/pane/index.tsx b/packages/plugin-code-editor/src/pane/index.tsx index 6f229b5..dae3b0c 100644 --- a/packages/plugin-code-editor/src/pane/index.tsx +++ b/packages/plugin-code-editor/src/pane/index.tsx @@ -94,7 +94,7 @@ export const CodeEditorPane = memo(({ project, event, skeleton }: CodeEditorPane useEffect(() => { // load schema on open - eventRef.current?.on('skeleton.panel-dock.active', (pluginName) => { + skeletonRef.current?.onShowPanel((pluginName: string) => { if (pluginName === 'codeEditor') { const schema = lowcodeProjectRef.current?.exportSchema(common.designerCabin.TransformStage.Save); if (!schema) { @@ -109,7 +109,7 @@ export const CodeEditorPane = memo(({ project, event, skeleton }: CodeEditorPane }); // save schema when panel closed - eventRef.current?.on('skeleton.panel-dock.unactive', (pluginName) => { + skeletonRef.current?.onHidePanel((pluginName: string) => { if (pluginName === 'codeEditor') { saveSchemaRef.current?.(); } diff --git a/packages/plugin-components-pane/build.json b/packages/plugin-components-pane/build.json index 90ae90f..36f5196 100644 --- a/packages/plugin-components-pane/build.json +++ b/packages/plugin-components-pane/build.json @@ -1,6 +1,14 @@ { "plugins": [ "build-plugin-component", + [ + "@alilc/build-plugin-alt", + { + "type": "plugin", + "inject": true, + "openUrl": "https://lowcode-engine.cn/demo/index.html?debug" + } + ], "build-plugin-fusion", [ "build-plugin-moment-locales", diff --git a/packages/plugin-components-pane/package.json b/packages/plugin-components-pane/package.json index e87ade1..7f12a94 100644 --- a/packages/plugin-components-pane/package.json +++ b/packages/plugin-components-pane/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-components-pane", - "version": "1.0.7", + "version": "2.0.4", "description": "低代码组件面板", "files": [ "es/", diff --git a/packages/plugin-components-pane/src/index.tsx b/packages/plugin-components-pane/src/index.tsx index 8e20b06..6b26af8 100644 --- a/packages/plugin-components-pane/src/index.tsx +++ b/packages/plugin-components-pane/src/index.tsx @@ -1,321 +1,29 @@ -import React from 'react'; -import { Search } from '@alifd/next'; -import { PluginProps } from '@alilc/lowcode-types'; -import cls from 'classnames/bind'; -import debounce from 'lodash.debounce'; -import style from './index.module.scss'; -import IconOfPane from './Icon'; -import Category from './components/Category'; -import List from './components/List'; -import Component from './components/Component'; -import Tab from './components/Tab'; -import ComponentManager from './store'; -import transform, { getTextReader, SortedGroups, Text, StandardComponentMeta, SnippetMeta, createI18n } from './utils/transform'; - -const { material, common, project, event } = window.AliLowCodeEngine || {}; - -const isNewEngineVersion = !!material; - -const store = new ComponentManager(); - -const cx = cls.bind(style); - -interface ComponentPaneProps extends PluginProps { - [key: string]: any; -} - -interface ComponentPaneState { - groups: SortedGroups[]; - filter: SortedGroups[]; - keyword: string; -} - -export default class ComponentPane extends React.Component { - static displayName = 'LowcodeComponentPane'; - - static defaultProps = { - lang: 'zh_CN', - }; - - state: ComponentPaneState = { - groups: [], - filter: [], - keyword: '', - }; - - store = store; - - t: (input: Text) => string; - - getStrKeywords: (keywords: Text[]) => string; - - getKeyToSearch (c:StandardComponentMeta|SnippetMeta){ - const strTitle = this.t(c.title); - const strComponentName = this.t(c.componentName); - const strDescription = "description" in c ? this.t(c.description):''; - const strKeywords = "keywords" in c ? this.getStrKeywords(c.keywords||[]):''; - return `${strTitle}#${strComponentName}#${strDescription}#${strKeywords}`.toLowerCase(); - } - - getFilteredComponents = debounce(() => { - const { groups = [], keyword } = this.state; - if (!keyword) { - this.setState({ - filter: groups, +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; +import ComponentsPane from './pane'; +const ComponentPanelPlugin = (ctx: IPublicModelPluginContext) => { + return { + async init() { + const { skeleton, project } = ctx; + // 注册组件面板 + const componentsPane = skeleton.add({ + area: 'leftArea', + type: 'PanelDock', + name: 'componentsPane', + content: ComponentsPane, + contentProps: {}, + props: { + align: 'top', + icon: 'zujianku', + description: '组件库', + }, }); - return; - } - - - - const filter = groups.map((group) => ({ - ...group, - categories: group.categories - .map((category) => ({ - ...category, - components: category.components.filter((c) => { - let keyToSearch = this.getKeyToSearch(c); - if(c.snippets){ - c.snippets.map((item)=>{ - keyToSearch += `_${this.getKeyToSearch(item)}` - }) - } - return keyToSearch.includes(keyword); - }), - })) - .filter((c) => c?.components?.length), - })); - - this.setState({ - filter, - }); - }, 200); - - constructor(props) { - super(props); - this.t = getTextReader(props.lang); - this.getStrKeywords = (keywords: Text[]): string => { - if (typeof keywords === 'string') { - return keywords; - } - if (keywords && Array.isArray(keywords) && keywords.length) { - return keywords.map(keyword => this.t(keyword)).join('-'); - } - return ''; - }; - } - - componentDidMount() { - const { editor } = this.props; - if (!editor) { - this.initComponentList(); - return; - } - const assets = isNewEngineVersion ? material.getAssets() : editor.get('assets'); - if (assets) { - this.initComponentList(); - } else { - console.warn('[ComponentsPane]: assets not ready, wait for assets ready event.') - } - - if (isNewEngineVersion) { - event.on('trunk.change', this.initComponentList.bind(this)); - material.onChangeAssets(this.initComponentList.bind(this)); - } else { - editor.on('trunk.change', this.initComponentList.bind(this)); - editor.once('editor.ready', this.initComponentList.bind(this)); - editor.on('designer.incrementalAssetsReady', this.initComponentList.bind(this)); - } - } - - /** - * 初始化组件列表 - * TODO: 无副作用，可多次执行 - */ - initComponentList() { - const { editor } = this.props; - const rawData = isNewEngineVersion ? material.getAssets() : editor.get('assets'); - - const meta = transform(rawData, this.t); - - const { groups, snippets } = meta; - - this.store.setSnippets(snippets); - - this.setState({ - groups, - filter: groups, - }); - } - - registerAdditive = (shell: HTMLDivElement | null) => { - if (!shell || shell.dataset.registered) { - return; - } - - function getSnippetId(elem: any) { - if (!elem) { - return null; - } - while (shell !== elem) { - if (elem.classList.contains('snippet')) { - return elem.dataset.id; - } - elem = elem.parentNode; - } - return null; - } - - const { editor } = this.props; - const designer = !isNewEngineVersion ? editor?.get('designer') : null; - const _dragon = isNewEngineVersion ? common.designerCabin.dragon : designer?.dragon; - if (!_dragon || (!isNewEngineVersion && !designer)) { - return; - } - - // eslint-disable-next-line - const click = (e: Event) => {}; - - shell.addEventListener('click', click); - - _dragon.from(shell, (e: Event) => { - const doc = isNewEngineVersion ? project.getCurrentDocument() : designer?.currentDocument; - const id = getSnippetId(e.target); - if (!doc || !id) { - return false; - } - - const dragTarget = { - type: 'nodedata', - data: this.store.getSnippetById(id), - }; - - return dragTarget; - }); - - shell.dataset.registered = 'true'; + componentsPane?.disable?.(); + project.onSimulatorRendererReady(() => { + componentsPane?.enable?.(); + }) + }, }; - - handleSearch = (keyword = '') => { - this.setState({ - keyword: keyword.toLowerCase(), - }); - this.getFilteredComponents(); - }; - - renderEmptyContent() { - return ( -
- -
{this.t(createI18n('暂无组件，请在物料站点添加', 'No components, please add materials'))}
-
- ) - } - - renderContent() { - const { filter = [], keyword } = this.state; - const hasContent = filter.filter(item => { - return item?.categories?.filter(category => { - return category?.components?.length; - }).length; - }).length; - if (!hasContent) { - return this.renderEmptyContent(); - } - if (keyword) { - return ( -
- {filter.map((group) => { - const { categories } = group; - {return categories.map((category) => { - const { components } = category; - const cname = this.t(category.name); - return ( - - - {components.map((component) => { - const { componentName, snippets = [] } = component; - return snippets.filter(snippet => snippet.id && this.getKeyToSearch(snippet).includes(keyword)).map(snippet => { - return ( - - ); - }); - })} - - - ); - })} - })} -
- ) - } - return ( - - {filter.map((group) => { - const { categories } = group; - return ( - -
- {categories.map((category) => { - const { components } = category; - const cname = this.t(category.name); - return ( - - - {components.map((component) => { - const { componentName, snippets = [] } = component; - return snippets.filter(snippet => snippet.id).map(snippet => { - return ( - - ); - }); - })} - - - ); - })} -
- - ); - })} - - ); - } - - render() { - return ( -
-
- -
- {this.renderContent()} -
- ); - } } +ComponentPanelPlugin.pluginName = 'ComponentPanelPlugin'; +export default ComponentPanelPlugin; -export const PaneIcon = IconOfPane; diff --git a/packages/plugin-components-pane/src/index.module.scss b/packages/plugin-components-pane/src/pane/index.module.scss similarity index 100% rename from packages/plugin-components-pane/src/index.module.scss rename to packages/plugin-components-pane/src/pane/index.module.scss diff --git a/packages/plugin-components-pane/src/pane/index.tsx b/packages/plugin-components-pane/src/pane/index.tsx new file mode 100644 index 0000000..eacb5db --- /dev/null +++ b/packages/plugin-components-pane/src/pane/index.tsx @@ -0,0 +1,321 @@ +import React from 'react'; +import { Search } from '@alifd/next'; +import { PluginProps } from '@alilc/lowcode-types'; +import cls from 'classnames/bind'; +import debounce from 'lodash.debounce'; +import style from './index.module.scss'; +import IconOfPane from '../Icon'; +import Category from '../components/Category'; +import List from '../components/List'; +import Component from '../components/Component'; +import Tab from '../components/Tab'; +import ComponentManager from '../store'; +import transform, { getTextReader, SortedGroups, Text, StandardComponentMeta, SnippetMeta, createI18n } from '../utils/transform'; + +const { material, common, project, event } = window.AliLowCodeEngine || {}; + +const isNewEngineVersion = !!material; + +const store = new ComponentManager(); + +const cx = cls.bind(style); + +interface ComponentPaneProps extends PluginProps { + [key: string]: any; +} + +interface ComponentPaneState { + groups: SortedGroups[]; + filter: SortedGroups[]; + keyword: string; +} + +export default class ComponentPane extends React.Component { + static displayName = 'LowcodeComponentPane'; + + static defaultProps = { + lang: 'zh_CN', + }; + + state: ComponentPaneState = { + groups: [], + filter: [], + keyword: '', + }; + + store = store; + + t: (input: Text) => string; + + getStrKeywords: (keywords: Text[]) => string; + + getKeyToSearch (c:StandardComponentMeta|SnippetMeta){ + const strTitle = this.t(c.title); + const strComponentName = this.t((c as SnippetMeta).schema?.componentName); + const strDescription = "description" in c ? this.t(c.description):''; + const strKeywords = "keywords" in c ? this.getStrKeywords(c.keywords||[]):''; + return `${strTitle}#${strComponentName}#${strDescription}#${strKeywords}`.toLowerCase(); + } + + getFilteredComponents = debounce(() => { + const { groups = [], keyword } = this.state; + if (!keyword) { + this.setState({ + filter: groups, + }); + return; + } + + + + const filter = groups.map((group) => ({ + ...group, + categories: group.categories + .map((category) => ({ + ...category, + components: category.components.filter((c) => { + let keyToSearch = this.getKeyToSearch(c); + if(c.snippets){ + c.snippets.map((item)=>{ + keyToSearch += `_${this.getKeyToSearch(item)}` + }) + } + return keyToSearch.includes(keyword); + }), + })) + .filter((c) => c?.components?.length), + })); + + this.setState({ + filter, + }); + }, 200); + + constructor(props) { + super(props); + this.t = getTextReader(props.lang); + this.getStrKeywords = (keywords: Text[]): string => { + if (typeof keywords === 'string') { + return keywords; + } + if (keywords && Array.isArray(keywords) && keywords.length) { + return keywords.map(keyword => this.t(keyword)).join('-'); + } + return ''; + }; + } + + componentDidMount() { + const { editor } = this.props; + if (!editor) { + this.initComponentList(); + return; + } + const assets = isNewEngineVersion ? material.getAssets() : editor.get('assets'); + if (assets) { + this.initComponentList(); + } else { + console.warn('[ComponentsPane]: assets not ready, wait for assets ready event.') + } + + if (isNewEngineVersion) { + event.on('trunk.change', this.initComponentList.bind(this)); + material.onChangeAssets(this.initComponentList.bind(this)); + } else { + editor.on('trunk.change', this.initComponentList.bind(this)); + editor.once('editor.ready', this.initComponentList.bind(this)); + editor.on('designer.incrementalAssetsReady', this.initComponentList.bind(this)); + } + } + + /** + * 初始化组件列表 + * TODO: 无副作用，可多次执行 + */ + initComponentList() { + const { editor } = this.props; + const rawData = isNewEngineVersion ? material.getAssets() : editor.get('assets'); + + const meta = transform(rawData, this.t); + + const { groups, snippets } = meta; + + this.store.setSnippets(snippets); + + this.setState({ + groups, + filter: groups, + }); + } + + registerAdditive = (shell: HTMLDivElement | null) => { + if (!shell || shell.dataset.registered) { + return; + } + + function getSnippetId(elem: any) { + if (!elem) { + return null; + } + while (shell !== elem) { + if (elem.classList.contains('snippet')) { + return elem.dataset.id; + } + elem = elem.parentNode; + } + return null; + } + + const { editor } = this.props; + const designer = !isNewEngineVersion ? editor?.get('designer') : null; + const _dragon = isNewEngineVersion ? common.designerCabin.dragon : designer?.dragon; + if (!_dragon || (!isNewEngineVersion && !designer)) { + return; + } + + // eslint-disable-next-line + const click = (e: Event) => {}; + + shell.addEventListener('click', click); + + _dragon.from(shell, (e: Event) => { + const doc = isNewEngineVersion ? project.getCurrentDocument() : designer?.currentDocument; + const id = getSnippetId(e.target); + if (!doc || !id) { + return false; + } + + const dragTarget = { + type: 'nodedata', + data: this.store.getSnippetById(id), + }; + + return dragTarget; + }); + + shell.dataset.registered = 'true'; + }; + + handleSearch = (keyword = '') => { + this.setState({ + keyword: keyword.toLowerCase(), + }); + this.getFilteredComponents(); + }; + + renderEmptyContent() { + return ( +
+ +
{this.t(createI18n('暂无组件，请在物料站点添加', 'No components, please add materials'))}
+
+ ) + } + + renderContent() { + const { filter = [], keyword } = this.state; + const hasContent = filter.filter(item => { + return item?.categories?.filter(category => { + return category?.components?.length; + }).length; + }).length; + if (!hasContent) { + return this.renderEmptyContent(); + } + if (keyword) { + return ( +
+ {filter.map((group) => { + const { categories } = group; + {return categories.map((category) => { + const { components } = category; + const cname = this.t(category.name); + return ( + + + {components.map((component) => { + const { componentName, snippets = [] } = component; + return snippets.filter(snippet => snippet.id && this.getKeyToSearch(snippet).toLowerCase().includes(keyword)).map(snippet => { + return ( + + ); + }); + })} + + + ); + })} + })} +
+ ) + } + return ( + + {filter.map((group) => { + const { categories } = group; + return ( + +
+ {categories.map((category) => { + const { components } = category; + const cname = this.t(category.name); + return ( + + + {components.map((component) => { + const { componentName, snippets = [] } = component; + return snippets.filter(snippet => snippet.id).map(snippet => { + return ( + + ); + }); + })} + + + ); + })} +
+ + ); + })} + + ); + } + + render() { + return ( +
+
+ +
+ {this.renderContent()} +
+ ); + } +} + +export const PaneIcon = IconOfPane; diff --git a/packages/plugin-datasource-pane/package.json b/packages/plugin-datasource-pane/package.json index 1902d1f..898bd5f 100644 --- a/packages/plugin-datasource-pane/package.json +++ b/packages/plugin-datasource-pane/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-datasource-pane", - "version": "1.0.10", + "version": "1.0.11", "description": "低代码引擎数据源面板", "main": "lib/index.js", "files": [ @@ -74,7 +74,7 @@ "traverse": "^0.6.6", "xstate": "^4.26.0" }, - "homepage": "https://unpkg.com/@alilc/lowcode-plugin-datasource-pane@1.0.10/build/index.html", + "homepage": "https://unpkg.com/@alilc/lowcode-plugin-datasource-pane@1.0.11/build/index.html", "repository": { "type": "git", "url": "https://github.com/alibaba/lowcode-plugins.git", diff --git a/packages/plugin-datasource-pane/src/components/DataSourceForm/DataSourceForm.tsx b/packages/plugin-datasource-pane/src/components/DataSourceForm/DataSourceForm.tsx index 2c3419b..4597b79 100644 --- a/packages/plugin-datasource-pane/src/components/DataSourceForm/DataSourceForm.tsx +++ b/packages/plugin-datasource-pane/src/components/DataSourceForm/DataSourceForm.tsx @@ -42,11 +42,7 @@ const SCHEMA = { type: { title: '类型', type: 'string', - editable: false, readOnly: true, - hidden: true, - display: 'hidden', - visible: false, 'x-decorator': 'FormItem', 'x-component-props': { // labelWidth: 300, @@ -199,8 +195,10 @@ export class DataSourceForm extends PureComponent { + return new Promise((resolve, reject) => { + const { isCodeValid, code } = this.state; + + if (!isCodeValid) reject(new Error('导入格式有误')); + + // 只 resolve 通过 schema 校验的数据 + resolve(this.deriveValue(JSON.parse(code))); + }); + }; + private monacoRef: any; constructor(props: DataSourceImportPluginCodeProps) { @@ -75,7 +89,8 @@ export class DataSourceImportPluginCode extends PureComponent< (type) => type.type === dataSource.type, ); if (!dataSourceType) return false; - return ajv.validate(dataSourceType.schema, dataSource); + // 处理下默认为空的情况，向下兼容 + return ajv.validate(dataSourceType.schema || {}, dataSource); }); }; @@ -86,10 +101,11 @@ export class DataSourceImportPluginCode extends PureComponent< .getModelMarkers() .find((marker: editor.IMarker) => marker.owner === 'json') ) { + Message.success("检验成功，点击右上方确定完成导入！") this.setState({ isCodeValid: true }); - const model: any = _last(this.monacoRef.getModels()); - if (!model) return; - this.props.onImport?.(this.deriveValue(JSON.parse(model.getValue()))); + // const model: any = _last(this.monacoRef.getModels()); + // if (!model) return; + // this.props.onImport?.(this.deriveValue(JSON.parse(model.getValue()))); return; } } @@ -108,10 +124,14 @@ export class DataSourceImportPluginCode extends PureComponent< } }; - handleEditorDidMount = (isFullscreen, editor, monaco) => { - this.monacoRef = monaco?.editor; + /* @author daifuyang + ** @description：修复编辑器挂载事件 + */ + handleEditorDidMount = (editor: MonacoEditor, monaco: MonacoEditor) => { + this.monacoRef = editor?.editor; }; + render() { const { onCancel = _noop } = this.props; const { code, isCodeValid } = this.state; @@ -133,7 +153,7 @@ export class DataSourceImportPluginCode extends PureComponent<

diff --git a/packages/plugin-datasource-pane/src/components/Forms/form-lazy-obj.tsx b/packages/plugin-datasource-pane/src/components/Forms/form-lazy-obj.tsx index 45cc7a5..0d65f38 100644 --- a/packages/plugin-datasource-pane/src/components/Forms/form-lazy-obj.tsx +++ b/packages/plugin-datasource-pane/src/components/Forms/form-lazy-obj.tsx @@ -48,9 +48,15 @@ export const FormLazyObj = observer((props: FormLazyObjProps) => { setSelectedProperties((selectedProperties) => selectedProperties.concat(propertyKey)); }, []); + /* 改成formily内部支持 */ const handleRemove = useCallback((propertyKey) => { - setSelectedProperties((selectedProperties) => selectedProperties.filter((i) => i !== propertyKey)); - }, []); + field?.form?.query(propertyKey)?.take()?.setState((state) => { + state.visible = !state.visible; + }); + // setSelectedProperties((selectedProperties) => + // selectedProperties.filter((i) => i !== propertyKey) + // ); + }, [field]); const addition = useMemo(() => { if (properties.length === 0) return null; diff --git a/packages/plugin-datasource-pane/src/index.tsx b/packages/plugin-datasource-pane/src/index.tsx index a8098a9..838ada5 100644 --- a/packages/plugin-datasource-pane/src/index.tsx +++ b/packages/plugin-datasource-pane/src/index.tsx @@ -1,10 +1,10 @@ -import { ILowCodePluginContext } from '@alilc/lowcode-engine'; import DataSourcePanePlugin from './pane'; import { DataSourcePaneImportPlugin, DataSourceType, } from './types'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; export interface Options { importPlugins?: DataSourcePaneImportPlugin[]; @@ -13,7 +13,7 @@ export interface Options { } // TODO: 2.0插件传参修改，不支持直接options: Options -const plugin = (ctx: ILowCodePluginContext, options: Options) => { +const plugin = (ctx: IPublicModelPluginContext, options: Options) => { return { name: 'com.alibaba.lowcode.datasource.pane', width: 300, diff --git a/packages/plugin-datasource-pane/src/pane/DataSourcePane.tsx b/packages/plugin-datasource-pane/src/pane/DataSourcePane.tsx index 4f803f8..bb74ecc 100644 --- a/packages/plugin-datasource-pane/src/pane/DataSourcePane.tsx +++ b/packages/plugin-datasource-pane/src/pane/DataSourcePane.tsx @@ -93,7 +93,11 @@ export class DataSourcePane extends PureComponent< }); this.send({ type: 'UPDATE_DS', payload: this.props.initialSchema?.list }); } - + componentDidUpdate(newValue:DataSourcePaneProps) { + if (this.props.initialSchema !== newValue.initialSchema) { + this.send({ type: 'UPDATE_DS', payload: this.props.initialSchema?.list }); + } + } componentWillUnmount() { this.serviceS?.unsubscribe?.(); } diff --git a/packages/plugin-manual/package.json b/packages/plugin-manual/package.json index 522ea29..700637d 100644 --- a/packages/plugin-manual/package.json +++ b/packages/plugin-manual/package.json @@ -15,6 +15,7 @@ "pub": "npm publish" }, "publishConfig": { + "registry": "https://registry.npmjs.org/", "access": "public" }, "dependencies": {}, diff --git a/packages/plugin-manual/src/index.tsx b/packages/plugin-manual/src/index.tsx index bb57695..cf85189 100644 --- a/packages/plugin-manual/src/index.tsx +++ b/packages/plugin-manual/src/index.tsx @@ -1,7 +1,7 @@ -import { ILowCodePluginContext } from '@alilc/lowcode-engine'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; import { IconQuestion } from './icon'; -const PluginManual = (ctx: ILowCodePluginContext) => { +const PluginManual = (ctx: IPublicModelPluginContext) => { return { init() { // 往引擎增加面板 diff --git a/packages/plugin-multiple-editor/.eslintrc.js b/packages/plugin-multiple-editor/.eslintrc.js new file mode 100644 index 0000000..103b0c3 --- /dev/null +++ b/packages/plugin-multiple-editor/.eslintrc.js @@ -0,0 +1,42 @@ +module.exports = { + 'env': { + 'browser': true, + 'es2021': true + }, + 'extends': [ + 'eslint:recommended', + 'plugin:react/recommended', + 'plugin:@typescript-eslint/recommended', + "react-app", + ], + 'parser': '@typescript-eslint/parser', + 'parserOptions': { + 'ecmaFeatures': { + 'jsx': true + }, + 'ecmaVersion': 'latest', + 'sourceType': 'module' + }, + 'plugins': [ + '@typescript-eslint' + ], + 'rules': { + 'indent': [ + 'error', + 2 + ], + 'linebreak-style': [ + 'error', + 'unix' + ], + 'quotes': [ + 'error', + 'single' + ], + 'semi': [ + 'error', + 'always' + ], + "@typescript-eslint/ban-ts-comment": 0 + } +}; diff --git a/packages/plugin-multiple-editor/.npmignore b/packages/plugin-multiple-editor/.npmignore new file mode 100644 index 0000000..1437d3d --- /dev/null +++ b/packages/plugin-multiple-editor/.npmignore @@ -0,0 +1 @@ +es/dev-config \ No newline at end of file diff --git a/packages/plugin-multiple-editor/README.md b/packages/plugin-multiple-editor/README.md new file mode 100644 index 0000000..dab124a --- /dev/null +++ b/packages/plugin-multiple-editor/README.md @@ -0,0 +1,65 @@ +# 多文件编辑器 + +借助此插件可在低码引擎上使用任意层级的文件树进行代码的组织 + +## Demo + +```ts +import multipleFileCodeEditorFactory from '@alilc/lowcode-plugin-multiple-editor'; + +import { PrettierPlugin } from '@alilc/lowcode-plugin-multiple-editor/es/plugins/prettier-plugin'; + + +const PLUGIN_NAME = 'multiple-file-code-editor'; +// 详细参数可见 ts 类型声明 +const plugin: any = multipleFileCodeEditorFactory({ + softSave: true, // true 保存代码时将代码保存在插件类上，并不会调用引擎的 importSchema + es6: true, // 编译选项，true 时仅做 es module 的编译 + // 可选择使用插进进行代码编辑器功能的拓展 + plugins: [searchPlugin as any, lintPlugin, new PrettierPlugin()], + // 内置钩子，在插件初始化时进行一些操作，例如添加类型声明 + onInstall(controller: EditorController) { + for (const [path, content] of extraLibList) { + controller.addExtraLib(content, path); + } + controller.addComponentDeclarations(declarations); + controller.onImportSchema(async (schema) => { + // Todo sth. + }); + window.codeEditorController = controller; + }, + defaultFiles: { + utils: ` +export function helloWorld() { + console.log('hello world'); +} + ` + } +}); + +plugin.pluginName = PLUGIN_NAME; + +await plugins.register(plugin); +``` + +## 工作原理 + +使用该插件时，每次保存时： + +1. 编译代码，生成 __initExtra 函数方法，该方法用于初始化各个方法、生命周期的真实定义 +1. 修改 constructor 函数体，函数体内执行 __initExtra，constructor 将会在渲染引擎内执行，执行完成后即可得到所有方法和生命周期的真实定义 +1. 在 schema 上保存一个文件 Map，保存位置为 `schema.componentsTree[0]._sourceCodeMap` + +## 使用注意事项 + +1. 建议所有 project.importSchema 和 project.exportSchema 替换为 codeEditorController.importSchema 和 codeEditorController.exportSchema。原因是插件内部需要对文件内容进行处理 +2. 不能在 index.js 的 Class 之外进行函数、变量定义，如需定义则在其他文件内定义 +3. 不能在 index.js Class 的 state 定义中使用表达式 +4. 如需在 setter 内适用类型定义，请开启 base-editor 的单例模式，仅需在应用入口处调用如下方法即可： +5. 如果低码项目有使用出码，则需对出码进行定制，将 _sourceCodeMap 中的文件生成到项目中，并对文件的引用进行处理，具体处理方式可自行组织 + +__使用单例模式__ +```ts +import { configure } from '@alilc/lowcode-plugin-base-monaco-editor'; +configure({ singleton: true }); +``` diff --git a/packages/plugin-multiple-editor/config/env.js b/packages/plugin-multiple-editor/config/env.js new file mode 100644 index 0000000..dbd7bdf --- /dev/null +++ b/packages/plugin-multiple-editor/config/env.js @@ -0,0 +1,105 @@ +'use strict'; + +const fs = require('fs'); +const path = require('path'); +const paths = require('./paths'); + +// Make sure that including paths.js after env.js will read .env variables. +delete require.cache[require.resolve('./paths')]; + +const NODE_ENV = process.env.NODE_ENV; +if (!NODE_ENV) { + throw new Error( + 'The NODE_ENV environment variable is required but was not specified.' + ); +} + +// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use +const dotenvFiles = [ + `${paths.dotenv}.${NODE_ENV}.local`, + // Don't include `.env.local` for `test` environment + // since normally you expect tests to produce the same + // results for everyone + NODE_ENV !== 'test' && `${paths.dotenv}.local`, + `${paths.dotenv}.${NODE_ENV}`, + paths.dotenv, +].filter(Boolean); + +// Load environment variables from .env* files. Suppress warnings using silent +// if this file is missing. dotenv will never modify any environment variables +// that have already been set. Variable expansion is supported in .env files. +// https://github.com/motdotla/dotenv +// https://github.com/motdotla/dotenv-expand +dotenvFiles.forEach(dotenvFile => { + if (fs.existsSync(dotenvFile)) { + require('dotenv-expand')( + require('dotenv').config({ + path: dotenvFile, + }) + ); + } +}); + +// We support resolving modules according to `NODE_PATH`. +// This lets you use absolute paths in imports inside large monorepos: +// https://github.com/facebook/create-react-app/issues/253. +// It works similar to `NODE_PATH` in Node itself: +// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders +// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored. +// Otherwise, we risk importing Node.js core modules into an app instead of webpack shims. +// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421 +// We also resolve them to make sure all tools using them work consistently. +const appDirectory = fs.realpathSync(process.cwd()); +process.env.NODE_PATH = (process.env.NODE_PATH || '') + .split(path.delimiter) + .filter(folder => folder && !path.isAbsolute(folder)) + .map(folder => path.resolve(appDirectory, folder)) + .join(path.delimiter); + +// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be +// injected into the application via DefinePlugin in webpack configuration. +const REACT_APP = /^REACT_APP_/i; + +function getClientEnvironment(publicUrl) { + const raw = Object.keys(process.env) + .filter(key => REACT_APP.test(key)) + .reduce( + (env, key) => { + env[key] = process.env[key]; + return env; + }, + { + // Useful for determining whether we’re running in production mode. + // Most importantly, it switches React into the correct mode. + NODE_ENV: process.env.NODE_ENV || 'development', + // Useful for resolving the correct path to static assets in `public`. + // For example, . + // This should only be used as an escape hatch. Normally you would put + // images into the `src` and `import` them in code to get their paths. + PUBLIC_URL: publicUrl, + // We support configuring the sockjs pathname during development. + // These settings let a developer run multiple simultaneous projects. + // They are used as the connection `hostname`, `pathname` and `port` + // in webpackHotDevClient. They are used as the `sockHost`, `sockPath` + // and `sockPort` options in webpack-dev-server. + WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST, + WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH, + WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT, + // Whether or not react-refresh is enabled. + // It is defined here so it is available in the webpackHotDevClient. + FAST_REFRESH: process.env.FAST_REFRESH !== 'false', + } + ); + // Stringify all values so we can feed into webpack DefinePlugin + const stringified = { + process: {}, + 'process.env': Object.keys(raw).reduce((env, key) => { + env[key] = JSON.stringify(raw[key]); + return env; + }, {}), + }; + + return { raw, stringified }; +} + +module.exports = getClientEnvironment; diff --git a/packages/plugin-multiple-editor/config/externals.js b/packages/plugin-multiple-editor/config/externals.js new file mode 100644 index 0000000..56c7d30 --- /dev/null +++ b/packages/plugin-multiple-editor/config/externals.js @@ -0,0 +1,19 @@ +module.exports = function (webpackEnv) { + const isEnvProduction = webpackEnv === 'production'; + + return isEnvProduction ? { + 'react': 'react', + 'react-dom': 'react-dom', + '@alilc/lowcode-engine': '@alilc/lowcode-engine', + '@alilc/lowcode-engine-ext': '@alilc/lowcode-engine-ext', + '@alifd/next': '@alifd/next', + 'prettier/esm/standalone.mjs': 'prettier/esm/standalone.mjs', + } : { + 'react': 'React', + 'react-dom': 'ReactDOM', + '@alilc/lowcode-engine': 'AliLowCodeEngine', + '@alilc/lowcode-engine-ext': 'AliLowCodeEngineExt', + '@alifd/next': 'Next', + 'prettier/esm/standalone.mjs': 'prettier', + } +} \ No newline at end of file diff --git a/packages/plugin-multiple-editor/config/getHttpsConfig.js b/packages/plugin-multiple-editor/config/getHttpsConfig.js new file mode 100644 index 0000000..013d493 --- /dev/null +++ b/packages/plugin-multiple-editor/config/getHttpsConfig.js @@ -0,0 +1,66 @@ +'use strict'; + +const fs = require('fs'); +const path = require('path'); +const crypto = require('crypto'); +const chalk = require('react-dev-utils/chalk'); +const paths = require('./paths'); + +// Ensure the certificate and key provided are valid and if not +// throw an easy to debug error +function validateKeyAndCerts({ cert, key, keyFile, crtFile }) { + let encrypted; + try { + // publicEncrypt will throw an error with an invalid cert + encrypted = crypto.publicEncrypt(cert, Buffer.from('test')); + } catch (err) { + throw new Error( + `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}` + ); + } + + try { + // privateDecrypt will throw an error with an invalid key + crypto.privateDecrypt(key, encrypted); + } catch (err) { + throw new Error( + `The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${ + err.message + }` + ); + } +} + +// Read file and throw an error if it doesn't exist +function readEnvFile(file, type) { + if (!fs.existsSync(file)) { + throw new Error( + `You specified ${chalk.cyan( + type + )} in your env, but the file "${chalk.yellow(file)}" can't be found.` + ); + } + return fs.readFileSync(file); +} + +// Get the https config +// Return cert files if provided in env, otherwise just true or false +function getHttpsConfig() { + const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env; + const isHttps = HTTPS === 'true'; + + if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) { + const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE); + const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE); + const config = { + cert: readEnvFile(crtFile, 'SSL_CRT_FILE'), + key: readEnvFile(keyFile, 'SSL_KEY_FILE'), + }; + + validateKeyAndCerts({ ...config, keyFile, crtFile }); + return config; + } + return isHttps; +} + +module.exports = getHttpsConfig; diff --git a/packages/plugin-multiple-editor/config/jest/babelTransform.js b/packages/plugin-multiple-editor/config/jest/babelTransform.js new file mode 100644 index 0000000..5b391e4 --- /dev/null +++ b/packages/plugin-multiple-editor/config/jest/babelTransform.js @@ -0,0 +1,29 @@ +'use strict'; + +const babelJest = require('babel-jest').default; + +const hasJsxRuntime = (() => { + if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') { + return false; + } + + try { + require.resolve('react/jsx-runtime'); + return true; + } catch (e) { + return false; + } +})(); + +module.exports = babelJest.createTransformer({ + presets: [ + [ + require.resolve('babel-preset-react-app'), + { + runtime: hasJsxRuntime ? 'automatic' : 'classic', + }, + ], + ], + babelrc: false, + configFile: false, +}); diff --git a/packages/plugin-multiple-editor/config/jest/cssTransform.js b/packages/plugin-multiple-editor/config/jest/cssTransform.js new file mode 100644 index 0000000..8f65114 --- /dev/null +++ b/packages/plugin-multiple-editor/config/jest/cssTransform.js @@ -0,0 +1,14 @@ +'use strict'; + +// This is a custom Jest transformer turning style imports into empty objects. +// http://facebook.github.io/jest/docs/en/webpack.html + +module.exports = { + process() { + return 'module.exports = {};'; + }, + getCacheKey() { + // The output is always the same. + return 'cssTransform'; + }, +}; diff --git a/packages/plugin-multiple-editor/config/jest/fileTransform.js b/packages/plugin-multiple-editor/config/jest/fileTransform.js new file mode 100644 index 0000000..aab6761 --- /dev/null +++ b/packages/plugin-multiple-editor/config/jest/fileTransform.js @@ -0,0 +1,40 @@ +'use strict'; + +const path = require('path'); +const camelcase = require('camelcase'); + +// This is a custom Jest transformer turning file imports into filenames. +// http://facebook.github.io/jest/docs/en/webpack.html + +module.exports = { + process(src, filename) { + const assetFilename = JSON.stringify(path.basename(filename)); + + if (filename.match(/\.svg$/)) { + // Based on how SVGR generates a component name: + // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6 + const pascalCaseFilename = camelcase(path.parse(filename).name, { + pascalCase: true, + }); + const componentName = `Svg${pascalCaseFilename}`; + return `const React = require('react'); + module.exports = { + __esModule: true, + default: ${assetFilename}, + ReactComponent: React.forwardRef(function ${componentName}(props, ref) { + return { + $$typeof: Symbol.for('react.element'), + type: 'svg', + ref: ref, + key: null, + props: Object.assign({}, props, { + children: ${assetFilename} + }) + }; + }), + };`; + } + + return `module.exports = ${assetFilename};`; + }, +}; diff --git a/packages/plugin-multiple-editor/config/modules.js b/packages/plugin-multiple-editor/config/modules.js new file mode 100644 index 0000000..d63e41d --- /dev/null +++ b/packages/plugin-multiple-editor/config/modules.js @@ -0,0 +1,134 @@ +'use strict'; + +const fs = require('fs'); +const path = require('path'); +const paths = require('./paths'); +const chalk = require('react-dev-utils/chalk'); +const resolve = require('resolve'); + +/** + * Get additional module paths based on the baseUrl of a compilerOptions object. + * + * @param {Object} options + */ +function getAdditionalModulePaths(options = {}) { + const baseUrl = options.baseUrl; + + if (!baseUrl) { + return ''; + } + + const baseUrlResolved = path.resolve(paths.appPath, baseUrl); + + // We don't need to do anything if `baseUrl` is set to `node_modules`. This is + // the default behavior. + if (path.relative(paths.appNodeModules, baseUrlResolved) === '') { + return null; + } + + // Allow the user set the `baseUrl` to `appSrc`. + if (path.relative(paths.appSrc, baseUrlResolved) === '') { + return [paths.appSrc]; + } + + // If the path is equal to the root directory we ignore it here. + // We don't want to allow importing from the root directly as source files are + // not transpiled outside of `src`. We do allow importing them with the + // absolute path (e.g. `src/Components/Button.js`) but we set that up with + // an alias. + if (path.relative(paths.appPath, baseUrlResolved) === '') { + return null; + } + + // Otherwise, throw an error. + throw new Error( + chalk.red.bold( + "Your project's `baseUrl` can only be set to `src` or `node_modules`." + + ' Create React App does not support other values at this time.' + ) + ); +} + +/** + * Get webpack aliases based on the baseUrl of a compilerOptions object. + * + * @param {*} options + */ +function getWebpackAliases(options = {}) { + const baseUrl = options.baseUrl; + + if (!baseUrl) { + return {}; + } + + const baseUrlResolved = path.resolve(paths.appPath, baseUrl); + + if (path.relative(paths.appPath, baseUrlResolved) === '') { + return { + src: paths.appSrc, + }; + } +} + +/** + * Get jest aliases based on the baseUrl of a compilerOptions object. + * + * @param {*} options + */ +function getJestAliases(options = {}) { + const baseUrl = options.baseUrl; + + if (!baseUrl) { + return {}; + } + + const baseUrlResolved = path.resolve(paths.appPath, baseUrl); + + if (path.relative(paths.appPath, baseUrlResolved) === '') { + return { + '^src/(.*)$': '/src/$1', + }; + } +} + +function getModules() { + // Check if TypeScript is setup + const hasTsConfig = fs.existsSync(paths.appTsConfig); + const hasJsConfig = fs.existsSync(paths.appJsConfig); + + if (hasTsConfig && hasJsConfig) { + throw new Error( + 'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.' + ); + } + + let config; + + // If there's a tsconfig.json we assume it's a + // TypeScript project and set up the config + // based on tsconfig.json + if (hasTsConfig) { + const ts = require(resolve.sync('typescript', { + basedir: paths.appNodeModules, + })); + config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config; + // Otherwise we'll check if there is jsconfig.json + // for non TS projects. + } else if (hasJsConfig) { + config = require(paths.appJsConfig); + } + + config = config || {}; + const options = config.compilerOptions || {}; + + const additionalModulePaths = getAdditionalModulePaths(options); + + return { + additionalModulePaths: additionalModulePaths, + webpackAliases: getWebpackAliases(options), + jestAliases: getJestAliases(options), + hasTsConfig, + }; +} + +module.exports = getModules(); diff --git a/packages/plugin-multiple-editor/config/paths.js b/packages/plugin-multiple-editor/config/paths.js new file mode 100644 index 0000000..c105d23 --- /dev/null +++ b/packages/plugin-multiple-editor/config/paths.js @@ -0,0 +1,77 @@ +'use strict'; + +const path = require('path'); +const fs = require('fs'); +const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath'); + +// Make sure any symlinks in the project folder are resolved: +// https://github.com/facebook/create-react-app/issues/637 +const appDirectory = fs.realpathSync(process.cwd()); +const resolveApp = relativePath => path.resolve(appDirectory, relativePath); + +// We use `PUBLIC_URL` environment variable or "homepage" field to infer +// "public path" at which the app is served. +// webpack needs to know it to put the right + + + + + + + + + + + + + + + + + + + + + + + + + + + React App + + + +
+ + + diff --git a/packages/plugin-multiple-editor/public/logo192.png b/packages/plugin-multiple-editor/public/logo192.png new file mode 100644 index 0000000..fc44b0a Binary files /dev/null and b/packages/plugin-multiple-editor/public/logo192.png differ diff --git a/packages/plugin-multiple-editor/public/logo512.png b/packages/plugin-multiple-editor/public/logo512.png new file mode 100644 index 0000000..a4e47a6 Binary files /dev/null and b/packages/plugin-multiple-editor/public/logo512.png differ diff --git a/packages/plugin-multiple-editor/public/manifest.json b/packages/plugin-multiple-editor/public/manifest.json new file mode 100644 index 0000000..080d6c7 --- /dev/null +++ b/packages/plugin-multiple-editor/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/packages/plugin-multiple-editor/public/robots.txt b/packages/plugin-multiple-editor/public/robots.txt new file mode 100644 index 0000000..e9e57dc --- /dev/null +++ b/packages/plugin-multiple-editor/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/packages/plugin-multiple-editor/scripts/build.js b/packages/plugin-multiple-editor/scripts/build.js new file mode 100644 index 0000000..007f85e --- /dev/null +++ b/packages/plugin-multiple-editor/scripts/build.js @@ -0,0 +1,196 @@ +process.env.BABEL_ENV = 'production'; +process.env.NODE_ENV = 'production'; + +process.on('unhandledRejection', err => { + throw err; +}); + +// Ensure environment variables are read. +require('../config/env'); + +const path = require('path'); +const chalk = require('react-dev-utils/chalk'); +const fs = require('fs-extra'); +const bfj = require('bfj'); +const webpack = require('webpack'); +const configFactory = require('../config/webpack.config'); +const paths = require('../config/paths'); +const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'); +const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages'); +const printHostingInstructions = require('react-dev-utils/printHostingInstructions'); +const FileSizeReporter = require('react-dev-utils/FileSizeReporter'); +const printBuildError = require('react-dev-utils/printBuildError'); + +const measureFileSizesBeforeBuild = + FileSizeReporter.measureFileSizesBeforeBuild; +const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild; +const useYarn = fs.existsSync(paths.yarnLockFile); + +// These sizes are pretty large. We'll warn for bundles exceeding them. +const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024; +const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024; + +const isInteractive = process.stdout.isTTY; + +// Warn and crash if required files are missing +if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { + process.exit(1); +} + +const argv = process.argv.slice(2); +const writeStatsJson = argv.indexOf('--stats') !== -1; + +// Generate configuration +const config = configFactory('production'); + +const { checkBrowsers } = require('react-dev-utils/browsersHelper'); +checkBrowsers(paths.appPath, isInteractive) + .then(() => { + return measureFileSizesBeforeBuild(paths.appBuild); + }) + .then(previousFileSizes => { + fs.emptyDirSync(paths.appBuild); + return build(previousFileSizes); + }) + .then( + ({ stats, previousFileSizes, warnings }) => { + if (warnings.length) { + console.log(chalk.yellow('Compiled with warnings.\n')); + console.log(warnings.join('\n\n')); + console.log( + '\nSearch for the ' + + chalk.underline(chalk.yellow('keywords')) + + ' to learn more about each warning.' + ); + console.log( + 'To ignore, add ' + + chalk.cyan('// eslint-disable-next-line') + + ' to the line before.\n' + ); + } else { + console.log(chalk.green('Compiled successfully.\n')); + } + + console.log('File sizes after gzip:\n'); + printFileSizesAfterBuild( + stats, + previousFileSizes, + paths.appBuild, + WARN_AFTER_BUNDLE_GZIP_SIZE, + WARN_AFTER_CHUNK_GZIP_SIZE + ); + console.log(); + + const appPackage = require(paths.appPackageJson); + const publicUrl = paths.publicUrlOrPath; + const publicPath = config.output.publicPath; + const buildFolder = path.relative(process.cwd(), paths.appBuild); + printHostingInstructions( + appPackage, + publicUrl, + publicPath, + buildFolder, + useYarn + ); + }, + err => { + const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true'; + if (tscCompileOnError) { + console.log( + chalk.yellow( + 'Compiled with the following type errors (you may want to check these before deploying your app):\n' + ) + ); + printBuildError(err); + } else { + console.log(chalk.red('Failed to compile.\n')); + printBuildError(err); + process.exit(1); + } + } + ) + .catch(err => { + if (err && err.message) { + console.log(err.message); + } + process.exit(1); + }); + +// Create the production build and print the deployment instructions. +function build(previousFileSizes) { + console.log('Creating an optimized production build...'); + + const compiler = webpack(config); + return new Promise((resolve, reject) => { + compiler.run((err, stats) => { + let messages; + if (err) { + if (!err.message) { + return reject(err); + } + + let errMessage = err.message; + + // Add additional information for postcss errors + if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) { + errMessage += + '\nCompileError: Begins at CSS selector ' + + err['postcssNode'].selector; + } + + messages = formatWebpackMessages({ + errors: [errMessage], + warnings: [], + }); + } else { + messages = formatWebpackMessages( + stats.toJson({ all: false, warnings: true, errors: true }) + ); + } + if (messages.errors.length) { + // Only keep the first error. Others are often indicative + // of the same problem, but confuse the reader with noise. + if (messages.errors.length > 1) { + messages.errors.length = 1; + } + return reject(new Error(messages.errors.join('\n\n'))); + } + // process.env.CI=true; + // if ( + // process.env.CI && + // (typeof process.env.CI !== 'string' || + // process.env.CI.toLowerCase() !== 'false') && + // messages.warnings.length + // ) { + // // Ignore sourcemap warnings in CI builds. See #8227 for more info. + // const filteredWarnings = messages.warnings.filter( + // w => !/Failed to parse source map/.test(w) + // ); + // if (filteredWarnings.length) { + // console.log( + // chalk.yellow( + // '\nTreating warnings as errors because process.env.CI = true.\n' + + // 'Most CI servers set it automatically.\n' + // ) + // ); + // return reject(new Error(filteredWarnings.join('\n\n'))); + // } + // } + + const resolveArgs = { + stats, + previousFileSizes, + warnings: messages.warnings, + }; + + if (writeStatsJson) { + return bfj + .write(paths.appBuild + '/bundle-stats.json', stats.toJson()) + .then(() => resolve(resolveArgs)) + .catch(error => reject(new Error(error))); + } + + return resolve(resolveArgs); + }); + }); +} diff --git a/packages/plugin-multiple-editor/scripts/start.js b/packages/plugin-multiple-editor/scripts/start.js new file mode 100644 index 0000000..4104798 --- /dev/null +++ b/packages/plugin-multiple-editor/scripts/start.js @@ -0,0 +1,154 @@ +'use strict'; + +// Do this as the first thing so that any code reading it knows the right env. +process.env.BABEL_ENV = 'development'; +process.env.NODE_ENV = 'development'; + +// Makes the script crash on unhandled rejections instead of silently +// ignoring them. In the future, promise rejections that are not handled will +// terminate the Node.js process with a non-zero exit code. +process.on('unhandledRejection', err => { + throw err; +}); + +// Ensure environment variables are read. +require('../config/env'); + +const fs = require('fs'); +const chalk = require('react-dev-utils/chalk'); +const webpack = require('webpack'); +const WebpackDevServer = require('webpack-dev-server'); +const clearConsole = require('react-dev-utils/clearConsole'); +const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'); +const { + choosePort, + createCompiler, + prepareProxy, + prepareUrls, +} = require('react-dev-utils/WebpackDevServerUtils'); +const openBrowser = require('react-dev-utils/openBrowser'); +const semver = require('semver'); +const paths = require('../config/paths'); +const configFactory = require('../config/webpack.config'); +const createDevServerConfig = require('../config/webpackDevServer.config'); +const getClientEnvironment = require('../config/env'); +const react = require(require.resolve('react', { paths: [paths.appPath] })); + +const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1)); +const useYarn = fs.existsSync(paths.yarnLockFile); +const isInteractive = process.stdout.isTTY; + +// Warn and crash if required files are missing +if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { + process.exit(1); +} + +// Tools like Cloud9 rely on this. +const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; +const HOST = process.env.HOST || '0.0.0.0'; + +if (process.env.HOST) { + console.log( + chalk.cyan( + `Attempting to bind to HOST environment variable: ${chalk.yellow( + chalk.bold(process.env.HOST) + )}` + ) + ); + console.log( + `If this was unintentional, check that you haven't mistakenly set it in your shell.` + ); + console.log( + `Learn more here: ${chalk.yellow('https://cra.link/advanced-config')}` + ); + console.log(); +} + +// We require that you explicitly set browsers and do not fall back to +// browserslist defaults. +const { checkBrowsers } = require('react-dev-utils/browsersHelper'); +checkBrowsers(paths.appPath, isInteractive) + .then(() => { + // We attempt to use the default port but if it is busy, we offer the user to + // run on a different port. `choosePort()` Promise resolves to the next free port. + return choosePort(HOST, DEFAULT_PORT); + }) + .then(port => { + if (port == null) { + // We have not found a port. + return; + } + + const config = configFactory('development'); + const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'; + const appName = require(paths.appPackageJson).name; + + const useTypeScript = fs.existsSync(paths.appTsConfig); + const urls = prepareUrls( + protocol, + HOST, + port, + paths.publicUrlOrPath.slice(0, -1) + ); + // Create a webpack compiler that is configured with custom messages. + const compiler = createCompiler({ + appName, + config, + urls, + useYarn, + useTypeScript, + webpack, + }); + // Load proxy config + const proxySetting = require(paths.appPackageJson).proxy; + const proxyConfig = prepareProxy( + proxySetting, + paths.appPublic, + paths.publicUrlOrPath + ); + // Serve webpack assets generated by the compiler over a web server. + const serverConfig = { + ...createDevServerConfig(proxyConfig, urls.lanUrlForConfig), + host: HOST, + port, + }; + const devServer = new WebpackDevServer(serverConfig, compiler); + // Launch WebpackDevServer. + devServer.startCallback(() => { + if (isInteractive) { + clearConsole(); + } + + if (env.raw.FAST_REFRESH && semver.lt(react.version, '16.10.0')) { + console.log( + chalk.yellow( + `Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.` + ) + ); + } + + console.log(chalk.cyan('Starting the development server...\n')); + openBrowser(urls.localUrlForBrowser); + }); + + ['SIGINT', 'SIGTERM'].forEach(function (sig) { + process.on(sig, function () { + devServer.close(); + process.exit(); + }); + }); + + if (process.env.CI !== 'true') { + // Gracefully exit when stdin ends + process.stdin.on('end', function () { + devServer.close(); + process.exit(); + }); + } + }) + .catch(err => { + if (err && err.message) { + console.log(err.message); + } + process.exit(1); + }); diff --git a/packages/plugin-multiple-editor/scripts/test.js b/packages/plugin-multiple-editor/scripts/test.js new file mode 100644 index 0000000..a38c855 --- /dev/null +++ b/packages/plugin-multiple-editor/scripts/test.js @@ -0,0 +1,52 @@ +'use strict'; + +// Do this as the first thing so that any code reading it knows the right env. +process.env.BABEL_ENV = 'test'; +process.env.NODE_ENV = 'test'; +process.env.PUBLIC_URL = ''; + +// Makes the script crash on unhandled rejections instead of silently +// ignoring them. In the future, promise rejections that are not handled will +// terminate the Node.js process with a non-zero exit code. +process.on('unhandledRejection', err => { + throw err; +}); + +// Ensure environment variables are read. +require('../config/env'); + +const jest = require('jest'); +const execSync = require('child_process').execSync; +let argv = process.argv.slice(2); + +function isInGitRepository() { + try { + execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' }); + return true; + } catch (e) { + return false; + } +} + +function isInMercurialRepository() { + try { + execSync('hg --cwd . root', { stdio: 'ignore' }); + return true; + } catch (e) { + return false; + } +} + +// Watch unless on CI or explicitly running all tests +if ( + !process.env.CI && + argv.indexOf('--watchAll') === -1 && + argv.indexOf('--watchAll=false') === -1 +) { + // https://github.com/facebook/create-react-app/issues/5210 + const hasSourceControl = isInGitRepository() || isInMercurialRepository(); + argv.push(hasSourceControl ? '--watch' : '--watchAll'); +} + + +jest.run(argv); diff --git a/packages/plugin-multiple-editor/src/App.tsx b/packages/plugin-multiple-editor/src/App.tsx new file mode 100644 index 0000000..c5eab7b --- /dev/null +++ b/packages/plugin-multiple-editor/src/App.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import Editor from '@/MultipleFileEditor'; +import { EditorProvider } from './Context'; + +const App = () => { + return ( + + + + ); +}; +export default App; diff --git a/packages/plugin-multiple-editor/src/Context.tsx b/packages/plugin-multiple-editor/src/Context.tsx new file mode 100644 index 0000000..b90b61b --- /dev/null +++ b/packages/plugin-multiple-editor/src/Context.tsx @@ -0,0 +1,189 @@ +import { + createContext, + FC, + useContext, + useReducer, + useMemo, + useCallback, + useEffect, +} from 'react'; + +import React from 'react'; +import { + deleteNodeOnTree, + Dir, + File, + fileMapToTree, + getFileByPath, + getInitFile, + insertNodeToTree, + parseKey, + sortDir, +} from './utils/files'; +import { editorController } from './Controller'; + +export type CurrentFile = { + file?: File; + path: string[]; +}; + +export interface EditorContextType { + declarations: string; + fileTree: Dir; + mode?: 'single' | 'multiple'; + currentFile: CurrentFile; + modifiedKeys: string[]; + softSave?: boolean; + updateFileTree(tree: Dir): void; + updateFileTreeByPath( + path: string[], + target: Dir | File, + operation: 'delete' | 'add' | 'rename', + newName?: string + ): void; + selectFile(file: File | string, path: string[]): void; + selectFileByName(name: string): void; + updateState(state: Partial): void; + updateCurrentFile(content: string): void; + initialFileMap: Record; + extraLibs: { path: string; content: string }[]; +} + +export const EditorContext = createContext({ + declarations: '', +} as any); + +const { Provider, Consumer: EditorConsumer } = EditorContext; + +export { EditorConsumer }; + +export interface StoreState { + mode?: 'single' | 'multiple'; + declarations: string; + fileTree: Dir; + currentFile: CurrentFile; + modifiedKeys: string[]; + extraLibs: { path: string; content: string }[]; +} + +function reducer(state: StoreState, action: { type: string; payload: any }) { + const { type, payload } = action; + switch (type) { + case 'update': { + return { ...state, ...payload }; + } + default: { + return state; + } + } +} + +export const EditorProvider: FC<{ + softSave?: boolean; + mode?: 'single' | 'multiple'; +}> = (props) => { + const { softSave, mode } = props; + const fileMap = useMemo( + () => editorController.getCodeTemp()?._sourceCodeMap.files || {}, + [] + ); + const initFileTree = fileMap + ? fileMapToTree(fileMap) + : new Dir('/', [], [], ''); + const initState: StoreState = { + declarations: '', + extraLibs: [], + fileTree: sortDir(initFileTree), + currentFile: { path: [], file: getInitFile(initFileTree) }, + modifiedKeys: [], + }; + const [_state, dispatch] = useReducer(reducer, initState); + const state = _state as StoreState; + + const selectFile = useCallback( + (file: string | File, path: string[]) => { + let finalFile: File; + if (typeof file === 'string') { + const { fileTree } = state; + const targetFile = getFileByPath(fileTree, file, path); + finalFile = targetFile || new File('index.js', '', 'index.js'); + } else { + finalFile = file; + } + dispatch({ + type: 'update', + payload: { currentFile: { file: finalFile, path } }, + }); + }, + [state] + ); + const contextValue = useMemo( + () => ({ + ...state, + mode, + initialFileMap: fileMap, + softSave, + updateFileTree(tree: Dir) { + dispatch({ type: 'update', payload: { fileTree: sortDir(tree) } }); + }, + updateFileTreeByPath(path, target, operation, newName) { + const { fileTree } = state; + if (operation === 'add') { + insertNodeToTree(fileTree, path, target); + } else if (operation === 'delete') { + deleteNodeOnTree(fileTree, path, target); + } else if (operation === 'rename') { + target.name = newName as string; + } + const payload: Partial = { fileTree: sortDir(fileTree) }; + // 新增文件时，选中当前文件 + if (target.type === 'file' && operation === 'add') { + payload.currentFile = { file: target as File, path }; + } else if (target.type === 'file' && operation === 'delete') { + payload.currentFile = { file: getInitFile(fileTree), path: [] }; + } + dispatch({ type: 'update', payload }); + }, + selectFile, + selectFileByName(filename: string) { + const { path, file } = parseKey(filename); + selectFile(file, path); + }, + updateState(state: Partial) { + dispatch({ type: 'update', payload: state }); + }, + updateCurrentFile(content) { + if (this.currentFile.file) { + this.currentFile.file.content = content; + this.updateState({ + currentFile: { + ...this.currentFile, + file: { + ...this.currentFile.file, + content, + }, + }, + }); + // this.updateFileTree({...this.fileTree}); + } + }, + }), + [fileMap, mode, selectFile, softSave, state] + ); + useEffect(() => { + const off = editorController.onSourceCodeChange((codeMap) => { + const fileTree = fileMapToTree(codeMap) || new Dir('/', [], [], ''); + dispatch({ type: 'update', payload: { fileTree } }); + const targetFile = getFileByPath(fileTree, 'index.js', []); + setTimeout(() => { + selectFile(targetFile || 'index.js', []); + }, 100); + }); + return () => off(); + }, [selectFile]); + return {props.children}; +}; + +export function useEditorContext() { + return useContext(EditorContext); +} diff --git a/packages/plugin-multiple-editor/src/Controller.ts b/packages/plugin-multiple-editor/src/Controller.ts new file mode 100644 index 0000000..401838a --- /dev/null +++ b/packages/plugin-multiple-editor/src/Controller.ts @@ -0,0 +1,413 @@ +import type { Project, Event } from '@alilc/lowcode-shell'; +import { IPublicTypeProjectSchema } from '@alilc/lowcode-types'; +import { skeleton } from '@alilc/lowcode-engine'; +import { + beautifyCSS, + compatGetSourceCodeMap, + fileMapToTree, + getConstructorContent, + getDefaultDeclaration, + getInitFuncContent, + lintIndex, + treeToMap, +} from './utils'; +import { FunctionEventParams, Monaco, ObjectType } from './types'; +import { common } from '@alilc/lowcode-engine'; +import { editor } from 'monaco-editor'; +import { + addFunction, + focusByFunctionName, + focusCodeByContent, + getDefaultFileList, +} from './MultipleFileEditor/util'; +import { EditorContextType } from './Context'; +import { Message } from '@alifd/next'; +import { getMethods } from './utils/get-methods'; +import { EditorHook, HookKeys } from './EditorHook'; +import { PluginHooks, Service } from './Service'; +import { MonacoSuggestions } from './MonacoSuggestions'; + +export * from './EditorHook'; + +export interface EditorControllerState { + declarationsMap: Record; + extraLibs: { path: string; content: string }[]; +} + +export type HookHandleFn = (fn: T) => () => void; + +export interface CodeTemp { + css: any; + methods: any; + state: any; + lifeCycles: any; + _sourceCodeMap: { files: ObjectType; meta: any }; +} + +export class EditorController extends EditorHook { + editor!: Event; + + project!: Project; + + es6?: boolean; + + defaultFiles: ObjectType; + + useLess?: boolean; + + public monaco?: Monaco; + + private codeTemp?: CodeTemp; + + private listeners: any[]; + + private extraLibMap: Map; + + private state: EditorControllerState; + + public codeEditor?: editor.IStandaloneCodeEditor; + + public codeEditorCtx?: EditorContextType; + + public service!: Service; + + private loadMonacoPromise?: Promise; + + private monacoSuggestions: MonacoSuggestions; + + public onImportSchema: HookHandleFn< + (schema: IPublicTypeProjectSchema) => void | Promise + > = this.hookFactory(HookKeys.onImport); + + public onSourceCodeChange: HookHandleFn<(code: any) => void> = + this.hookFactory(HookKeys.onSourceCodeChange); + + public onEditCodeChange: HookHandleFn< + (code: { content: string; file: string }) => void + > = this.hookFactory(HookKeys.onEditCodeChange); + + public onMonacoLoaded: HookHandleFn<(monaco: Monaco) => void> = + this.hookFactory(HookKeys.onMonacoLoaded); + + constructor() { + super(); + this.state = { + declarationsMap: {}, + extraLibs: [], + }; + this.listeners = []; + this.defaultFiles = {}; + this.extraLibMap = new Map(); + this.monacoSuggestions = new MonacoSuggestions(this); + } + + async initMonaco() { + if (!this.monaco) { + if (!this.loadMonacoPromise) { + const { getMonaco } = await import( + '@alilc/lowcode-plugin-base-monaco-editor' + ); + this.loadMonacoPromise = getMonaco(); + } + this.monaco = await this.loadMonacoPromise; + this.triggerHook(HookKeys.onMonacoLoaded, this.monaco); + this.service.triggerHook(PluginHooks.onMonacoLoaded, this.monaco); + } + } + + init(project: Project, editor: Event, service: Service) { + this.project = project; + this.editor = editor; + this.service = service; + this.setupEventListeners(); + this.initCodeTempBySchema(this.getSchema(true)); + this.triggerHook(HookKeys.onImport, this.getSchema(true)); + this.initMonaco(); + } + + initCodeEditor( + codeEditor: editor.IStandaloneCodeEditor, + ctx: EditorContextType + ) { + this.codeEditor = codeEditor; + this.codeEditorCtx = ctx; + this.monacoSuggestions.init(); + } + + setCodeTemp(code: any | ((old: CodeTemp) => CodeTemp)) { + if (typeof code === 'function') { + this.codeTemp = code(this.codeTemp); + } else { + this.codeTemp = code; + } + } + + getCodeTemp(): CodeTemp | undefined { + return this.codeTemp; + } + + addComponentDeclaration(key: string, declaration: string) { + this.state.declarationsMap[key] = declaration; + this.publish(); + this.applyLibs(); + } + + addComponentDeclarations(list: [string, string][] = []) { + for (const [key, dec] of list) { + this.state.declarationsMap[key] = dec; + } + this.publish(); + this.applyLibs(); + } + + private publishExtraLib() { + const libs: { path: string; content: string }[] = []; + this.extraLibMap.forEach((content, path) => libs.push({ content, path })); + this.state.extraLibs = libs; + this.publish(); + } + + addExtraLib(content: string, path: string) { + this.extraLibMap.set(path, content); + this.applyLibs(); + this.publishExtraLib(); + } + + removeExtraLib(path: string) { + this.extraLibMap.delete(path); + this.applyLibs(); + this.publishExtraLib(); + } + + private async applyLibs() { + if (!this.monaco) { + await this.initMonaco(); + } + const decStr = Object.keys(this.state.declarationsMap).reduce( + (v, k) => `${v}\n${k}: ${this.state.declarationsMap[k]};\n`, + '' + ); + const { content, path } = getDefaultDeclaration(decStr); + this.monaco?.languages.typescript.javascriptDefaults.addExtraLib( + content, + path + ); + this.extraLibMap.forEach((value, key) => { + this.monaco?.languages.typescript.javascriptDefaults.addExtraLib( + value, + key + ); + }); + } + + getSchema(pure?: boolean): IPublicTypeProjectSchema { + const schema = this.project.exportSchema( + common.designerCabin.TransformStage.Save + ); + // 导出的时候重新编译一下，避免没有打开编辑器的时候直接保存值没有编译代码的情况 + const fileMap = this.codeEditorCtx?.fileTree + ? treeToMap(this.codeEditorCtx.fileTree) + : this.codeTemp?._sourceCodeMap.files; // 获取最新的fileMap + if (fileMap && !pure) { + try { + if (!this.compileSourceCode(fileMap)) { + // 下面会导致整个页面挂掉，先作为弱依赖，给个提示 + throw new Error('编译失败'); + } + Object.assign(schema.componentsTree[0], this.codeTemp); + } catch (error) { + console.error(error); + Message.error('源码编译失败，请返回修改'); + } + } + return schema; + } + + importSchema(schema: IPublicTypeProjectSchema) { + this.project.importSchema(schema); + this.initCodeTempBySchema(schema); + this.triggerHook(HookKeys.onImport, schema); + // 文件树发生改变 + this.triggerHook( + HookKeys.onSourceCodeChange, + (schema as any).componentsTree[0]?._sourceCodeMap + ); + } + + publish(state?: any) { + this.state = { + ...this.state, + ...state, + }; + this.listeners.forEach((l) => l(this.state)); + } + + subscribe(fn: (state: EditorControllerState) => any) { + this.listeners.push(fn); + fn(this.state); + return () => { + this.listeners = this.listeners.filter((l) => l !== fn); + }; + } + + public initCodeTempBySchema(schema: IPublicTypeProjectSchema) { + const componentSchema = schema.componentsTree[0] || {}; + const { css, methods, state, lifeCycles } = componentSchema as any; + const codeMap = (componentSchema as any)._sourceCodeMap; + const defaultFileMap = { + ...this.defaultFiles, + ...getDefaultFileList(schema, this.useLess), + }; + const compatMap = compatGetSourceCodeMap(codeMap, defaultFileMap); + this.codeTemp = { + css, + methods, + state, + lifeCycles, + _sourceCodeMap: { + ...compatMap, + }, + }; + } + + private setupEventListeners() { + this.editor?.on('common:codeEditor.focusByFunction', (( + params: FunctionEventParams + ) => { + setTimeout(() => { + this.codeEditorCtx?.selectFile('index.js', []); + if (this.monaco && this.codeEditor) { + focusByFunctionName(this.codeEditor, params, this.monaco); + } + }, 100); + }) as any); + + this.editor?.on('common:codeEditor.addFunction', (( + params: FunctionEventParams + ) => { + this.codeEditorCtx?.selectFile('index.js', []); + setTimeout(() => { + if (this.monaco && this.codeEditor) { + addFunction(this.codeEditor, params, this.monaco); + } + }, 100); + }) as any); + } + + focusCodeByPosition(file: string, pos: { line: number; col?: number }) { + skeleton.showPanel('codeEditor'); + setTimeout(() => { + this.codeEditorCtx?.selectFileByName(file); + setTimeout(() => { + if (this.codeEditor) { + this.codeEditor.revealLineInCenter(pos.line); + this.codeEditor.setPosition({ + column: pos.col || 0, + lineNumber: pos.line, + }); + this.codeEditor.focus(); + } + }, 100); + }, 100); + } + + focusCode(file: string, content: string) { + skeleton.showPanel('codeEditor'); + setTimeout(() => { + this.codeEditorCtx?.selectFileByName(file); + if (this.codeEditor && this.monaco) { + focusCodeByContent(this.codeEditor, this.monaco, content); + } + }, 100); + } + + // 编译并保存源码 + compileSourceCode(fileMap: any, softSave = true) { + const { valid, validMsg } = lintIndex(fileMap['index.js']); + if (!valid) { + Message.error(validMsg); + return false; + } + const { methods, lifeCycles, state } = getMethods(fileMap['index.js']); + const schema = this.getSchema(true); + const pageNode: any = {}; + pageNode._sourceCodeMap = { + files: fileMap, + meta: this.getCodeTemp()?._sourceCodeMap?.meta || {}, + }; + pageNode.state = state; + pageNode.methods = methods; + pageNode.lifeCycles = lifeCycles; + const lessContent = fileMap['index.less']; + // 没有less文件，走之前的逻辑 + if (!lessContent) { + pageNode.css = beautifyCSS(fileMap['index.css'] || '', {}); + } + if (this.useLess && lessContent) { + window.less?.render(lessContent, {}, (err: any, output: any) => { + if (err) { + Message.error('less 编译失败'); + console.error(err); + } + pageNode.css = output?.css || ''; + }); + } + if (lifeCycles.constructor === {}.constructor) { + lifeCycles.constructor = { + originalCode: 'function constructor() { }', + type: 'JSFunction', + value: 'function constructor() { }', + } as any; + } + // 编译工具函数 + (lifeCycles as any).constructor.value = getConstructorContent( + (lifeCycles.constructor as any).value as any + ); + pageNode.methods.__initExtra = { + type: 'JSFunction', + value: getInitFuncContent(fileMap, this.es6), + }; + if (softSave) { + (window as any).__lowcode__source__code__ = { + css: pageNode.css, + methods: pageNode.methods, + state: pageNode.state, + lifeCycles: pageNode.lifeCycles, + _sourceCodeMap: pageNode._sourceCodeMap, + }; + this.setCodeTemp((window as any).__lowcode__source__code__); + } else { + if (schema.componentsTree[0]) { + Object.assign(schema.componentsTree[0], pageNode); + } + this.project.importSchema(schema); + Message.success('保存成功'); + } + return true; + } + + public resetSaveStatus() { + this.codeEditorCtx?.updateState({ modifiedKeys: [] }); + } + + // 添加一堆文件 + public addFiles(fileMap: ObjectType) { + if (!Object.keys(fileMap || {}).length || !this.codeEditorCtx?.fileTree) { + return; + } + const subTree = fileMapToTree(fileMap); + const { files, dirs } = subTree; + const newTree = { ...this.codeEditorCtx?.fileTree }; + newTree.files?.push(...files); + newTree.dirs?.push(...dirs); + this.codeEditorCtx.updateState({ + fileTree: newTree, + }); + } + + triggerHook(key: HookKeys, ...args: any[]): void { + super.triggerHook(key, ...args); + } +} + +export const editorController = new EditorController(); diff --git a/packages/plugin-multiple-editor/src/EditorHook.ts b/packages/plugin-multiple-editor/src/EditorHook.ts new file mode 100644 index 0000000..8fcf145 --- /dev/null +++ b/packages/plugin-multiple-editor/src/EditorHook.ts @@ -0,0 +1,33 @@ +export enum HookKeys { + onImport = 'onImport', + onSourceCodeChange = 'onSourceCodeChange', + onEditCodeChange = 'onEditCodeChange', + onMonacoLoaded = 'onMonacoLoaded', +} + +export class EditorHook { + private hooks: Map; + + constructor() { + this.hooks = new Map(); + } + + triggerHook(key: string, ...args: any[]) { + this.hooks.get(key)?.forEach((fn) => fn(...args)); + } + + protected hookFactory(key: string) { + return ((fn: any) => { + const newList = this.hooks.get(key) || []; + newList.push(fn); + this.hooks.set(key, newList); + return () => { + const list = this.hooks.get(key) || []; + this.hooks.set( + key, + list.filter((f) => f !== fn) + ); + }; + }) as any; + } +} diff --git a/packages/plugin-multiple-editor/src/MonacoSuggestions.ts b/packages/plugin-multiple-editor/src/MonacoSuggestions.ts new file mode 100644 index 0000000..62a35e5 --- /dev/null +++ b/packages/plugin-multiple-editor/src/MonacoSuggestions.ts @@ -0,0 +1,67 @@ +import { EditorController } from './Controller'; +import { getFilesByPath, pathResolve, resolveFilePath } from './utils'; + +export class MonacoSuggestions { + private editorInitialed = false; + constructor(private controller: EditorController) {} + + get monaco() { + return this.controller.monaco!; + } + + get editor() { + return this.controller.codeEditor!; + } + + init() { + if (!this.editorInitialed) { + this.initPathSuggestion(); + } + } + + private initPathSuggestion() { + this.editorInitialed = true; + const monaco = this.monaco; + const getFileMap = () => + this.controller.getCodeTemp()?._sourceCodeMap.files || {}; + this.monaco?.languages.registerCompletionItemProvider( + ['javascript', 'typescript'], + { + triggerCharacters: ['/'], + provideCompletionItems(model, position) { + const textUntilPosition = model.getValueInRange({ + startLineNumber: position.lineNumber, + startColumn: 1, + endLineNumber: position.lineNumber, + endColumn: position.column + 1, + }); + const currentFilePath = resolveFilePath(model.uri.path); + const match = textUntilPosition.match(/('.*')|(".*")/gim); + if (!match) return; + const relativePath = match?.[0]?.replace(/'|"/g, '') || ''; + const filesList = getFilesByPath( + getFileMap(), + pathResolve(currentFilePath, relativePath) + ); + return { + suggestions: filesList.map(({ type, path }) => ({ + label: path, + sortText: type === 'dir' ? '1' : '2', + range: { + startColumn: position.column, + endColumn: position.column, + startLineNumber: position.lineNumber, + endLineNumber: position.lineNumber, + }, + kind: + type === 'file' + ? monaco.languages.CompletionItemKind.File + : monaco.languages.CompletionItemKind.Folder, + insertText: path.replace(/\.\w+$/, ''), + })), + }; + }, + } + ); + } +} diff --git a/packages/plugin-multiple-editor/src/MultipleFileEditor/Editor.tsx b/packages/plugin-multiple-editor/src/MultipleFileEditor/Editor.tsx new file mode 100644 index 0000000..cb1e374 --- /dev/null +++ b/packages/plugin-multiple-editor/src/MultipleFileEditor/Editor.tsx @@ -0,0 +1,220 @@ +import FileTree from '@/components/FileTree'; +import MonacoEditor from '@/components/MonacoEditor'; +import Outline from '@/components/Outline'; +import { useEditorContext } from '../Context'; +import { Dialog, Message } from '@alifd/next'; +import cls from 'classnames'; +import React, { FC, useCallback, useEffect, useRef, useState } from 'react'; +import './index.less'; +import { HandleChangeFn } from '../components/FileTree/TreeNode'; +import { languageMap } from '../utils/constants'; +import { parseKey, treeToMap } from 'utils/files'; +import { editorController, HookKeys } from '../Controller'; + +import { initEditorModel, useUnReactiveFn } from './util'; +import type { editor } from 'monaco-editor'; +import { Monaco } from '../types'; +import { PluginHooks } from '@/Service'; + +// 最大最小宽（带工具栏） +const MINWIDTH = 246; +const MAXWIDTH = 446; + +const Editor: FC = () => { + const editorContext = useEditorContext(); + const { + fileTree, + // softSave, + mode, + modifiedKeys, + currentFile: { file, path }, + selectFile, + updateState, + initialFileMap, + } = editorContext; + const monacoEditor = useRef(); + const monacoRef = useRef(); + const [fullscreen, setFullscreen] = useState(false); + const [fileContent, setFileContent] = useState(file?.content); + const [fileTreeWidth, setFileTreeWidth] = useState('200px'); + const containerRef = useRef(); + const filePath = file?.fullPath || ''; + const handleChange = useCallback( + (file, path) => { + selectFile(file, path); + setFileContent(file?.content); + }, + [selectFile] + ); + const handleEditorChange = useCallback( + (value: string) => { + setFileContent(value); + file && (file.content = value); + editorController.triggerHook(HookKeys.onEditCodeChange, { + file: file?.fullPath, + content: value, + }); + if (!modifiedKeys.find((k) => k === file?.fullPath)) { + updateState({ modifiedKeys: [...modifiedKeys, file?.fullPath as any] }); + } + }, + [file, modifiedKeys, updateState] + ); + + const handleCompile = useCallback( + (silent?: boolean) => { + try { + const fileMap = treeToMap(fileTree); + const success = editorController.compileSourceCode(fileMap); + !silent && success && Message.success('编译成功'); + return true; + } catch (error) { + Dialog.alert({ + title: '编译失败', + content: ( + 
{(error as any).message || '编译失败，请检查语法'}
+ ), + }); + console.error(error); + return false; + } + }, + [fileTree] + ); + const { handler: handleSave } = useUnReactiveFn(() => { + if (handleCompile(true)) { + // 全部保存, 标记清空 + updateState({ modifiedKeys: [] }); + } + }, [handleCompile]); + + const handleGotoFile = useCallback( + (filename: string) => { + const { file, path } = parseKey(filename); + selectFile(file, path); + }, + [selectFile] + ); + + const handleEditorMount = useCallback( + (codeEditor: any, monaco: Monaco) => { + monacoEditor.current = codeEditor; + monacoRef.current = monaco; + initEditorModel(initialFileMap, monaco); + editorController.initCodeEditor(codeEditor, editorContext); + editorController.service.triggerHook( + PluginHooks.onEditorMount, + codeEditor + ); + }, + [editorContext, initialFileMap] + ); + + useEffect(() => { + if (monacoEditor.current && editorContext) { + editorController.initCodeEditor(monacoEditor.current, editorContext); + } + }, [editorContext]); + + useEffect(() => { + editorController.service.triggerHook(PluginHooks.onSelectFileChange, { + filepath: file?.fullPath, + content: file?.content, + }); + editorController.triggerHook(HookKeys.onEditCodeChange, { + file: file?.fullPath, + content: file?.content, + }); + }, [file, path]); + + useEffect(() => { + editorController.editor?.on( + 'skeleton.panel-dock.unactive', + (pluginName) => { + if ( + pluginName === 'codeEditor' || + pluginName === 'multiple-file-code-editor' + ) { + handleSave(); + } + } + ); + }, [handleSave]); + const handleFullScreen = useCallback((enable: boolean) => { + setFullscreen(enable); + }, []); + const handleMoveDrag = () => { + let first = true; + document.onmousemove = function (e) { + if (first) { + // 只拖动一下视为点击误触 防止偶现点击触发拖动问题 + first = false; + return; + } + const clientX = e.clientX; + const maxWidth = + clientX < MINWIDTH ? MINWIDTH : clientX > MAXWIDTH ? MAXWIDTH : clientX; + setFileTreeWidth(`${fullscreen ? maxWidth : maxWidth - 46}px`); + return false; + }; + + document.onmouseup = function (e) { + document.onmousemove = null; + // document.onmouseup = null; + return false; + }; + }; + return ( +
+
+ handleCompile()} + fullscreen={fullscreen} + onFullscreen={handleFullScreen} + actions={editorController.service.actionMap} + /> +
+ +
+

{file ? file.name : '无文件'}

+ {file ? ( + + ) : ( + '未选中任意文件' + )} +
+
+ ); +}; + +export default Editor; diff --git a/packages/plugin-multiple-editor/src/MultipleFileEditor/img/delete.svg b/packages/plugin-multiple-editor/src/MultipleFileEditor/img/delete.svg new file mode 100644 index 0000000..a9e1bf4 --- /dev/null +++ b/packages/plugin-multiple-editor/src/MultipleFileEditor/img/delete.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/plugin-multiple-editor/src/MultipleFileEditor/img/save.svg b/packages/plugin-multiple-editor/src/MultipleFileEditor/img/save.svg new file mode 100644 index 0000000..2b50cea --- /dev/null +++ b/packages/plugin-multiple-editor/src/MultipleFileEditor/img/save.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/plugin-multiple-editor/src/MultipleFileEditor/index.less b/packages/plugin-multiple-editor/src/MultipleFileEditor/index.less new file mode 100644 index 0000000..f8d16f4 --- /dev/null +++ b/packages/plugin-multiple-editor/src/MultipleFileEditor/index.less @@ -0,0 +1,60 @@ + +@leftWidth: 200px; + +.ilp-multiple-editor { + display: flex; + flex-flow: row nowrap; + height: 100%; + width: 100%; + background-color: #fff; + position: relative; + box-sizing: border-box; + padding-left: 0; + &-fullscreen { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: 2000; + } + &-tree-drag{ + position: absolute; + height: 60%; + cursor: col-resize; + } + &-tree { + height: 100%; + position: absolute; + left: 0; + top: 0; + border-right: 1px solid #efeffe; + } + &-outline { + position: absolute; + width: 100%; + left: 0; + top: 60%; + height: 40%; + border-right: 1px solid #efeffe; + } + &-wrapper { + position: relative; + width: 100%; + height: 100%; + padding-top: 24px; + h3 { + width: 100%; + position: absolute; + top: 0; + left: 0; + right: 0; + margin: 0; + line-height: 24px; + padding-left: 16px; + box-sizing: border-box; + text-align: center; + border-bottom: 1px solid #ccc; + } + } +} \ No newline at end of file diff --git a/packages/plugin-multiple-editor/src/MultipleFileEditor/index.tsx b/packages/plugin-multiple-editor/src/MultipleFileEditor/index.tsx new file mode 100644 index 0000000..f8fc54e --- /dev/null +++ b/packages/plugin-multiple-editor/src/MultipleFileEditor/index.tsx @@ -0,0 +1,5 @@ +// import React, { FC } from 'react'; + +import Editor from './Editor'; + +export default Editor; diff --git a/packages/plugin-multiple-editor/src/MultipleFileEditor/util.tsx b/packages/plugin-multiple-editor/src/MultipleFileEditor/util.tsx new file mode 100644 index 0000000..fe401e0 --- /dev/null +++ b/packages/plugin-multiple-editor/src/MultipleFileEditor/util.tsx @@ -0,0 +1,140 @@ +import { initCode, beautifyJs, compatGetSourceCodeMap } from 'utils'; +import { useEffect, useMemo, useRef } from 'react'; +import { Monaco, ObjectType } from 'types'; +import { FunctionEventParams } from 'types'; +import type { editor } from 'monaco-editor'; + +function compatIndexContent(content: string) { + if (!content.match(/export +default +/)) { + return content.replace( + /class +LowcodeComponent/, + 'export default class LowcodeComponent' + ); + } + return content; +} + +export const getDefaultFileList = ( + rootSchema: any, + useLess?: boolean +): ObjectType => { + const sourceCodeMap = rootSchema?.componentsTree?.[0]?._sourceCodeMap || {}; + const { files } = compatGetSourceCodeMap(sourceCodeMap); // 兼容旧格式 + if (files['index.js']) { + files['index.js'] = compatIndexContent(files['index.js']); + } + const map = { + 'index.js': compatIndexContent( + beautifyJs( + rootSchema?.componentsTree?.[0]?.originCode || + initCode(rootSchema?.componentsTree?.[0]), + {} + ) + ), + [useLess ? 'index.less' : 'index.css']: + rootSchema?.componentsTree?.[0]?.css || '', + ...files, + }; + + return map; +}; + +export function useUnReactiveFn(fn: any, deps: any[]) { + const ref = useRef<{ call: typeof fn }>({ call: () => void 0 }); + useEffect(() => { + ref.current.call = fn; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [...deps]); + + const handler = useMemo( + () => + (...args: any[]) => { + ref.current.call(...args); + }, + [] + ); + + return { handler }; +} + +export function getDefaultFileContent() { + return `export function hello() { + console.log('Hello world!'); +} +`; +} + +export function focusCodeByContent( + editor: editor.IStandaloneCodeEditor, + monaco: Monaco, + content: string +) { + const matchedResult = editor + ?.getModel() + // @ts-ignore + ?.findMatches(content, false, true, false)?.[0]; + if (matchedResult) { + setTimeout(() => { + editor.revealLineInCenter(matchedResult.range.startLineNumber); + editor.setPosition({ + column: matchedResult.range.endColumn, + lineNumber: matchedResult.range.endLineNumber, + }); + editor.focus(); + }, 200); + } +} + +export async function focusByFunctionName( + editor: editor.IStandaloneCodeEditor, + params: FunctionEventParams, + monaco: Monaco +) { + const modelUri = monaco.Uri.parse('index.js'); + const model = monaco.editor.getModel(modelUri); + editor.setModel(model); + const content = `^\\s*(?:async)?\\s*${params.functionName}\\s*\\([\\s\\S]*\\)[\\s\\S]*\\{`; + focusCodeByContent(editor, monaco, content); +} + +export async function addFunction( + monacoEditor: editor.IStandaloneCodeEditor, + params: FunctionEventParams, + monaco: Monaco +) { + if (!monacoEditor || !monaco) { + return; + } + let count = monacoEditor.getModel()?.getLineCount() ?? 0; + // 找到倒数第一个非空行 + while (!monacoEditor.getModel()?.getLineContent(count)) { + count--; + } + + const range = new monaco.Range(count, 1, count, 1); + const functionCode = params.template + ? params.template + : `\n\t${params.functionName}(){\n\t}\n`; + + monacoEditor.executeEdits('log-source', [ + { range, text: functionCode, forceMoveMarkers: true }, + ]); + + // 延迟定位光标到函数名称 + setTimeout(() => { + params.functionName && focusByFunctionName(monacoEditor, params, monaco); + }, 50); +} + +export async function initEditorModel( + fileMap: Record, + monaco: Monaco +) { + const keys = Object.keys(fileMap); + for (const filePath of keys) { + const modelUri = monaco.Uri.parse(filePath); + const language = /\.js$/.test(filePath) ? 'javascript' : 'css'; + monaco.editor.getModel(modelUri) || + monaco.editor.createModel(fileMap[filePath], language, modelUri); + } +} diff --git a/packages/plugin-multiple-editor/src/Service.ts b/packages/plugin-multiple-editor/src/Service.ts new file mode 100644 index 0000000..79dd16c --- /dev/null +++ b/packages/plugin-multiple-editor/src/Service.ts @@ -0,0 +1,89 @@ +import { ReactElement } from 'react'; +import { EditorController, HookHandleFn } from './Controller'; +import { EditorHook } from './EditorHook'; +import type {IPublicApiSkeleton} from '@alilc/lowcode-types'; +import { Monaco } from './types'; + +export enum PluginHooks { + onActive = 'onActive', + onDeActive = 'onDeActive', + onSelectFileChange = 'onSelectFileChange', + onEditorMount = 'onEditorMount', + onMonacoLoaded = 'onMonacoLoaded', +} + +export interface EditorPluginInterface { + apply(service: Service): void; +} + +export interface ServiceInitOptions { + plugins?: EditorPluginInterface[]; +} + +export interface PluginAction { + key: string; + title: string; + icon: ReactElement; + action: () => any; + priority: number; +} + +export class Service extends EditorHook { + // private options: ServiceInitOptions; + public onActive = this.hookFactory(PluginHooks.onActive); + + public onDeActive = this.hookFactory(PluginHooks.onDeActive); + + public onSelectFileChange = this.hookFactory(PluginHooks.onSelectFileChange); + + public onEditorMount = this.hookFactory(PluginHooks.onEditorMount); + + public onMonacoLoaded: HookHandleFn<(monaco: Monaco) => void> = + this.hookFactory(PluginHooks.onMonacoLoaded); + + actionMap: Array; + + constructor(public controller: EditorController, private skeleton: IPublicApiSkeleton) { + super(); + this.actionMap = []; + } + + init(options: ServiceInitOptions) { + const { plugins } = options; + if (plugins) { + for (const plugin of plugins) { + plugin.apply(this); + } + } + this.setupHooks(); + return this; + } + + private setupHooks() { + this.skeleton.onHidePanel((pluginName) => { + if (pluginName === 'codeEditor') { + this.triggerHook(PluginHooks.onDeActive); + } + }); + this.skeleton.onShowPanel((pluginName) => { + if (pluginName === 'codeEditor') { + this.triggerHook(PluginHooks.onActive); + } + }); + } + + public triggerHook(key: PluginHooks, ...args: any[]): void { + super.triggerHook(key, ...args); + } + + public registerAction(action: PluginAction) { + const index = this.actionMap.findIndex((item) => item.key === action.key); + if (index > -1) { + console.error( + `Action ${action.key}, 已被注册，此 Action 将覆盖原 Action` + ); + this.actionMap.splice(index, 1); + } + this.actionMap.push(action); + } +} diff --git a/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/img/delete.png b/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/img/delete.png new file mode 100644 index 0000000..c272d57 Binary files /dev/null and b/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/img/delete.png differ diff --git a/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/img/file-directory.png b/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/img/file-directory.png new file mode 100644 index 0000000..e054630 Binary files /dev/null and b/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/img/file-directory.png differ diff --git a/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/img/file.png b/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/img/file.png new file mode 100644 index 0000000..d0b0638 Binary files /dev/null and b/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/img/file.png differ diff --git a/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/img/menu.png b/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/img/menu.png new file mode 100644 index 0000000..cdb21ac Binary files /dev/null and b/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/img/menu.png differ diff --git a/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/img/rename.png b/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/img/rename.png new file mode 100644 index 0000000..7a82ae2 Binary files /dev/null and b/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/img/rename.png differ diff --git a/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/index.less b/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/index.less new file mode 100644 index 0000000..a93b105 --- /dev/null +++ b/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/index.less @@ -0,0 +1,118 @@ +.ilp-tree-node { + width: 100%; + overflow-y: auto; + overflow-x: hidden; + height: calc(100% - 24px); + line-height: 24px; + font-size: 12px; + color: #333; + &-title { + &-content { + display: flex; + justify-content: flex-start; + align-items: center; + flex: 1; + cursor: pointer; + -webkit-user-select: none; + user-select: none; + } + &-prefix { + margin-right: 4px; + transition: all 0.2s; + &-expand { + transform: rotate(90deg); + } + } + &-modules { + background-color: rgba(221,221,221, 0.5); + color: #999; + } + } + + &-title, + &-file { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + cursor: pointer; + transition: all 0.15s; + position: relative; + &:hover { + background-color: rgba(0, 0, 0, 0.05); + } + img { + width: 14px; + height: 14px; + position: relative; + display: block; + } + span { + margin-left: 4px; + } + &-icon-delete { + margin-right: 2px; + } + } + &-title { + &-dropdown { + background-color: #fff; + line-height: 32px; + box-shadow: 1px 1px 4px 0 #ccc; + &-item { + padding: 0 12px; + transform: all 0.15s; + cursor: pointer; + &:hover { + background-color: rgba(0, 0, 0, 0.15); + } + } + } + } + + &-file { + position: relative; + &-selected { + background-color: rgba(62, 180, 189, 0.15); + } + &-modified:hover:after { + display: none; + } + &-modified:after { + content: ''; + position: absolute; + right: 8px; + top: calc(12px - 3px); + background-color: rgb(182, 182, 107); + width: 6px; + height: 6px; + border-radius: 50%; + } + &-icon-wrap{ + align-items: center; + height: 24px; + padding: 0 8px 0 4px; + background-color: rgba(243, 243, 241); + position: absolute; + right: 0; + transform: all 0.15s; + display: none; + } + &:hover &-icon-wrap { + display: flex; + } + } +} + +.help-tooltips { + padding: 8px; + max-width: 300px; + font-size: 14px; + font-weight: 400; + word-wrap: break-word; + color: #fff; + border-radius: 4px; + border: 1px solid transparent; + background-color: #1f2633; + box-shadow: 0 4px 16px 0 rgb(0 0 0 / 12%); +} diff --git a/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/index.tsx b/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/index.tsx new file mode 100644 index 0000000..8386112 --- /dev/null +++ b/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/index.tsx @@ -0,0 +1,254 @@ +import React, { FC, useMemo, MouseEvent, useState } from 'react'; +import cls from 'classnames'; +import { Dropdown, Icon, Overlay } from '@alifd/next'; +import { Dir, File, getKey, parseKey } from '../../../utils/files'; +import dirIcon from './img/file-directory.png'; +import fileIcon from './img/file.png'; +import menuIcon from './img/menu.png'; +import deleteIcon from './img/delete.png'; +import renameIcon from './img/rename.png'; + +import './index.less'; + +export type HandleAddFn = (type: 'file' | 'dir', path: string[]) => void; + +export type HandleDeleteFn = (path: string[], target: Dir | File) => void; + +export type HandleChangeFn = (value: File, path: string[]) => void; + +export type HandleRenameFn = ( + type: 'file' | 'dir', + path: string[], + target: Dir | File +) => void; + +export interface TreeNodeProps { + disableAction?: boolean; + dir?: Dir; + parentKey?: string; + selectedKey?: string; + modifiedKeys?: string[]; + level?: number; + onChange?: HandleChangeFn; + onAdd?: HandleAddFn; + onDelete?: HandleDeleteFn; + onRename?: HandleRenameFn; + className?: string; +} + +const helpPopupProps = { + animation: { + in: 'zoomIn', + out: 'zoomOut', + }, + triggerType: 'hover', + placementOffset: 4, +}; + +const defaultDir = new Dir('/', [], [], ''); + +const TreeNode: FC = ({ + dir = defaultDir, + className, + selectedKey, + parentKey, + level = 1, + onChange, + onDelete, + onAdd, + onRename, + modifiedKeys, + disableAction, +}) => { + const [expand, setExpand] = useState(dir.name === '/'); // 根目录默认展开 + const levelStyle = useMemo(() => ({ paddingLeft: level * 8 }), [level]); + const dirActions = useMemo(() => { + const key = getKey(parentKey, dir.name); + const path = parseKey(key).path; + const baseActions = [ + { + title: '新建文件夹', + action: () => { + setExpand(true); + onAdd?.('dir', path); + }, + id: 'dir', + }, + { + title: '新建文件', + action: () => { + onAdd?.('file', path); + }, + id: 'file', + }, + ]; + // 根目录不能删除 + if (parentKey) { + baseActions.push( + { + title: '删除目录', + action: () => { + path.pop(); + onDelete?.(path, dir); + }, + id: 'delete', + }, + { + title: '修改目录名', + action: () => { + path.pop(); + onRename?.('dir', path, dir); + }, + id: 'rename', + } + ); + } + return baseActions; + }, [dir, onAdd, onDelete, onRename, parentKey]); + const handleFileClick = (f: File, key: string) => { + onChange?.(f, parseKey(key).path); + }; + const handleRename = ( + e: MouseEvent, + file: File, + key: string + ) => { + e.stopPropagation(); + e.preventDefault(); + onRename?.('file', parseKey(key).path, file); + }; + const handleDelete = ( + e: MouseEvent, + file: File, + key: string + ) => { + e.stopPropagation(); + e.preventDefault(); + onDelete?.(parseKey(key).path, file); + }; + const dropdownOverlay = ( +
+ {dirActions.map(({ title, action, id }) => ( +
+ {title} +
+ ))} +
+ ); + + const actionDisabled = dir.name === 'modules' || disableAction; + return ( +
+
+
setExpand(!expand)} + > + + directory + {dir.name} + {actionDisabled && ( + } + placement="rt" + > + + 内置模块，不可操作文件，内容修改不会影响最终结果 + + + )} +
+ {!actionDisabled && ( + + } + > + {dropdownOverlay} + + )} +
+
+ {expand && ( + <> + {dir.dirs.map((d) => ( + + ))} + {dir.files.map((f) => { + const key = getKey(parentKey, f.name); + return ( +
k === f.fullPath) && + 'ilp-tree-node-file-modified' + )} + onClick={() => handleFileClick(f, key)} + > + file + {f.name} + {!(f.name === 'index.js' && !parentKey) && !actionDisabled && ( +
+ handleDelete(e, f, key)} + /> + handleRename(e, f, key)} + /> +
+ )} +
+ ); + })} + + )} +
+
+ ); +}; + +export default TreeNode; diff --git a/packages/plugin-multiple-editor/src/components/FileTree/img/compile.svg b/packages/plugin-multiple-editor/src/components/FileTree/img/compile.svg new file mode 100644 index 0000000..c40b376 --- /dev/null +++ b/packages/plugin-multiple-editor/src/components/FileTree/img/compile.svg @@ -0,0 +1,7 @@ + + + + + + \ No newline at end of file diff --git a/packages/plugin-multiple-editor/src/components/FileTree/img/fullscreen-exit.svg b/packages/plugin-multiple-editor/src/components/FileTree/img/fullscreen-exit.svg new file mode 100644 index 0000000..f164027 --- /dev/null +++ b/packages/plugin-multiple-editor/src/components/FileTree/img/fullscreen-exit.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/plugin-multiple-editor/src/components/FileTree/img/fullscreen.svg b/packages/plugin-multiple-editor/src/components/FileTree/img/fullscreen.svg new file mode 100644 index 0000000..586e22f --- /dev/null +++ b/packages/plugin-multiple-editor/src/components/FileTree/img/fullscreen.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/plugin-multiple-editor/src/components/FileTree/img/save.svg b/packages/plugin-multiple-editor/src/components/FileTree/img/save.svg new file mode 100644 index 0000000..4c54b90 --- /dev/null +++ b/packages/plugin-multiple-editor/src/components/FileTree/img/save.svg @@ -0,0 +1,9 @@ + + + + + + + + \ No newline at end of file diff --git a/packages/plugin-multiple-editor/src/components/FileTree/index.less b/packages/plugin-multiple-editor/src/components/FileTree/index.less new file mode 100644 index 0000000..e4511a8 --- /dev/null +++ b/packages/plugin-multiple-editor/src/components/FileTree/index.less @@ -0,0 +1,32 @@ +.ilp-file-bar { + width: 100%; + padding: 8px; + &-title { + font-size: 14px; + color: #333; + margin: 0; + height: 24px; + display: flex; + justify-content: space-between; + align-items: center; + .ilp-tree-action-item { + display: inline-block; + margin-left: 8px; + img { + margin-left: 0; + } + } + img { + width: 16px; + height: 16px; + cursor: pointer; + margin-left: 8px; + } + } +} + +.ilp-file-tree-single { + .next-icon-help { + display: none; + } +} \ No newline at end of file diff --git a/packages/plugin-multiple-editor/src/components/FileTree/index.tsx b/packages/plugin-multiple-editor/src/components/FileTree/index.tsx new file mode 100644 index 0000000..979c8e7 --- /dev/null +++ b/packages/plugin-multiple-editor/src/components/FileTree/index.tsx @@ -0,0 +1,226 @@ +import React, { CSSProperties, FC, useCallback, useRef, useState } from 'react'; +import { Form, Input, Dialog, Message } from '@alifd/next'; +import cls from 'classnames'; +import { Dir, File, getFileOrDirTarget } from '../../utils/files'; +import TreeNode, { + HandleAddFn, + HandleChangeFn, + HandleDeleteFn, + HandleRenameFn, +} from './TreeNode'; +import './index.less'; +import { useEditorContext } from '../../Context'; +import fullscreenIcon from './img/fullscreen.svg'; +import fullscreenExitIcon from './img/fullscreen-exit.svg'; +import compileIcon from './img/compile.svg'; +import { PluginAction } from '@/Service'; + +export interface FileTreeProps { + dir?: Dir; + mode?: 'single' | 'multiple'; + onChange?: HandleChangeFn; + className?: string; + onSave?: () => any; + onFullscreen?: (enable: boolean) => void; + fullscreen?: boolean; + actions?: PluginAction[]; +} + +const defaultDir = new Dir('/', [], [], ''); + +function validate( + data: { type: string; path: any }, + name: string, + fileTree: any +) { + const { type, path } = data; + if (/\\|\//.test(name)) { + return '非法命名'; + } + if (name === 'modules') { + return 'modules 为内置关键字，不允许使用'; + } + const finalNode: Dir | undefined = getFileOrDirTarget(fileTree, path); + if (finalNode) { + const targetDir: any[] = + type === 'file' ? finalNode?.files : finalNode.dirs; + if (targetDir.find((t: any) => t.name === name)) { + return '文件或文件夹已存在'; + } + } + if (data.type === 'file' && name.endsWith('.less') && name !== 'index.less') { + return 'less 文件仅支持创建 index.less'; + } + if (data.type === 'file') { + return name && /\.(js|less)$/.test(name) + ? undefined + : '文件名必填且未js后缀'; + } +} + +const newModalStyle: CSSProperties = { + width: 380, +}; + +const FileTree: FC = ({ + dir = defaultDir, + onChange, + className, + onSave, + onFullscreen, + fullscreen, + mode, + actions, +}) => { + const { updateFileTreeByPath, fileTree, modifiedKeys, currentFile } = + useEditorContext(); + const [visible, setVisible] = useState(false); + const [value, setValue] = useState({ name: '' }); + const tmp = useRef<{ + path: string[]; + type: string; + fullPath: string; + operation?: string; + target?: any; + }>({} as any).current; + const handleAdd = useCallback( + (type, path) => { + tmp.operation = 'add'; + tmp.path = path; + tmp.type = type; + setValue({ name: '' }); + setVisible(true); + }, + [tmp] + ); + const handleRename = useCallback( + (type, path, target) => { + tmp.target = target; + tmp.operation = 'rename'; + tmp.path = path; + tmp.type = type; + setValue({ name: '' }); + setVisible(true); + }, + [tmp] + ); + const handleClose = useCallback(() => { + setVisible(false); + }, []); + + const handleChange = useCallback((v: string) => { + setValue({ name: v }); + }, []); + + const handleEditFileToTree = useCallback( + async (e?: React.KeyboardEvent) => { + if (e && !(e.key === 'Enter' || e?.keyCode === 13)) { + return; + } + const { name } = value; + const validMsg = validate(tmp, name, fileTree); + if (!validMsg) { + const fullPath = `${tmp.path}/${name}`; + if (tmp.operation === 'rename') { + updateFileTreeByPath(tmp.path, tmp.target, 'rename', name); + } else { + const target = + tmp.type === 'file' + ? new File(name, '', fullPath) + : new Dir(name, [], [], fullPath); + updateFileTreeByPath(tmp.path, target, 'add'); + } + setVisible(false); + } else { + Message.error(validMsg); + } + }, + [fileTree, tmp, updateFileTreeByPath, value] + ); + + const handleDelete = useCallback( + (path, target) => { + Dialog.confirm({ + title: '确定删除？', + onOk() { + updateFileTreeByPath(path, target, 'delete'); + }, + }); + }, + [updateFileTreeByPath] + ); + let title = tmp.type === 'file' ? '新建文件' : '新建文件夹'; + if (tmp.operation === 'rename') { + title = tmp.type === 'file' ? '重命名文件' : '重命名文件夹'; + } + return ( +
+

+ 文件目录 + + {fullscreen onFullscreen?.(!fullscreen)} + /> + 编译代码 + {actions?.map((item) => ( + + {item.icon} + + ))} + +

+ + + + handleEditFileToTree()} + > +
+ + handleEditFileToTree(e)} + /> + +
+ +
+ ); +}; + +export default FileTree; diff --git a/packages/plugin-multiple-editor/src/components/MonacoEditor/config.ts b/packages/plugin-multiple-editor/src/components/MonacoEditor/config.ts new file mode 100644 index 0000000..dfad2a2 --- /dev/null +++ b/packages/plugin-multiple-editor/src/components/MonacoEditor/config.ts @@ -0,0 +1,9 @@ +import * as monaco from 'monaco-editor'; + +export const defaultOptions: monaco.editor.IStandaloneEditorConstructionOptions = + { + tabSize: 2, + theme: 'vs', + automaticLayout: true, + minimap: { enabled: false, showSlider: 'mouseover' }, + }; diff --git a/packages/plugin-multiple-editor/src/components/MonacoEditor/index.css b/packages/plugin-multiple-editor/src/components/MonacoEditor/index.css new file mode 100644 index 0000000..91a3f0f --- /dev/null +++ b/packages/plugin-multiple-editor/src/components/MonacoEditor/index.css @@ -0,0 +1,5 @@ +.i-monaco-editor-container, +.i-monaco-editor { + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/packages/plugin-multiple-editor/src/components/MonacoEditor/index.tsx b/packages/plugin-multiple-editor/src/components/MonacoEditor/index.tsx new file mode 100644 index 0000000..285079e --- /dev/null +++ b/packages/plugin-multiple-editor/src/components/MonacoEditor/index.tsx @@ -0,0 +1,146 @@ +import React, { PureComponent } from 'react'; +import BaseMonacoEditor from '@alilc/lowcode-plugin-base-monaco-editor'; +import type { editor } from 'monaco-editor'; +import './index.css'; +import { Monaco } from '../../types'; +import { editorController } from '@/Controller'; + +export interface MonacoEditorProps { + theme?: string; + isFullscreen?: boolean; + value?: string; + language?: 'javascript' | 'css' | 'json'; + onChange?: (value: string) => void; + filePath?: string; + onGotoFile?: (filename: string) => void; + onEditorMount?: ( + editor: editor.IStandaloneCodeEditor, + monaco: Monaco + ) => void; +} + +class MonacoEditor extends PureComponent { + ref: HTMLDivElement | null = null; + + editor?: editor.IStandaloneCodeEditor; + + monaco?: Monaco; + + viewStatusMap: Record = {}; + + private handleResize = () => { + this.editor?.layout(); + }; + + componentWillUnmount() { + window.removeEventListener('resize', this.handleResize); + editorController.onImportSchema(() => { + setTimeout(() => { + this.editor?.getModel()?.setValue(this.props.value || ''); + }, 500); + }); + } + + componentDidUpdate(prevProps: MonacoEditorProps) { + if (prevProps.theme !== this.props.theme) { + this.editor?.updateOptions({ theme: this.props.theme }); + } + // 恢复上个文件的编辑状态（鼠标位置、选择等） + if (prevProps.filePath !== this.props.filePath) { + this.editor?.focus(); + requestAnimationFrame(() => { + this.editor?.restoreViewState( + this.viewStatusMap[this.props.filePath || ''] + ); + }); + } + if (prevProps.isFullscreen !== this.props.isFullscreen) { + this.editor?.updateOptions({ + minimap: { enabled: this.props.isFullscreen }, + }); + } + } + + initMonaco = () => { + const { monaco, editor: editorInstance } = this; + if (!monaco || !editorInstance) { + return; + } + monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({ + noSemanticValidation: false, + noSyntaxValidation: false, + noSuggestionDiagnostics: false, + }); + + // compiler options + monaco.languages.typescript.javascriptDefaults.setCompilerOptions({ + target: monaco.languages.typescript.ScriptTarget.ES2020, + module: monaco.languages.typescript.ModuleKind.CommonJS, + allowJs: true, + allowNonTsExtensions: true, + moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs, + noEmit: true, + esModuleInterop: true, + jsx: monaco.languages.typescript.JsxEmit.React, + reactNamespace: 'React', + typeRoots: ['node_modules/@types'], + }); + + monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true); + const editorService = (editorInstance as any)._codeEditorService; + const openEditorBase = editorService.openCodeEditor.bind(editorService); + editorService.openCodeEditor = async (input: any, source: any) => { + const result = await openEditorBase(input, source); + const { selection } = input.options; + if (result === null) { + this.props.onGotoFile?.(input.resource?.path); + // 定位到对应文件位置 + setTimeout(() => { + const position = { + lineNumber: selection.startLineNumber, + column: selection.startColumn, + }; + this.editor?.revealLineInCenter(position.lineNumber); + this.editor?.setPosition(position); + this.editor?.focus(); + }, 50); + } + return result; + }; + window.addEventListener('resize', this.handleResize); + }; + + handleEditorMount = ( + monaco: Monaco, + editorInstance: editor.IStandaloneCodeEditor + ) => { + this.monaco = monaco; + this.editor = editorInstance; + this.initMonaco(); + this.props.onEditorMount?.(editorInstance, monaco); + // blur 时记录下当前的编辑状态 + editorInstance.onDidBlurEditorWidget(() => { + this.viewStatusMap[this.props.filePath || ''] = + editorInstance.saveViewState(); + }); + }; + + render() { + const { onChange, filePath, language, value } = this.props; + return ( +
+ +
+ ); + } +} + +export default MonacoEditor; diff --git a/packages/plugin-multiple-editor/src/components/Outline/img/class.png b/packages/plugin-multiple-editor/src/components/Outline/img/class.png new file mode 100644 index 0000000..a61249b Binary files /dev/null and b/packages/plugin-multiple-editor/src/components/Outline/img/class.png differ diff --git a/packages/plugin-multiple-editor/src/components/Outline/img/function.png b/packages/plugin-multiple-editor/src/components/Outline/img/function.png new file mode 100644 index 0000000..a898126 Binary files /dev/null and b/packages/plugin-multiple-editor/src/components/Outline/img/function.png differ diff --git a/packages/plugin-multiple-editor/src/components/Outline/img/props.png b/packages/plugin-multiple-editor/src/components/Outline/img/props.png new file mode 100644 index 0000000..97309a4 Binary files /dev/null and b/packages/plugin-multiple-editor/src/components/Outline/img/props.png differ diff --git a/packages/plugin-multiple-editor/src/components/Outline/index.less b/packages/plugin-multiple-editor/src/components/Outline/index.less new file mode 100644 index 0000000..e9cc659 --- /dev/null +++ b/packages/plugin-multiple-editor/src/components/Outline/index.less @@ -0,0 +1,93 @@ + +@leftWidth: 200px; + +.ilp-multiple-editor { + display: flex; + flex-flow: row nowrap; + height: 100%; + width: 100%; + background-color: #fff; + position: relative; + box-sizing: border-box; + padding-left: @leftWidth; + &-outline { + position: absolute; + left: 0; + bottom: 0; + border-right: 1px solid #efeffe; + } +} + +.ilp-outline-node { + width: 100%; + overflow-y: auto; + line-height: 24px; + font-size: 12px; + color: #333; + &-title { + &-content { + display: flex; + justify-content: flex-start; + align-items: center; + flex: 1; + cursor: pointer; + -webkit-user-select: none; + user-select: none; + } + &-prefix { + margin-right: 4px; + transition: all 0.2s; + &-expand { + transform: rotate(90deg); + } + } + } + &-title, + &-file { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + cursor: pointer; + transition: all 0.15s; + position: relative; + &:hover { + background-color: rgba(0, 0, 0, 0.05); + } + img { + width: 14px; + height: 14px; + } + span { + margin-left: 4px; + } + } + &-file { + position: relative; + &-selected { + background-color: rgba(62, 180, 189, 0.15); + } + } + } + .ilp-outline-bar { + width: 200px; + padding: 8px; + height: 100%; + &-title { + font-size: 14px; + height: 24px; + color: #333; + margin: 0; + display: flex; + justify-content: space-between; + align-items: center; + } + } + .ilp-outline-nodeList{ + width: 100%; + overflow-y: auto; + height: calc(100% - 24px); + line-height: 24px; + font-size: 12px; + color: #333; + } \ No newline at end of file diff --git a/packages/plugin-multiple-editor/src/components/Outline/index.tsx b/packages/plugin-multiple-editor/src/components/Outline/index.tsx new file mode 100644 index 0000000..6cdcd37 --- /dev/null +++ b/packages/plugin-multiple-editor/src/components/Outline/index.tsx @@ -0,0 +1,145 @@ +import { parse, generateOutline } from '../../utils/ghostBabel'; +import './index.less'; +import cls from 'classnames'; +import React, { FC, useEffect, useMemo, useState } from 'react'; +import { Icon } from '@alifd/next'; +import classIcon from './img/class.png'; +import functionIcon from './img/function.png'; +import propsIcon from './img/props.png'; +import { focusByContent } from './utils'; +import { editorController } from '../../Controller'; +export interface OutlineProps { + content?: string; + className?: string; + filePath?: string; + ilpOutLineStyle?: any; +} +export interface DirProps { + children?: DirProps[]; + name: string; + type: string; +} +export interface OutlineNodeProps { + disableAction?: boolean; + node: DirProps; + selectedKey?: string; + level?: number; + className?: string; +} +const Outline: FC = ({ + content = '', + className, + filePath, + ilpOutLineStyle, +}) => { + const iconMap: Record = { + FunctionDeclaration: functionIcon, + ClassMethod: functionIcon, + ObjectMethod: functionIcon, + ClassProperty: propsIcon, + VariableDeclarator: propsIcon, + ObjectProperty: propsIcon, + ClassDeclaration: classIcon, + }; + const [dir, setDir] = useState([]); + const [path, setPath] = useState(filePath); + useEffect(() => { + try { + const ast = parse(content); + if (ast && generateOutline(ast)) { + setDir(generateOutline(ast)); + } + } catch (e) { + if (path !== filePath) { + setPath(filePath); + setDir([]); + } + } + if (path !== filePath) { + setPath(filePath); + } + }, [content, filePath, path]); + const OutlineNode: FC = ({ + node, + className, + level = 1, + }) => { + const [selectedKey, setSelectedKey] = useState(); + const [expand, setExpand] = useState(true); // 根目录默认展开 + const levelStyle = useMemo(() => ({ paddingLeft: level * 8 }), [level]); + const onRelatedEventClick = (event: any) => { + setSelectedKey(event); + focusByContent( + editorController.codeEditor!, + event, + editorController.monaco!, + filePath! + ); + }; + return ( +
+
+
{ + onRelatedEventClick(node); + }} + > + {!!node?.children?.length && ( + setExpand(!expand)} + /> + )} + + {node.name} +
+
+
+ {expand && ( + <> + {node?.children?.map((f) => { + return ( +
{ + onRelatedEventClick(f); + }} + className={cls( + 'ilp-outline-node-file', + selectedKey === f.name && 'ilp-outline-node-file-selected' + )} + > + + {f.name} +
+ ); + })} + + )} +
+
+ ); + }; + return dir?.length ? ( +
+
+

+ 大纲树 +

+
+ {dir?.map((item) => { + return ; + })} +
+
+
+ ) : null; +}; +export default Outline; diff --git a/packages/plugin-multiple-editor/src/components/Outline/utils.ts b/packages/plugin-multiple-editor/src/components/Outline/utils.ts new file mode 100644 index 0000000..4f5a460 --- /dev/null +++ b/packages/plugin-multiple-editor/src/components/Outline/utils.ts @@ -0,0 +1,59 @@ +import { Monaco } from '@/types'; +import type { editor } from 'monaco-editor'; +export function focusCodeByContent( + editor: editor.IStandaloneCodeEditor, + content: string +) { + const matchedResult = editor + ?.getModel() + // @ts-ignore + ?.findMatches(content, false, true, false)?.[0]; + if (matchedResult) { + setTimeout(() => { + editor.revealLineInCenter(matchedResult.range.startLineNumber); + editor.setPosition({ + column: matchedResult.range.endColumn, + lineNumber: matchedResult.range.endLineNumber, + }); + editor.focus(); + }, 200); + } +} +export async function focusByContent( + editor: editor.IStandaloneCodeEditor, + params: { + name: string; + type: string; + }, + monaco: Monaco, + path: string +) { + const regMap: Record = { + FunctionDeclaration: 'function', + ClassMethod: 'function', + ObjectMethod: 'function', + ClassProperty: 'declarator', + VariableDeclarator: 'declarator', + ObjectProperty: 'ObjectProperty', + ClassDeclaration: 'ClassDeclaration', + }; + const modelUri = monaco.Uri.parse(path); + const model = monaco.editor.getModel(modelUri); + editor.setModel(model); + let content = ''; + switch (regMap[params.type]) { + case 'function': + content = `\\s*(?:async)?\\s*${params.name}\\s*\\([\\s\\S]*\\)[\\s\\S]*\\{`; + break; + case 'declarator': + content = `\\s*${params.name}\\s*=\\s*`; + break; + case 'ObjectProperty': + content = `\\s*${params.name}:\\s*`; + break; + case 'ClassDeclaration': + content = `${params.name} extends`; + break; + } + focusCodeByContent(editor, content); +} diff --git a/packages/plugin-multiple-editor/src/dev-config/sample-plugins/delete-hidden-transducer/index.ts b/packages/plugin-multiple-editor/src/dev-config/sample-plugins/delete-hidden-transducer/index.ts new file mode 100644 index 0000000..faa1714 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/sample-plugins/delete-hidden-transducer/index.ts @@ -0,0 +1,16 @@ +import { project } from '@alilc/lowcode-engine'; +import { IPublicEnumTransformStage } from '@alilc/lowcode-types'; + +export const deleteHiddenTransducer = (ctx: any) => { + return { + name: 'deleteHiddenTransducer', + async init() { + project.addPropsTransducer((props: any): any => { + delete props.hidden; + return props; + }, IPublicEnumTransformStage.Save); + }, + }; +}; + +deleteHiddenTransducer.pluginName = 'deleteHiddenTransducer'; diff --git a/packages/plugin-multiple-editor/src/dev-config/sample-plugins/logo/index.scss b/packages/plugin-multiple-editor/src/dev-config/sample-plugins/logo/index.scss new file mode 100644 index 0000000..3140ac3 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/sample-plugins/logo/index.scss @@ -0,0 +1,11 @@ +.lowcode-plugin-logo { + .logo { + display: block; + width: 139px; + height: 26px; + cursor: pointer; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + } +} diff --git a/packages/plugin-multiple-editor/src/dev-config/sample-plugins/logo/index.tsx b/packages/plugin-multiple-editor/src/dev-config/sample-plugins/logo/index.tsx new file mode 100644 index 0000000..2771e7c --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/sample-plugins/logo/index.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import './index.scss'; +import { PluginProps } from '@alilc/lowcode-types'; + +export interface IProps { + logo?: string; + href?: string; +} + +const Logo: React.FC = (props): React.ReactElement => { + return ( +
+ +
+ ); +}; + +export default Logo; diff --git a/packages/plugin-multiple-editor/src/dev-config/sample-plugins/scenario-switcher/index.tsx b/packages/plugin-multiple-editor/src/dev-config/sample-plugins/scenario-switcher/index.tsx new file mode 100644 index 0000000..7999e65 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/sample-plugins/scenario-switcher/index.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { Select } from '@alifd/next'; +import scenarios from '../../universal/scenarios.json'; +const { Option } = Select; + +const getCurrentScenarioName = () => { + // return 'index' + const list = window.location.href.split('/'); + return list[list.length - 1].replace('.html', ''); +}; + +function Switcher(props: any) { + return (); +} + +export const scenarioSwitcher = (ctx: any) => { + return { + name: 'scenarioSwitcher', + async init() { + const { skeleton } = ctx; + + skeleton.add({ + name: 'scenarioSwitcher', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + width: 80, + }, + content: Switcher, + }); + }, + }; +}; +scenarioSwitcher.pluginName = 'scenarioSwitcher'; \ No newline at end of file diff --git a/packages/plugin-multiple-editor/src/dev-config/sample-plugins/set-ref-prop/index.tsx b/packages/plugin-multiple-editor/src/dev-config/sample-plugins/set-ref-prop/index.tsx new file mode 100644 index 0000000..b85e750 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/sample-plugins/set-ref-prop/index.tsx @@ -0,0 +1,84 @@ +import { v4 as uuidv4 } from 'uuid'; +import { material } from '@alilc/lowcode-engine'; + +function addonCombine(metadata: any) { + const { componentName, configure = {} } = metadata; + + const isRoot: boolean = + componentName === 'Page' || componentName === 'Component'; + + if (isRoot) { + return metadata; + } + + let advancedGroup: any | undefined; + + const refItem: any = { + title: { + label: 'refId', + tip: '用于获取组件实例，调用物料内部方法', + icon: '', + }, + name: 'ref', + setter: { + componentName: 'StringSetter', + }, + defaultValue: () => { + const uuid = uuidv4().replace('-', '').substring(0, 8); + return `${componentName.toLowerCase()}-${uuid}`; + }, + extraProps: { + display: 'block', + supportVariable: false, + }, + }; + + if (!configure.combined) { + configure.combined = []; + } + + advancedGroup = configure.combined?.filter((d) => d.name === '#advanced')[0]; + + if (!advancedGroup) { + advancedGroup = { + name: '#advanced', + title: { type: 'i18n', 'zh-CN': '高级', 'en-US': 'Advanced' }, + items: [refItem], + }; + + configure.combined.push(advancedGroup); + } + + if (!advancedGroup.items) { + advancedGroup.items = [refItem]; + } + + const advanceItems: any[] = advancedGroup.items || []; + + if ( + !advanceItems || + !advanceItems.length || + !advanceItems?.filter((d) => d.name === 'ref').length + ) { + advanceItems.push(refItem); + } + + return { + ...metadata, + configure, + }; +} + +export const registerRefProp = () => { + return { + init() { + material.registerMetadataTransducer( + addonCombine, + 110, + 'register-ref-prop' + ); + }, + }; +}; + +registerRefProp.pluginName = 'register-ref-prop'; diff --git a/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-antd/assets.json b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-antd/assets.json new file mode 100644 index 0000000..a2ba9be --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-antd/assets.json @@ -0,0 +1,94 @@ +{ + "packages": [ + { + "package": "moment", + "version": "2.24.0", + "urls": [ + "https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js" + ], + "library": "moment" + }, + { + "package": "lodash", + "library": "_", + "urls": [ + "https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js" + ] + }, + { + "package": "iconfont-icons", + "urls": "//at.alicdn.com/t/font_2369445_ukrtsovd92r.js" + }, + { + "package": "@ant-design/icons", + "version": "4.7.0", + "urls": [ + "//g.alicdn.com/code/npm/@ali/ant-design-icons-cdn/4.5.0/index.umd.min.js" + ], + "library": "icons" + }, + { + "package": "antd", + "version": "4.19.5", + "urls": [ + "//g.alicdn.com/code/lib/antd/4.19.4/antd.min.js", + "//g.alicdn.com/code/lib/antd/4.19.4/antd.min.css" + ], + "library": "antd" + }, + { + "title": "fusion组件库", + "package": "@alifd/next", + "version": "1.23.0", + "urls": [ + "https://g.alicdn.com/code/lib/alifd__next/1.23.18/next.min.css", + "https://g.alicdn.com/code/lib/alifd__next/1.23.18/next-with-locales.min.js" + ], + "library": "Next" + }, + { + "package": "@alilc/antd-lowcode-materials", + "version": "1.0.6", + "library": "AntdLowcode", + "urls": [ + "https://alifd.alicdn.com/npm/@alilc/antd-lowcode-materials@1.0.6/build/lowcode/view.js", + "https://alifd.alicdn.com/npm/@alilc/antd-lowcode-materials@1.0.6/build/lowcode/view.css" + ], + "editUrls": [ + "https://alifd.alicdn.com/npm/@alilc/antd-lowcode-materials@1.0.6/build/lowcode/view.js", + "https://alifd.alicdn.com/npm/@alilc/antd-lowcode-materials@1.0.6/build/lowcode/view.css" + ] + } + ], + "components": [ + { + "exportName": "AlilcAntdLowcodeMaterialsMeta", + "npm": { + "package": "@alilc/antd-lowcode-materials", + "version": "1.0.6" + }, + "url": "https://alifd.alicdn.com/npm/@alilc/antd-lowcode-materials@1.0.6/build/lowcode/meta.js", + "urls": { + "default": "https://alifd.alicdn.com/npm/@alilc/antd-lowcode-materials@1.0.6/build/lowcode/meta.js" + } + } + ], + "sort": { + "groupList": [ + "精选组件", + "原子组件" + ], + "categoryList": [ + "通用", + "导航", + "信息输入", + "信息展示", + "信息反馈" + ] + }, + "groupList": [ + "精选组件", + "原子组件" + ], + "ignoreComponents": {} +} \ No newline at end of file diff --git a/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-antd/index.ts b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-antd/index.ts new file mode 100644 index 0000000..798cbee --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-antd/index.ts @@ -0,0 +1,45 @@ +import { init, plugins } from '@alilc/lowcode-engine'; +import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler'; +import registerPlugins from './plugin'; +import { scenarioSwitcher } from '../../sample-plugins/scenario-switcher'; +import '../../universal/global.scss'; + +const preference = new Map(); +preference.set('DataSourcePane', { + importPlugins: [], + dataSourceTypes: [ + { + type: 'fetch', + }, + { + type: 'jsonp', + }, + ], +}); + +(async function main() { + await plugins.register(scenarioSwitcher); + await registerPlugins(); + + init( + document.getElementById('lce-container')!, + { + // designMode: 'live', + // locale: 'zh-CN', + enableCondition: true, + enableCanvasLock: true, + // 默认绑定变量 + supportVariableGlobally: true, + // simulatorUrl 在当 engine-core.js 同一个父路径下时是不需要配置的！！！ + // 这里因为用的是 alifd cdn，在不同 npm 包，engine-core.js 和 react-simulator-renderer.js 是不同路径 + simulatorUrl: [ + 'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/css/react-simulator-renderer.css', + 'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/js/react-simulator-renderer.js', + ], + requestHandlersMap: { + fetch: createFetchHandler(), + }, + } as any, + preference + ); +})(); diff --git a/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-antd/plugin.tsx b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-antd/plugin.tsx new file mode 100644 index 0000000..1abe147 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-antd/plugin.tsx @@ -0,0 +1,268 @@ +import React from 'react'; +import { + plugins, + skeleton, + project, + setters, +} from '@alilc/lowcode-engine'; +import AliLowCodeEngineExt from '@alilc/lowcode-engine-ext'; +import { Button } from '@alifd/next'; +// import UndoRedoPlugin from '@alilc/lowcode-plugin-undo-redo'; +import ComponentsPane from '@alilc/lowcode-plugin-components-pane'; +import ZhEnPlugin from '@alilc/lowcode-plugin-zh-en'; +// import DataSourcePanePlugin from '@alilc/lowcode-plugin-datasource-pane'; +import SchemaPlugin from '@alilc/lowcode-plugin-schema'; +// import CodeEditor from "@alilc/lowcode-plugin-code-editor"; +// import ManualPlugin from "@alilc/lowcode-plugin-manual"; +import Inject, { injectAssets } from '@alilc/lowcode-plugin-inject'; +import SimulatorResizer from '@alilc/lowcode-plugin-simulator-select'; + +// 注册到引擎 +import TitleSetter from '@alilc/lowcode-setter-title'; +import BehaviorSetter from '../../setters/behavior-setter'; +import CustomSetter from '../../setters/custom-setter'; +import Logo from '../../sample-plugins/logo'; + +import { + loadIncrementalAssets, + getPageSchema, + saveSchema, + resetSchema, + preview, + getProjectSchemaFromLocalStorage, +} from '../../universal/utils'; +import assets from './assets.json'; +import schema from './schema.json'; + +export default async function registerPlugins() { + // await plugins.register(ManualPlugin); + + await plugins.register(Inject); + + // plugin API 见 https://yuque.antfin.com/ali-lowcode/docs/cdukce + SchemaPlugin.pluginName = 'SchemaPlugin'; + await plugins.register(SchemaPlugin); + + (SimulatorResizer as any).pluginName = 'SimulatorResizer'; + plugins.register(SimulatorResizer); + + const editorInit = (ctx: any) => { + return { + name: 'editor-init', + async init() { + // 修改面包屑组件的分隔符属性setter + // const assets = await ( + // await fetch( + // `https://alifd.alicdn.com/npm/@alilc/lowcode-materials/build/lowcode/assets-prod.json` + // ) + // ).json(); + // 设置物料描述 + const { material, project } = ctx; + + material.setAssets(await injectAssets(assets)); + + // 加载 schema + project.openDocument( + getProjectSchemaFromLocalStorage('basic-antd').componentsTree?.[0] || + schema + ); + }, + }; + }; + editorInit.pluginName = 'editorInit'; + await plugins.register(editorInit); + + const builtinPluginRegistry = (ctx: any) => { + return { + name: 'builtin-plugin-registry', + async init() { + const { skeleton } = ctx; + // 注册 logo 面板 + skeleton.add({ + area: 'topArea', + type: 'Widget', + name: 'logo', + content: Logo, + contentProps: { + logo: 'https://img.alicdn.com/imgextra/i4/O1CN013w2bmQ25WAIha4Hx9_!!6000000007533-55-tps-137-26.svg', + href: 'https://lowcode-engine.cn', + }, + props: { + align: 'left', + }, + }); + + // 注册组件面板 + const componentsPane = skeleton.add({ + area: 'leftArea', + type: 'PanelDock', + name: 'componentsPane', + content: ComponentsPane, + contentProps: {}, + props: { + align: 'top', + icon: 'zujianku', + description: '组件库', + }, + }); + componentsPane?.disable?.(); + project.onSimulatorRendererReady(() => { + componentsPane?.enable?.(); + }); + }, + }; + }; + builtinPluginRegistry.pluginName = 'builtinPluginRegistry'; + await plugins.register(builtinPluginRegistry); + + // 设置内置 setter 和事件绑定、插件绑定面板 + const setterRegistry = (ctx: any) => { + const { setterMap, pluginMap } = AliLowCodeEngineExt; + return { + name: 'ext-setters-registry', + async init() { + const { setters, skeleton } = ctx; + // 注册setterMap + setters.registerSetter(setterMap as any); + // 注册插件 + // 注册事件绑定面板 + skeleton.add({ + area: 'centerArea', + type: 'Widget', + content: pluginMap.EventBindDialog, + name: 'eventBindDialog', + props: {}, + }); + + // 注册变量绑定面板 + skeleton.add({ + area: 'centerArea', + type: 'Widget', + content: pluginMap.VariableBindDialog, + name: 'variableBindDialog', + props: {}, + }); + }, + }; + }; + setterRegistry.pluginName = 'setterRegistry'; + await plugins.register(setterRegistry); + + // 注册回退/前进 + // await plugins.register(UndoRedoPlugin); + + // 注册中英文切换 + await plugins.register(ZhEnPlugin); + + const loadAssetsSample = (ctx: any) => { + return { + name: 'loadAssetsSample', + async init() { + const { skeleton } = ctx; + + skeleton.add({ + name: 'loadAssetsSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + width: 80, + }, + content: ( + + ), + }); + }, + }; + }; + loadAssetsSample.pluginName = 'loadAssetsSample'; + await plugins.register(loadAssetsSample); + + // 注册保存面板 + const saveSample = (ctx: any) => { + return { + name: 'saveSample', + async init() { + const { skeleton, hotkey } = ctx; + + skeleton.add({ + name: 'saveSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + skeleton.add({ + name: 'resetSchema', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + hotkey.bind('command+s', (e: any) => { + e.preventDefault(); + saveSchema('basic-antd'); + }); + }, + }; + }; + saveSample.pluginName = 'saveSample'; + await plugins.register(saveSample); + + // DataSourcePanePlugin.pluginName = 'DataSourcePane'; + // await plugins.register(DataSourcePanePlugin); + + // CodeEditor.pluginName = 'CodeEditor'; + // await plugins.register(CodeEditor); + + // 注册出码插件 + // CodeGenPlugin.pluginName = 'CodeGenPlugin'; + // await plugins.register(CodeGenPlugin); + + const previewSample = (ctx: any) => { + return { + name: 'previewSample', + async init() { + const { skeleton } = ctx; + skeleton.add({ + name: 'previewSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + }, + }; + }; + previewSample.pluginName = 'previewSample'; + await plugins.register(previewSample); + + const customSetter = (ctx: any) => { + return { + name: '___registerCustomSetter___', + async init() { + const { setters } = ctx; + + setters.registerSetter('TitleSetter', TitleSetter); + setters.registerSetter('BehaviorSetter', BehaviorSetter); + setters.registerSetter('CustomSetter', CustomSetter); + }, + }; + }; + customSetter.pluginName = 'customSetter'; + await plugins.register(customSetter); +} diff --git a/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-antd/schema.json b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-antd/schema.json new file mode 100644 index 0000000..96d6820 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-antd/schema.json @@ -0,0 +1,73 @@ +{ + "componentName": "Page", + "id": "node_dockcviv8fo1", + "props": { + "ref": "outerView", + "style": { + "height": "100%" + } + }, + "fileName": "/", + "dataSource": { + "list": [ + { + "type": "fetch", + "isInit": true, + "options": { + "params": {}, + "method": "GET", + "isCors": true, + "timeout": 5000, + "headers": {}, + "uri": "mock/info.json" + }, + "id": "info", + "shouldFetch": { + "type": "JSFunction", + "value": "function() { \n console.log('should fetch.....');\n return true; \n}" + } + } + ] + }, + "state": { + "text": { + "type": "JSExpression", + "value": "\"outer\"" + }, + "isShowDialog": { + "type": "JSExpression", + "value": "false" + } + }, + "css": "body {\n font-size: 12px;\n}\n\n.button {\n width: 100px;\n color: #ff00ff\n}", + "lifeCycles": { + "componentDidMount": { + "type": "JSFunction", + "value": "function componentDidMount() {\n console.log('did mount');\n}" + }, + "componentWillUnmount": { + "type": "JSFunction", + "value": "function componentWillUnmount() {\n console.log('will unmount');\n}" + } + }, + "methods": { + "testFunc": { + "type": "JSFunction", + "value": "function testFunc() {\n console.log('test func');\n}" + }, + "onClick": { + "type": "JSFunction", + "value": "function onClick() {\n this.setState({\n isShowDialog: true\n });\n}" + }, + "closeDialog": { + "type": "JSFunction", + "value": "function closeDialog() {\n this.setState({\n isShowDialog: false\n });\n}" + } + }, + "originCode": "class LowcodeComponent extends Component {\n state = {\n \"text\": \"outer\",\n \"isShowDialog\": false\n }\n componentDidMount() {\n console.log('did mount');\n }\n componentWillUnmount() {\n console.log('will unmount');\n }\n testFunc() {\n console.log('test func');\n }\n onClick() {\n this.setState({\n isShowDialog: true\n })\n }\n closeDialog() {\n this.setState({\n isShowDialog: false\n })\n }\n}", + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "" +} \ No newline at end of file diff --git a/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion-with-single-component/README.md b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion-with-single-component/README.md new file mode 100644 index 0000000..4b83a0b --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion-with-single-component/README.md @@ -0,0 +1,3 @@ +此场景展示的使用将通过 [低代码工具链](https://www.yuque.com/lce/doc/funcv8) 研发的单包组件，集成到已有的 fusion 基础组件中~ + +> 注：assets.json 中使用的 view.js / view.css / meta.js 均通过物料单包中 `npm run lowcode:build` 产生~ \ No newline at end of file diff --git a/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion-with-single-component/assets.json b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion-with-single-component/assets.json new file mode 100644 index 0000000..002be98 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion-with-single-component/assets.json @@ -0,0 +1,23622 @@ +{ + "version": "1.1.13", + "packages": [ + { + "package": "moment", + "version": "2.24.0", + "urls": ["https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"], + "library": "moment" + }, + { + "package": "lodash", + "urls": ["https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js"], + "library": "lodash" + }, + { + "title": "fusion组件库", + "package": "@alifd/next", + "version": "1.23.0", + "urls": [ + "https://g.alicdn.com/code/lib/alifd__next/1.23.18/next.min.css", + "https://g.alicdn.com/code/lib/alifd__next/1.23.18/next-with-locales.min.js" + ], + "library": "Next" + }, + { + "title": "自定义单个组件", + "package": "m-220318", + "version": "1.23.0", + "urls": [ + "./fixtures/basic-fusion-with-single-component/view.css", + "./fixtures/basic-fusion-with-single-component/view.js" + ], + "library": "M220318" + }, + { + "title": "NextTable", + "package": "NextTable", + "version": "1.0.1", + "urls": [ + "https://g.alicdn.com/fusion-platform/pro-table/1.0.1/next-table.js", + "https://g.alicdn.com/fusion-platform/pro-table/1.0.1/next-table.css" + ], + "library": "NextTable" + }, + { + "title": "AliLowCodeComponents", + "package": "@alifd/ali-lowcode-components", + "version": "latest", + "urls": [ + "https://gw.alipayobjects.com/os/lib/alifd/ali-lowcode-components/0.1.4/dist/ali-lowcode-components.js", + "https://gw.alipayobjects.com/os/lib/alifd/ali-lowcode-components/0.1.4/dist/ali-lowcode-components.css" + ], + "library": "AliLowCodeComponents" + }, + { + "title": "BizCharts", + "package": "bizcharts", + "version": "4.1.11", + "urls": ["https://g.alicdn.com/code/lib/bizcharts/4.1.11/BizCharts.min.js"], + "library": "BizCharts" + }, + { + "title": "Container", + "package": "@alife/container", + "version": "0.3.7", + "urls": [ + "https://g.alicdn.com/fusion-design/auto-layout/0.3.7/dist/container.css", + "https://g.alicdn.com/fusion-design/auto-layout/0.3.7/dist/container.js" + ], + "library": "Container" + } + ], + "components": [ + { + "exportName": "M220318Meta", + "npm": { + "package": "m-220318" + }, + "url": "./fixtures/basic-fusion-with-single-component/meta.js" + }, + { + "componentName": "Link", + "title": "链接", + "npm": { + "package": "@alifd/ali-lowcode-components", + "version": "latest", + "exportName": "Link", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "href", + "title": { + "label": { + "type": "i18n", + "zh_CN": "超链接", + "en_US": "Link" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性：href | 说明：超链接地址", + "en_US": "prop: href | description: link address" + } + }, + "propType": "string", + "defaultValue": "https://fusion.design" + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "链接文案", + "en_US": "Text" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性：children | 说明：超链接文案", + "en_US": "prop: children | description: text of the link" + } + }, + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "defaultValue": "这是一个超链接" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "target", + "title": { + "label": { + "type": "i18n", + "zh_CN": "页面目标", + "en_US": "Target" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性：target | 说明：跳转页面目标", + "en_US": "prop: target | description: target of new page" + } + }, + "propType": { + "type": "oneOf", + "value": ["_blank", "_self"] + } + } + ], + "configure": { + "supports": { + "style": true, + "events": ["onClick"] + }, + "component": { + "isContainer": true + }, + "props": [ + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "链接文案", + "en_US": "Text" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性：children | 说明：超链接文案", + "en_US": "prop: children | description: text of the link" + } + }, + "setter": "StringSetter", + "defaultValue": "这是一个超链接" + }, + { + "name": "linkType", + "title": "跳转类型", + "condition": { + "type": "JSFunction", + "value": "condition(target) {\n const _pages_ = target.getProps().getPropValue(\"_pages_\");\n console.log('_pages_: ', _pages_);\n return !!_pages_;\n }" + }, + "defaultValue": "page", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "value": "page", + "title": "内部页面" + }, + { + "value": "link", + "title": "外部链接" + } + ] + } + } + }, + { + "name": "_redirect_url", + "title": "跳转页面", + "extraProps": { + "getValue": { + "type": "JSFunction", + "value": "(target, value) => {\n return target.getProps().getPropValue('href');\n }" + }, + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n return target.getProps().setPropValue('href', value);\n }" + } + }, + "setter": { + "type": "JSFunction", + "value": "(target) => {\n const data = ((target.getProps().getPropValue('_pages_') || {}).content || []).map(item => {\n return {\n title: item.title.zh_CN,\n value: `#/${item.relateUuid}`,\n };\n });\n return {\n componentName: 'SelectSetter',\n props: {\n options: data\n },\n };\n }" + }, + "condition": { + "type": "JSFunction", + "value": "condition(target) {\n return target.getProps().getPropValue(\"linkType\") === 'page';\n }" + } + }, + { + "name": "href", + "title": { + "label": { + "type": "i18n", + "zh_CN": "跳转链接", + "en_US": "Link" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性：href | 说明：超链接地址", + "en_US": "prop: href | description: link address" + } + }, + "setter": "StringSetter", + "condition": { + "type": "JSFunction", + "value": "condition(target) {\n return target.getProps().getPropValue(\"linkType\") === 'link';\n }" + } + }, + { + "name": "target", + "title": { + "label": { + "type": "i18n", + "zh_CN": "页面目标", + "en_US": "Target" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性：target | 说明：跳转页面目标", + "en_US": "prop: target | description: target of new page" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "value": "_self", + "title": "当前页面" + }, + { + "value": "_blank", + "title": "新开页面" + } + ] + } + } + }, + { + "name": "_pages_", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + } + ] + }, + "experimental": { + "initials": [ + { + "name": "linkType", + "initial": { + "type": "JSFunction", + "value": "() => 'link'" + } + }, + { + "name": "_pages_", + "initial": { + "type": "JSFunction", + "value": "(target) => {\n let url = `/uipass/query/formnav/getFormNavigationListByOrder.json${window.location.search}`\n if (['localhost', '127.0.0.1', 'a7343369-3834-4e55-9f69-e071f489f979-3333.cloud-ide-router.alibaba-inc.com'].includes(window.location.hostname)) {\n url = 'mock-pages.json';\n }\n (AliLowCodeEngine || VisualEngine).editor.utils.get(url)\n .then((response) => {\n target.getProps().setPropValue('_pages_', response);\n });\n }" + } + } + ], + "filters": [], + "autoruns": [] + }, + "icon": "", + "category": "常用" + }, + { + "componentName": "Message", + "title": "提示", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Message", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "title", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标题", + "en_US": "Title" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: title | 说明: 标题", + "en_US": "prop: title | description: Title" + } + }, + "propType": "string", + "description": "标题", + "defaultValue": "标题" + }, + { + "name": "type", + "title": { + "label": { + "type": "i18n", + "zh_CN": "类型", + "en_US": "Type" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: type | 说明: 反馈类型", + "en_US": "prop: type | description: message type" + } + }, + "propType": { + "type": "oneOf", + "value": ["success", "warning", "error", "notice", "help", "loading"] + }, + "description": "反馈类型", + "defaultValue": "success" + }, + { + "name": "shape", + "title": { + "label": { + "type": "i18n", + "zh_CN": "形状", + "en_US": "Shape" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: shape | 说明: 外观", + "en_US": "prop: shape | description: message shape" + } + }, + "propType": { + "type": "oneOf", + "value": ["inline", "addon", "toast"] + }, + "description": "外观", + "defaultValue": "inline" + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 尺寸", + "en_US": "prop: size | description: message size" + } + }, + "propType": { + "type": "oneOf", + "value": ["medium", "large"] + }, + "description": "尺寸", + "defaultValue": "medium" + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文本", + "en_US": "Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: children | 说明: 文本内容", + "en_US": "prop: children | description: message content" + } + }, + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "description": "内容" + }, + { + "name": "visible", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否显示", + "en_US": "Visible" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: visible | 说明: 当前是否显示", + "en_US": "prop: visible | description: visible" + } + }, + "propType": "bool", + "description": "当前是否显示" + }, + { + "name": "iconType", + "propType": "string", + "description": "显示的图标类型，会覆盖内部设置的IconType" + }, + { + "name": "closeable", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示 Close", + "en_US": "Show Close" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: closeable | 说明: 显示关闭按钮", + "en_US": "prop: closeable | description: show close button" + } + }, + "propType": "bool", + "description": "显示关闭按钮", + "defaultValue": false + }, + { + "name": "onClose", + "propType": "func", + "description": "关闭按钮的回调" + }, + { + "name": "afterClose", + "propType": "func", + "description": "关闭之后调用的函数" + }, + { + "name": "animation", + "title": { + "label": { + "type": "i18n", + "zh_CN": "开启动效", + "en_US": "Animation" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: animation | 说明: 是否开启动效", + "en_US": "prop: animation | description: enable animation" + } + }, + "propType": "bool", + "description": "收起动画", + "defaultValue": true + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "iconType", + "title": { + "label": { + "type": "i18n", + "zh_CN": "图标", + "en_US": "Icon" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: iconType | 说明: 显示的图标类型", + "en_US": "prop: iconType | description: icon type" + } + }, + "setter": { + "componentName": "IconSetter" + } + } + ] + } + }, + "icon": "", + "category": "反馈" + }, + { + "componentName": "Avatar", + "title": "头像", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Avatar", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文本内容", + "en_US": "Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: children | 说明: 文本内容", + "en_US": "prop: children | description: avatar content" + } + }, + "propType": "string" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "头像尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 头像的大小", + "en_US": "prop: size | description: avatar size" + } + }, + "propType": { + "type": "oneOfType", + "value": [ + { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "number" + ] + }, + "description": "头像的大小", + "defaultValue": "medium" + }, + { + "name": "shape", + "title": { + "label": { + "type": "i18n", + "zh_CN": "头像形状", + "en_US": "Shape" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: shape | 说明: 头像的形状", + "en_US": "prop: shape | description: avatar shape" + } + }, + "propType": { + "type": "oneOf", + "value": ["circle", "square"] + }, + "description": "头像的形状", + "defaultValue": "circle" + }, + { + "name": "icon", + "title": "icon", + "propType": "string", + "description": "icon 类头像的图标类型，可设为 Icon 的 `type` 或 `ReactNode`" + }, + { + "name": "src", + "title": { + "label": { + "type": "i18n", + "zh_CN": "头像地址", + "en_US": "Src" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: src | 说明: 图片类头像的资源地址", + "en_US": "prop: src | description: resource address" + } + }, + "propType": "string", + "description": "图片类头像的资源地址" + }, + { + "name": "onError", + "propType": "func", + "description": "图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "icon", + "title": { + "label": { + "type": "i18n", + "zh_CN": "图标", + "en_US": "Icon" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: icon | 说明: 图标类型", + "en_US": "prop: icon | description: icon type" + } + }, + "setter": { + "componentName": "IconSetter" + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Badge", + "title": "徽标数", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Badge", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "count", + "title": "count", + "propType": "string", + "description": "展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为 0 时默认隐藏", + "defaultValue": 0 + }, + { + "name": "content", + "title": "内容", + "propType": "node", + "description": "自定义节点内容" + }, + { + "name": "overflowCount", + "title": "封顶数字", + "propType": { + "type": "oneOfType", + "value": ["number", "string"] + }, + "description": "展示的封顶的数字", + "defaultValue": 99 + }, + { + "name": "showZero", + "title": { + "label": "展示零", + "tip": "showZero|当count为 0 时，是否显示 count" + }, + "propType": "bool", + "description": "当count为 0 时，是否显示 count", + "defaultValue": true + }, + { + "name": "dot", + "title": { + "label": "红点", + "tip": "dot|不展示数字，只展示一个小红点" + }, + "propType": "bool", + "description": "不展示数字，只展示一个小红点", + "defaultValue": false + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "count", + "title": { + "label": "展示的数字", + "tip": "count|大于 overflowCount 时显示为 ${overflowCount}+，为 0 时默认隐藏", + "docUrl": "https://fusion.alibaba-inc.com/pc/component/basic/badge" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "BalloonInner", + "title": "BalloonInner", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Balloon", + "main": "", + "destructuring": true, + "subName": "Inner" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "closable", + "propType": "bool", + "defaultValue": true + }, + { + "name": "children", + "propType": "any" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "alignEdge", + "propType": "bool", + "defaultValue": false + }, + { + "name": "onClose", + "propType": "func" + }, + { + "name": "style", + "propType": "any" + }, + { + "name": "align", + "propType": "string", + "defaultValue": "b" + }, + { + "name": "type", + "propType": "string", + "defaultValue": "normal" + }, + { + "name": "isTooltip", + "propType": "bool" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "pure", + "propType": "bool", + "defaultValue": false + } + ], + "configure": { + "component": { + "isContainer": true + } + }, + "category": "基础" + }, + { + "componentName": "Balloon.Tooltip", + "title": "文字提示", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Balloon", + "main": "", + "destructuring": true, + "subName": "Tooltip" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "pure", + "propType": "bool", + "defaultValue": false + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "children", + "title": "提示文案", + "propType": "string" + }, + { + "name": "type", + "propType": { + "type": "oneOf", + "value": ["normal", "primary"] + }, + "description": "样式类型", + "defaultValue": "normal" + }, + { + "name": "triggerType", + "title": "触发行为", + "propType": { + "type": "oneOf", + "value": ["hover", "click"] + }, + "description": "触发行为\n鼠标悬浮, 鼠标点击('hover','click')或者它们组成的数组，如 ['hover', 'click'], 强烈不建议使用'focus'，若弹窗内容有复杂交互请使用click", + "defaultValue": "hover" + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层当前显示的状态" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层在显示和隐藏触发的事件\n@param {Boolean} visible 弹层是否隐藏和显示\n@param {String} type 触发弹层显示或隐藏的来源， closeClick 表示由自带的关闭按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "align", + "title": "弹出位置", + "propType": { + "type": "oneOf", + "value": ["t", "r", "b", "l", "tl", "tr", "bl", "br", "lt", "lb", "rt", "rb"] + }, + "description": "弹出层位置\n@enumdesc 上, 右, 下, 左, 上左, 上右, 下左, 下右, 左上, 左下, 右上, 右下 及其 两两组合", + "defaultValue": "b" + }, + { + "name": "offset", + "propType": { + "type": "arrayOf", + "value": "number" + }, + "description": "弹层相对于trigger的定位的微调, 接收数组[hoz, ver], 表示弹层在 left / top 上的增量\ne.g. [100, 100] 表示往右(RTL 模式下是往左) 、下分布偏移100px", + "defaultValue": [0, 0] + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + }, + { + "name": "delay", + "title": "延迟显示", + "propType": "number", + "description": "弹层在触发以后的延时显示, 单位毫秒 ms" + }, + { + "name": "trigger", + "propType": "node", + "description": "触发元素" + }, + { + "name": "onClick", + "propType": "func" + }, + { + "name": "onClose", + "propType": "func", + "description": "任何visible为false时会触发的事件" + }, + { + "name": "onHover", + "propType": "func" + }, + { + "name": "defaultVisible", + "title": "默认显示", + "propType": "bool", + "description": "弹层默认显示的状态", + "defaultValue": false + }, + { + "name": "alignEdge", + "title": "边缘对齐", + "propType": "bool", + "description": "弹出层对齐方式, 是否为边缘对齐", + "defaultValue": false + }, + { + "name": "closable", + "title": "关闭按钮", + "propType": "bool", + "description": "是否显示关闭按钮", + "defaultValue": true + }, + { + "name": "needAdjust", + "title": "自动调整", + "propType": "bool", + "description": "是否进行自动位置调整", + "defaultValue": false + }, + { + "name": "afterClose", + "propType": "func", + "description": "浮层关闭后触发的事件, 如果有动画，则在动画结束后触发" + }, + { + "name": "shouldUpdatePosition", + "propType": "bool", + "description": "强制更新定位信息" + }, + { + "name": "autoFocus", + "title": "自动聚焦", + "propType": "bool", + "description": "弹层出现后是否自动focus到内部第一个元素", + "defaultValue": true + }, + { + "name": "followTrigger", + "title": "跟随滚动", + "propType": "bool", + "description": "是否跟随滚动" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "rtl", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "pure", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "visible", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "offset", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "shouldUpdatePosition", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupContainer", + "title": { + "docUrl": "https://fusion.alibaba-inc.com/pc/component/basic/balloon#demo-api", + "label": "弹层容器", + "tip": "指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数()。" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "FunctionSetter"] + } + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Balloon", + "title": "气泡框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Balloon", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "pure", + "propType": "bool", + "defaultValue": false + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "type", + "propType": { + "type": "oneOf", + "value": ["normal", "primary"] + }, + "description": "样式类型", + "defaultValue": "normal" + }, + { + "name": "triggerType", + "title": "触发行为", + "propType": { + "type": "oneOf", + "value": ["hover", "click"] + }, + "description": "触发行为\n鼠标悬浮, 鼠标点击('hover','click')或者它们组成的数组，如 ['hover', 'click'], 强烈不建议使用'focus'，若弹窗内容有复杂交互请使用click", + "defaultValue": "hover" + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层当前显示的状态" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层在显示和隐藏触发的事件\n@param {Boolean} visible 弹层是否隐藏和显示\n@param {String} type 触发弹层显示或隐藏的来源， closeClick 表示由自带的关闭按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "align", + "title": "弹出位置", + "propType": { + "type": "oneOf", + "value": ["t", "r", "b", "l", "tl", "tr", "bl", "br", "lt", "lb", "rt", "rb"] + }, + "description": "弹出层位置\n@enumdesc 上, 右, 下, 左, 上左, 上右, 下左, 下右, 左上, 左下, 右上, 右下 及其 两两组合", + "defaultValue": "b" + }, + { + "name": "offset", + "propType": { + "type": "arrayOf", + "value": "number" + }, + "description": "弹层相对于trigger的定位的微调, 接收数组[hoz, ver], 表示弹层在 left / top 上的增量\ne.g. [100, 100] 表示往右(RTL 模式下是往左) 、下分布偏移100px", + "defaultValue": [0, 0] + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + }, + { + "name": "delay", + "title": "延迟显示", + "propType": "number", + "description": "弹层在触发以后的延时显示, 单位毫秒 ms" + }, + { + "name": "trigger", + "propType": "node", + "description": "触发元素" + }, + { + "name": "onClick", + "propType": "func" + }, + { + "name": "onClose", + "propType": "func", + "description": "任何visible为false时会触发的事件" + }, + { + "name": "onHover", + "propType": "func" + }, + { + "name": "defaultVisible", + "title": "默认显示", + "propType": "bool", + "description": "弹层默认显示的状态", + "defaultValue": false + }, + { + "name": "alignEdge", + "title": "边缘对齐", + "propType": "bool", + "description": "弹出层对齐方式, 是否为边缘对齐", + "defaultValue": false + }, + { + "name": "closable", + "title": "关闭按钮", + "propType": "bool", + "description": "是否显示关闭按钮", + "defaultValue": true + }, + { + "name": "needAdjust", + "title": "自动调整", + "propType": "bool", + "description": "是否进行自动位置调整", + "defaultValue": false + }, + { + "name": "afterClose", + "propType": "func", + "description": "浮层关闭后触发的事件, 如果有动画，则在动画结束后触发" + }, + { + "name": "shouldUpdatePosition", + "propType": "bool", + "description": "强制更新定位信息" + }, + { + "name": "autoFocus", + "title": "自动聚焦", + "propType": "bool", + "description": "弹层出现后是否自动focus到内部第一个元素", + "defaultValue": true + }, + { + "name": "followTrigger", + "title": "跟随滚动", + "propType": "bool", + "description": "是否跟随滚动" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "rtl", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "pure", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "visible", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "offset", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "shouldUpdatePosition", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupContainer", + "title": { + "docUrl": "https://fusion.alibaba-inc.com/pc/component/basic/balloon#demo-api", + "label": "弹层容器", + "tip": "指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数()。" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "FunctionSetter"] + } + } + } + ] + } + }, + "icon": "", + "category": "容器" + }, + { + "componentName": "Box", + "title": "容器", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Box", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "direction", + "title": { + "label": "布局方向", + "tip": "布局方向，默认为 column ，一个元素占据一整行，默认为column" + }, + "propType": { + "type": "oneOf", + "value": ["row", "column"] + }, + "defaultValue": "column" + }, + { + "name": "wrap", + "title": "是否折行", + "propType": "bool", + "description": "是否折行", + "defaultValue": false + }, + { + "name": "justify", + "title": { + "label": "沿主轴排布关系", + "tip": "justify | 沿着主轴方向，子元素们的排布关系 （兼容性同 justify-content ）" + }, + "propType": { + "type": "oneOf", + "value": ["flex-start", "center", "flex-end", "space-between", "space-around"] + } + }, + { + "name": "align", + "title": { + "label": "垂直主轴排布关系", + "tip": "align | 垂直主轴方向，子元素们的排布关系 （兼容性同 align-items ）" + }, + "propType": { + "type": "oneOf", + "value": ["flex-start", "center", "flex-end", "baseline", "stretch"] + } + }, + { + "name": "spacing", + "title": { + "label": "元素间距", + "tip": "元素之间的间距 [bottom&top, right&left]" + }, + "propType": { + "type": "oneOfType", + "value": [ + "number", + { + "type": "arrayOf", + "value": "number" + } + ] + } + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "id", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + } + ] + } + }, + "icon": "", + "category": "容器" + }, + { + "componentName": "Breadcrumb.Item", + "title": "面包屑 Item", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Breadcrumb", + "main": "", + "destructuring": true, + "subName": "Item" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "children", + "description": "内容", + "propType": "string" + }, + { + "name": "link", + "propType": "string", + "description": "面包屑节点链接，如果设置这个属性，则该节点为`` ，否则是``" + }, + { + "name": "activated", + "propType": "bool" + }, + { + "name": "separator", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "className", + "propType": "any" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": [ + { + "name": "children", + "title": "文本内容", + "setter": "StringSetter" + } + ] + }, + "icon": "", + "category": "导航" + }, + { + "componentName": "Breadcrumb", + "title": "面包屑", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Breadcrumb", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "description": "样式类名的品牌前缀", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "面包屑子节点，需传入 Breadcrumb.Item" + }, + { + "name": "maxNode", + "propType": { + "type": "oneOfType", + "value": [ + "number", + { + "type": "oneOf", + "value": ["auto"] + } + ] + }, + "description": "面包屑最多显示个数，超出部分会被隐藏, 设置为 auto 会自动根据父元素的宽度适配。", + "defaultValue": 100 + }, + { + "name": "separator", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "分隔符，可以是文本或 Icon" + }, + { + "name": "component", + "propType": { + "type": "oneOfType", + "value": ["string", "func"] + }, + "description": "设置标签类型", + "defaultValue": "nav" + }, + { + "name": "className", + "propType": "any" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "childWhitelist": ["Breadcrumb.Item"] + } + }, + "props": [ + { + "name": "maxNode", + "title": { + "label": "最大节点数", + "tip": "默认 100" + }, + "setter": "NumberSetter" + }, + { + "name": "separator", + "title": "分隔符", + "setter": "StringSetter" + }, + { + "name": "Breadcrumb.Item", + "title": "面包屑项", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "primaryKey", + "title": "面包屑项编号", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "initialValue": { + "type": "JSFunction", + "value": "val => {\n if (val) return val;\n return String(Math.floor(Math.random() * 10000));\n }" + }, + "setter": "StringSetter" + }, + { + "name": "children", + "title": "标题", + "initialValue": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "setter": "StringSetter" + }, + { + "name": "link", + "title": "链接", + "initialValue": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "setter": "StringSetter" + }, + { + "name": "target", + "title": "打开方式", + "initialValue": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "_self", + "props": { + "options": [ + { + "title": "新开页面", + "value": "_blank" + }, + { + "title": "当前页面", + "value": "_self" + } + ] + } + } + } + ] + } + }, + "initialValue": { + "type": "JSFunction", + "value": "() => {\n return {\n primaryKey: String(Math.floor(Math.random() * 10000)),\n children: \"Title\",\n target: \"_self\"\n };\n }" + } + } + } + }, + "extraProps": { + "virtual": { + "type": "JSFunction", + "value": "() => true" + }, + "getValue": { + "type": "JSFunction", + "value": "(target, value) => {\n console.log(\"getValue: \", target, value);\n return target.getNode().children.map(child => {\n return {\n primaryKey: String(child.getPropValue(\"primaryKey\")),\n children: child.getPropValue(\"children\"),\n link: child.getPropValue(\"link\"),\n target: child.getPropValue(\"target\")\n };\n });\n }" + }, + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n console.log(\"setValue: \", target, value);\n const node = target.getNode();\n const map = {};\n if (!Array.isArray(value)) {\n value = [];\n }\n value.forEach(item => {\n const BreadcrumbItem = Object.assign({}, item);\n map[item.primaryKey] = BreadcrumbItem;\n });\n node.mergeChildren(\n child => {\n const primaryKey = String(child.getPropValue(\"primaryKey\"));\n console.log(child.id + \"----\" + primaryKey);\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n child.setPropValue(\"children\", map[primaryKey].children);\n child.setPropValue(\"link\", map[primaryKey].link);\n child.setPropValue(\"target\", map[primaryKey].target);\n delete map[primaryKey];\n return false;\n }\n return true;\n },\n () => {\n const items = [];\n for (const primaryKey in map) {\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n items.push({\n componentName: \"Breadcrumb.Item\",\n props: map[primaryKey]\n });\n }\n }\n console.log(\"adder: \", items);\n return items;\n },\n (child1, child2) => {\n const a = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child1.getPropValue(\"primaryKey\"))\n );\n const b = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child2.getPropValue(\"primaryKey\"))\n );\n console.log(\"a: \", a);\n console.log(\"b: \", b);\n return a - b;\n }\n );\n }" + }, + "onChange": { + "type": "JSFunction", + "value": "() => {\n console.log(\"onChange: \", arguments);\n }" + } + } + } + ], + "supports": { + "style": true + } + }, + "icon": "", + "category": "导航" + }, + { + "componentName": "Button.Group", + "title": "按钮组", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Button", + "main": "", + "destructuring": true, + "subName": "Group" + }, + "props": [ + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "size", + "propType": "string", + "description": "统一设置 Button 组件的按钮大小", + "defaultValue": "medium" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "childWhitelist": ["Button"] + } + }, + "props": [ + { + "name": "size", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "统一设置子按钮的尺寸", + "en_US": "Button Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 统一设置子按钮的尺寸", + "en_US": "prop: size | description: button size" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "defaultValue": "medium" + } + ] + }, + "icon": "", + "category": "常用" + }, + { + "componentName": "Button", + "title": "按钮", + "icon": "https://img.alicdn.com/tfs/TB1rT0gPQL0gK0jSZFAXXcA9pXa-200-200.svg", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Button", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "children", + "title": "内容", + "propType": "string" + }, + { + "name": "icon", + "propType": "string", + "description": "自定义内联样式" + }, + { + "name": "type", + "title": { + "label": { + "type": "i18n", + "zh_CN": "按钮类型", + "en_US": "Button Type" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: type | 说明: 按钮类型", + "en_US": "prop: type | description: button type" + } + }, + "propType": { + "type": "oneOf", + "value": ["primary", "secondary", "normal"] + }, + "description": "按钮的类型", + "defaultValue": "normal" + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "按钮尺寸", + "en_US": "Button Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 按钮尺寸", + "en_US": "prop: size | description: button size" + } + }, + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "按钮的尺寸", + "defaultValue": "medium" + }, + { + "name": "iconSize", + "title": { + "label": { + "type": "i18n", + "zh_CN": "图标尺寸", + "en_US": "Icon Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: iconSize | 说明: 图标尺寸", + "en_US": "prop: iconSize | description: icon size" + } + }, + "propType": { + "type": "oneOf", + "value": ["xxs", "xs", "small", "medium", "large", "xl", "xxl", "xxxl"] + }, + "defaultValue": "small", + "description": "按钮中 Icon 的尺寸，用于替代 Icon 的默认大小" + }, + { + "name": "ghost", + "title": { + "type": "i18n", + "zh_CN": "幽灵按钮", + "en_US": "ghost" + }, + "propType": { + "type": "oneOf", + "value": [true, false, "light", "dark"] + }, + "description": "是否为幽灵按钮", + "defaultValue": false + }, + { + "name": "loading", + "title": "loading", + "propType": "bool", + "description": "设置按钮的载入状态", + "defaultValue": false + }, + { + "name": "text", + "title": { + "type": "i18n", + "zh_CN": "文本按钮", + "en_US": "text" + }, + "propType": "bool", + "description": "是否为文本按钮", + "defaultValue": false + }, + { + "name": "warning", + "title": "warning", + "propType": "bool", + "description": "是否为警告按钮", + "defaultValue": false + }, + { + "name": "disabled", + "title": { + "type": "i18n", + "zh_CN": "禁用", + "en_US": "disabled" + }, + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "onClick", + "title": "onClick", + "propType": "func", + "description": "点击按钮的回调\n@param {Object} e Event Object" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "onMouseUp", + "propType": "func" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "icon", + "title": { + "label": { + "type": "i18n", + "zh_CN": "图标", + "en_US": "Icon" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: icon | 说明: 图标类型", + "en_US": "prop: icon | description: icon type" + } + }, + "setter": "IconSetter", + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n target.nodes[0].children.import(value && {\"componentName\": \"Icon\", \"props\": {\"type\": value, \"style\": {\"marginRight\": 5}}}, true);\n }" + } + }, + { + "name": "ghost", + "title": { + "type": "i18n", + "zh_CN": "幽灵按钮", + "en_US": "ghost" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "True", + "value": true + }, + { + "title": "False", + "value": false + }, + { + "title": "Light", + "value": "light" + }, + { + "title": "Dark", + "value": "dark" + } + ] + } + }, + "description": "是否为幽灵按钮", + "defaultValue": false + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "按钮内容", + "en_US": "Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: children | 说明: 按钮文本", + "en_US": "prop: children | description: button content" + } + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + } + } + ] + } + }, + "category": "常用" + }, + { + "componentName": "Calendar", + "title": "日历", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Calendar", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "defaultValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "默认选中的日期（moment 对象）" + }, + { + "name": "value", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "选中的日期值 (moment 对象)" + }, + { + "name": "modes", + "propType": { + "type": "instanceOf", + "value": "array" + } + }, + { + "name": "disableChangeMode", + "propType": "bool", + "defaultValue": false + }, + { + "name": "format", + "propType": "string", + "defaultValue": "YYYY-MM-DD" + }, + { + "name": "showOtherMonth", + "propType": "bool", + "description": "是否展示非本月的日期", + "defaultValue": true + }, + { + "name": "defaultVisibleMonth", + "propType": "func", + "description": "默认展示的月份" + }, + { + "name": "shape", + "propType": { + "type": "oneOf", + "value": ["card", "fullscreen", "panel"] + }, + "description": "展现形态", + "defaultValue": "fullscreen" + }, + { + "name": "onSelect", + "propType": "func", + "description": "选择日期单元格时的回调\n@param {Object} value 对应的日期值 (moment 对象)" + }, + { + "name": "onModeChange", + "propType": "func", + "description": "面板模式变化时的回调\n@param {String} mode 对应面板模式 date month year" + }, + { + "name": "onVisibleMonthChange", + "propType": "func", + "description": "展现的月份变化时的回调\n@param {Object} value 显示的月份 (moment 对象)\n@param {String} reason 触发月份改变原因" + }, + { + "name": "className", + "propType": "string", + "description": "自定义样式类" + }, + { + "name": "dateCellRender", + "propType": "func", + "description": "自定义日期渲染函数\n@param {Object} value 日期值（moment对象）\n@returns {ReactNode}" + }, + { + "name": "monthCellRender", + "propType": "func", + "description": "自定义月份渲染函数\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@returns {ReactNode}" + }, + { + "name": "yearCellRender", + "propType": "func" + }, + { + "name": "disabledDate", + "propType": "func", + "description": "不可选择的日期\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\n@returns {Boolean}" + }, + { + "name": "locale", + "propType": "object", + "description": "国际化配置" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": [ + { + "name": "shape", + "title": "展现形态", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["card", "fullscreen", "panel"] + } + } + }, + { + "name": "showOtherMonth", + "display": "block", + "title": "展示非本月日期", + "setter": { + "componentName": "BoolSetter" + } + } + ] + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "CardActions", + "title": "CardActions", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Card", + "main": "", + "destructuring": true, + "subName": "Actions" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "component", + "propType": { + "type": "instanceOf", + "value": "elementType" + }, + "description": "设置标签类型", + "defaultValue": "div" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "CardBulletHeader", + "title": "CardBulletHeader", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Card", + "main": "", + "destructuring": true, + "subName": "BulletHeader" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "title", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "卡片的标题" + }, + { + "name": "subTitle", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "卡片的副标题" + }, + { + "name": "showTitleBullet", + "propType": "bool", + "description": "是否显示标题的项目符号", + "defaultValue": true + }, + { + "name": "extra", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "标题区域的用户自定义内容" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "CardCollaspeContent", + "title": "CardCollaspeContent", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Card", + "main": "", + "destructuring": true, + "subName": "CollaspeContent" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "contentHeight", + "propType": { + "type": "oneOfType", + "value": ["string", "number"] + }, + "description": "内容区域的固定高度", + "defaultValue": 120 + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "CardContent", + "title": "CardContent", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Card", + "main": "", + "destructuring": true, + "subName": "Content" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "component", + "propType": { + "type": "instanceOf", + "value": "elementType" + }, + "description": "设置标签类型", + "defaultValue": "div" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "CardDivider", + "title": "CardDivider", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Card", + "main": "", + "destructuring": true, + "subName": "Divider" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "component", + "propType": { + "type": "instanceOf", + "value": "elementType" + }, + "description": "设置标签类型", + "defaultValue": "hr" + }, + { + "name": "inset", + "propType": "bool", + "description": "分割线是否向内缩进" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "CardHeader", + "title": "CardHeader", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Card", + "main": "", + "destructuring": true, + "subName": "Header" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "title", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "卡片的标题" + }, + { + "name": "subTitle", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "卡片的副标题" + }, + { + "name": "extra", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "标题区域的用户自定义内容" + }, + { + "name": "component", + "propType": { + "type": "instanceOf", + "value": "elementType" + }, + "description": "设置标签类型", + "defaultValue": "div" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "CardMedia", + "title": "CardMedia", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Card", + "main": "", + "destructuring": true, + "subName": "Media" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "component", + "propType": { + "type": "instanceOf", + "value": "elementType" + }, + "description": "设置标签类型", + "defaultValue": "div" + }, + { + "name": "image", + "propType": "string", + "description": "背景图片地址" + }, + { + "name": "src", + "propType": "string", + "description": "媒体源文件地址" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "className", + "propType": "string" + } + ], + "category": "基础" + }, + { + "componentName": "Card", + "title": "卡片", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Card", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "showTitleBullet", + "title": "标题符号", + "propType": "bool", + "description": "标题的项目符号", + "defaultValue": true + }, + { + "name": "showHeadDivider", + "title": "分割线", + "propType": "bool", + "description": "头部分隔线", + "defaultValue": true + }, + { + "name": "title", + "propType": { + "type": "oneOfType", + "value": ["node", "string"] + }, + "description": "标题" + }, + { + "name": "subTitle", + "propType": { + "type": "oneOfType", + "value": ["node", "string"] + }, + "description": "副标题" + }, + { + "name": "extra", + "title": { + "label": "自定义内容", + "tip": "标题栏用户自定义内容" + }, + "propType": { + "type": "oneOfType", + "value": ["node", "string"] + }, + "description": "标题栏用户自定义内容" + }, + { + "name": "contentHeight", + "title": "内容高度", + "propType": { + "type": "oneOfType", + "value": ["string", "number"] + }, + "description": "内容区域的固定高度", + "defaultValue": 120 + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "rtl", + "propType": "bool", + "description": "文本方向是从右向左" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "id", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "rtl", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + } + ] + } + }, + "icon": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_card.png", + "category": "内容" + }, + { + "componentName": "CascaderSelect", + "title": "级联选择器", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "CascaderSelect", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "label", + "title": { + "label": "label", + "tip": "自定义内联 label" + }, + "propType": "string", + "description": "自定义内联 label" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "大小", + "defaultValue": "medium" + }, + { + "name": "placeholder", + "propType": "string", + "description": "占位符" + }, + { + "name": "dataSource", + "propType": { + "type": "arrayOf", + "value": "object" + } + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "hasArrow", + "propType": "bool", + "description": "下拉箭头", + "defaultValue": true + }, + { + "name": "hasBorder", + "propType": "bool", + "description": "边框", + "defaultValue": true + }, + { + "name": "hasClear", + "propType": "bool", + "description": "清除按钮", + "defaultValue": false + }, + { + "name": "notFoundContent", + "title": { + "label": "无数据时显示内容", + "tip": "notFoundContent" + }, + "propType": { + "type": "oneOfType", + "value": ["node", "string"] + }, + "description": "无数据时显示内容", + "defaultValue": "Not Found" + }, + { + "name": "loadData", + "propType": "func", + "description": "异步加载数据函数\n@param {Object} data 当前点击异步加载的数据" + }, + { + "name": "header", + "propType": "node", + "description": "自定义下拉框头部" + }, + { + "name": "footer", + "propType": "node", + "description": "自定义下拉框底部" + }, + { + "name": "defaultVisible", + "title": { + "label": "初始下拉框是否显示", + "tip": "defaultVisible" + }, + "propType": "bool", + "description": "初始下拉框是否显示", + "defaultValue": false + }, + { + "name": "visible", + "title": { + "label": "当前下拉框是否显示", + "tip": "visible" + }, + "propType": "bool", + "description": "当前下拉框是否显示" + }, + { + "name": "readOnly", + "propType": "bool", + "description": "是否只读" + }, + { + "name": "onChange", + "propType": "func", + "description": "选中值改变时触发的回调函数\n@param {String|Array} value 选中的值，单选时返回单个值，多选时返回数组\n@param {Object|Array} data 选中的数据，包括 value 和 label，单选时返回单个值，多选时返回数组，父子节点选中关联时，同时选中，只返回父节点\n@param {Object} extra 额外参数\n@param {Array} extra.selectedPath 单选时选中的数据的路径\n@param {Boolean} extra.checked 多选时当前的操作是选中还是取消选中\n@param {Object} extra.currentData 多选时当前操作的数据\n@param {Array} extra.checkedData 多选时所有被选中的数据\n@param {Array} extra.indeterminateData 多选时半选的数据" + }, + { + "name": "expandTriggerType", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "展开触发方式", + "defaultValue": "click" + }, + { + "name": "onExpand", + "propType": "func" + }, + { + "name": "useVirtual", + "propType": "bool", + "description": "虚拟滚动", + "defaultValue": false + }, + { + "name": "multiple", + "propType": "bool", + "description": "是否多选", + "defaultValue": false + }, + { + "name": "changeOnSelect", + "title": { + "label": "选中即改变", + "tip": "changeOnSelect|是否选中即发生改变, 该属性仅在单选模式下有效" + }, + "propType": "bool", + "description": "是否选中即发生改变, 该属性仅在单选模式下有效", + "defaultValue": false + }, + { + "name": "canOnlyCheckLeaf", + "title": { + "label": "canOnlyCheckLeaf", + "tip": "是否只能勾选叶子项的checkbox，该属性仅在多选模式下有效" + }, + "propType": "bool", + "description": "是否只能勾选叶子项的checkbox，该属性仅在多选模式下有效", + "defaultValue": false + }, + { + "name": "checkStrictly", + "title": { + "label": "checkStrictly", + "tip": "父子节点是否选中不关联" + }, + "propType": "bool", + "description": "父子节点是否选中不关联", + "defaultValue": false + }, + { + "name": "listStyle", + "propType": "object", + "description": "每列列表样式对象" + }, + { + "name": "resultAutoWidth", + "title": { + "label": "resultAutoWidth", + "tip": "搜索结果列表是否和选择框等宽" + }, + "propType": "bool", + "description": "搜索结果列表是否和选择框等宽", + "defaultValue": true + }, + { + "name": "showSearch", + "propType": "bool", + "description": "搜索框", + "defaultValue": false + }, + { + "name": "filter", + "propType": "func", + "description": "自定义搜索函数\n@param {String} searchValue 搜索的关键字\n@param {Array} path 节点路径\n@return {Boolean} 是否匹配\n@default 根据路径所有节点的文本值模糊匹配" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "下拉框显示或关闭时触发事件的回调函数\n@param {Boolean} visible 是否显示\n@param {String} type 触发显示关闭的操作类型, fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "popupStyle", + "propType": "object", + "description": "下拉框自定义样式对象" + }, + { + "name": "popupProps", + "propType": "object", + "description": "透传到 Popup 的属性对象" + }, + { + "name": "followTrigger", + "title": { + "label": "是否跟随滚动", + "tip": "followTrigger" + }, + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "isPreview", + "title": { + "label": "是否为预览态", + "tip": "isPreview" + }, + "propType": "bool", + "description": "是否为预览态" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + } + ], + "configure": { + "supports": { + "style": true, + "events": [ + { + "name": "onChange", + "templete": "templeteTest(e,${extParams}){this.setState({isShowDialog: false})}" + }, + { + "name": "onExpand" + }, + { + "name": "onVisibleChange" + } + ] + }, + "props": [ + { + "name": "label", + "title": { + "label": "内联文案", + "tip": "自定义内联 label" + }, + "setter": "StringSetter" + }, + { + "name": "size", + "title": "尺寸", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "defaultValue": "medium" + }, + { + "name": "placeholder", + "title": "占位提示", + "setter": "StringSetter" + }, + { + "name": "dataSource", + "title": "级联数据", + "setter": "JsonSetter" + }, + { + "name": "disabled", + "setter": "BoolSetter", + "title": "是否禁用", + "defaultValue": false + }, + { + "name": "hasArrow", + "setter": "BoolSetter", + "title": "下拉箭头", + "defaultValue": true + }, + { + "name": "hasBorder", + "setter": "BoolSetter", + "title": "边框", + "defaultValue": true + }, + { + "name": "hasClear", + "setter": "BoolSetter", + "title": "清除按钮", + "defaultValue": false + }, + { + "name": "readOnly", + "setter": "BoolSetter", + "title": "是否只读" + }, + { + "name": "multiple", + "setter": "BoolSetter", + "title": "是否多选", + "defaultValue": false + }, + { + "name": "showSearch", + "setter": "BoolSetter", + "title": "搜索框", + "defaultValue": false + }, + { + "name": "followTrigger", + "title": { + "label": "跟随滚动", + "tip": "followTrigger" + }, + "setter": "BoolSetter", + "description": "是否跟随滚动" + }, + { + "name": "isPreview", + "title": { + "label": "预览态", + "tip": "isPreview" + }, + "setter": "BoolSetter", + "description": "是否为预览态" + }, + { + "name": "expandTriggerType", + "display": "block", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["click", "hover"] + } + }, + "title": "展开触发方式", + "defaultValue": "click" + }, + { + "name": "notFoundContent", + "display": "block", + "title": { + "label": "无数据时显示内容", + "tip": "notFoundContent" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "SlotSetter"] + } + }, + "defaultValue": "Not Found" + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ] + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Cascader", + "title": "级联", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Cascader", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "onChange", + "propType": "func", + "description": "选中值改变时触发的回调函数\n@param {String|Array} value 选中的值，单选时返回单个值，多选时返回数组\n@param {Object|Array} data 选中的数据，包括 value 和 label，单选时返回单个值，多选时返回数组，父子节点选中关联时，同时选中，只返回父节点\n@param {Object} extra 额外参数\n@param {Array} extra.selectedPath 单选时选中的数据的路径\n@param {Boolean} extra.checked 多选时当前的操作是选中还是取消选中\n@param {Object} extra.currentData 多选时当前操作的数据\n@param {Array} extra.checkedData 多选时所有被选中的数据\n@param {Array} extra.indeterminateData 多选时半选的数据" + }, + { + "name": "onSelect", + "propType": "func" + }, + { + "name": "dataSource", + "propType": "array" + }, + { + "name": "expandTriggerType", + "title": { + "label": "触发方式", + "tip": "expandTriggerType | 展开触发的方式" + }, + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "展开触发的方式", + "defaultValue": "click" + }, + { + "name": "onExpand", + "propType": "func", + "description": "展开时触发的回调函数\n@param {Array} expandedValue 各列展开值的数组" + }, + { + "name": "useVirtual", + "title": { + "label": "虚拟滚动", + "tip": "useVirtual | 是否开启虚拟滚动" + }, + "propType": "bool", + "description": "是否开启虚拟滚动", + "defaultValue": false + }, + { + "name": "multiple", + "propType": "bool", + "description": "是否多选", + "defaultValue": false + }, + { + "name": "canOnlySelectLeaf", + "title": { + "label": "单选时是否只能选中叶子节点", + "tip": "canOnlySelectLeaf" + }, + "propType": "bool", + "description": "单选时是否只能选中叶子节点", + "defaultValue": false + }, + { + "name": "canOnlyCheckLeaf", + "title": { + "label": "多选时是否只能选中叶子节点", + "tip": "canOnlyCheckLeaf" + }, + "propType": "bool", + "description": "多选时是否只能选中叶子节点", + "defaultValue": false + }, + { + "name": "checkStrictly", + "title": { + "tip": "checkStrictly", + "label": "父子节点是否选中不关联" + }, + "propType": "bool", + "description": "父子节点是否选中不关联", + "defaultValue": false + }, + { + "name": "listStyle", + "propType": "object", + "description": "每列列表样式对象" + }, + { + "name": "loadData", + "title": { + "label": "loadData", + "tip": "异步加载数据函数\n@param {Object} data 当前点击异步加载的数据\n@param {Object} source 当前点击数据，source是原始对象" + }, + "propType": "func", + "description": "异步加载数据函数\n@param {Object} data 当前点击异步加载的数据\n@param {Object} source 当前点击数据，source是原始对象" + }, + { + "name": "onBlur", + "propType": "func" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "rtl", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "loadData", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "listStyle", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "dataSource", + "title": "级联数据", + "setter": "JsonSetter" + }, + { + "name": "canOnlySelectLeaf", + "display": "block", + "title": { + "label": "单选时是否只能选中叶子节点", + "tip": "canOnlySelectLeaf" + }, + "setter": "BoolSetter", + "defaultValue": false + }, + { + "name": "canOnlyCheckLeaf", + "display": "block", + "title": { + "label": "多选时是否只能选中叶子节点", + "tip": "canOnlyCheckLeaf" + }, + "setter": "BoolSetter", + "defaultValue": false + }, + { + "name": "checkStrictly", + "display": "block", + "title": { + "tip": "checkStrictly", + "label": "父子节点是否选中不关联" + }, + "setter": "BoolSetter", + "defaultValue": false + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "CheckboxGroup", + "title": "复选按钮组", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Checkbox", + "main": "", + "destructuring": true, + "subName": "Group" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "disabled", + "propType": "bool", + "description": "整体禁用" + }, + { + "name": "value", + "propType": { + "type": "oneOfType", + "value": [ + { + "type": "instanceOf", + "value": "array" + }, + "string", + "number" + ] + }, + "description": "被选中的值列表" + }, + { + "name": "defaultValue", + "propType": { + "type": "oneOfType", + "value": [ + { + "type": "instanceOf", + "value": "array" + }, + "string", + "number" + ] + }, + "description": "默认被选中的值列表" + }, + { + "name": "onChange", + "propType": "func", + "description": "选中值改变时的事件\n@param {Array} value 选中项列表\n@param {Event} e Dom 事件对象" + }, + { + "name": "itemDirection", + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "子项目的排列方式\n- hoz: 水平排列 (default)\n- ver: 垂直排列", + "defaultValue": "hoz" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态", + "defaultValue": false + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {number} value 评分值" + } + ], + "configure": { + "props": [ + { + "name": "disabled", + "title": "是否禁用", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + } + }, + { + "name": "itemDirection", + "title": "排列方式", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "水平排列", + "value": "hoz" + }, + { + "title": "垂直排列", + "value": "ver" + } + ] + } + }, + "defaultValue": "hoz" + }, + { + "name": "isPreview", + "title": "预览态", + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "defaultValue", + "title": "默认值", + "defaultValue": "[]", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["JsonSetter", "ExpressionSetter"] + } + } + }, + { + "name": "dataSource", + "display": "block", + "title": "选项", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "label", + "title": "label", + "setter": "StringSetter" + }, + { + "name": "value", + "title": "value", + "setter": "StringSetter" + } + ] + } + }, + "initialValue": { + "label": "选项一", + "value": "1" + } + } + } + }, + "ExpressionSetter" + ] + } + } + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ], + "supports": { + "style": true, + "events": ["onChange"] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "CheckboxItem", + "title": "复选框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Menu", + "main": "", + "destructuring": true, + "subName": "CheckboxItem" + }, + "props": [ + { + "name": "checked", + "propType": "bool", + "description": "是否选中", + "defaultValue": false + }, + { + "name": "indeterminate", + "propType": "bool", + "description": "是否半选中", + "defaultValue": false + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "onChange", + "propType": "func", + "description": "选中或取消选中触发的回调函数\n@param {Boolean} checked 是否选中\n@param {Object} event 选中事件对象" + }, + { + "name": "helper", + "propType": "node", + "description": "帮助文本" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["Menu", "SubMenu", "Menu.Group", "MenuButton"] + } + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Checkbox", + "title": "复选按钮", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Checkbox", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "id", + "propType": "string", + "description": "ID" + }, + { + "name": "name", + "propType": "string", + "description": "name" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "checked", + "propType": "bool", + "description": "选中状态" + }, + { + "name": "defaultChecked", + "propType": "bool", + "description": "默认选中状态", + "defaultValue": false + }, + { + "name": "disabled", + "propType": "bool", + "description": "禁用" + }, + { + "name": "label", + "propType": "string", + "description": "label" + }, + { + "name": "indeterminate", + "propType": "bool", + "description": "中间状态" + }, + { + "name": "defaultIndeterminate", + "propType": "bool", + "description": "默认中间态", + "defaultValue": false + }, + { + "name": "value", + "propType": { + "type": "oneOfType", + "value": ["string"] + }, + "description": "value" + } + ], + "configure": { + "props": [ + { + "name": "label", + "title": "标题", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + } + }, + { + "name": "value", + "title": "Value", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + } + }, + { + "name": "indeterminate", + "title": "半选状态", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + } + }, + { + "name": "disabled", + "title": "是否禁用", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + } + }, + { + "name": "controlChecked", + "display": "block", + "title": { + "label": "外部控制选中", + "tip": "外部控制选中后，选中状态需要开发者自己根据 onChange 回传的值重新设置给组件才能生效" + }, + "setter": "BoolSetter" + }, + { + "name": "checked", + "title": "选中状态", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + }, + "condition": { + "type": "JSFunction", + "value": "condition(target) {\n return target.getProps().getPropValue(\"controlChecked\") || false;\n }" + } + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ], + "supports": { + "style": true, + "events": ["onChange", "onMouseEnter", "onMouseLeave"] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Collapse.Panel", + "title": "折叠面板Panel", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Collapse", + "main": "", + "destructuring": true, + "subName": "Panel" + }, + "props": [ + { + "name": "children", + "propType": "any" + }, + { + "name": "style", + "propType": "object", + "description": "子组件接受行内样式" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁止用户操作" + }, + { + "name": "title", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "标题" + } + ], + "configure": { + "component": { + "nestingRule": { + "parentWhitelist": ["Collapse"] + } + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Collapse", + "title": "折叠面板", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Collapse", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "dataSource", + "propType": "array", + "description": "使用数据模型构建" + }, + { + "name": "defaultExpandedKeys", + "propType": { + "type": "arrayOf", + "value": "string" + }, + "description": "默认展开keys" + }, + { + "name": "expandedKeys", + "propType": { + "type": "arrayOf", + "value": "string" + }, + "description": "受控展开keys" + }, + { + "name": "onExpand", + "propType": "func", + "description": "展开状态发升变化时候的回调" + }, + { + "name": "disabled", + "propType": "bool", + "description": "所有禁用" + }, + { + "name": "className", + "propType": "string", + "description": "扩展class" + }, + { + "name": "style", + "propType": "object", + "description": "组件接受行内样式" + }, + { + "name": "accordion", + "propType": "bool", + "description": "手风琴模式，一次只能打开一个", + "defaultValue": false + }, + { + "name": "rtl", + "propType": "bool" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "dataSource", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["JsonSetter", "ExpressionSetter"] + } + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "title": "柱状图", + "category": "常用图表(试验)", + "componentName": "ColumnChart", + "icon": "https://unpkg.alibaba-inc.com/@ali/vc-bizcharts@1.1.4/src/vc-column/logo.svg", + "npm": { + "package": "bizcharts", + "version": "4.1.11-beta.2", + "exportName": "ColumnChart", + "main": "", + "destructuring": true, + "subName": "" + }, + "configure": { + "props": [ + { + "name": "titleConfig", + "title": "标题配置", + "display": "block", + "type": "group", + "items": [ + { + "name": "title.text", + "title": "标题", + "setter": "StringSetter" + }, + { + "name": "title.visible", + "title": "是否展示", + "setter": "BoolSetter" + } + ] + }, + { + "name": "xFieldConfig", + "title": "横坐标", + "type": "group", + "display": "block", + "items": [ + { + "name": "xField", + "title": "横坐标标识", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "year", + "tip": "标题文本", + "supportVariable": true + }, + { + "name": "xFieldAlias", + "title": "横坐标别名", + "display": "inline", + "setter": "StringSetter", + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n target\n .getProps()\n .setPropValue(\n `meta.${target.getProps().getPropValue(\"xField\")}.alias`,\n value\n );\n }" + } + } + ] + }, + { + "name": "yFieldConfig", + "title": "纵坐标", + "type": "group", + "display": "block", + "items": [ + { + "name": "yField", + "title": "纵坐标标识", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "year", + "tip": "标题文本", + "supportVariable": true + }, + { + "name": "yFieldAlias", + "title": "纵坐标别名", + "display": "inline", + "setter": "StringSetter", + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n target\n .getProps()\n .setPropValue(\n `meta.${target.getProps().getPropValue(\"yField\")}.alias`,\n value\n );\n }" + } + } + ] + }, + { + "name": "data", + "title": "图表数据", + "tip": "配置图表数据", + "setter": "JsonSetter" + } + ], + "supports": { + "style": true + } + } + }, + { + "componentName": "DatePicker", + "title": "日期选择框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "DatePicker", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "name", + "title": { + "label": "名称", + "tip": "name|表单相关" + }, + "propType": "string", + "description": "name|表单相关" + }, + { + "name": "label", + "title": { + "label": "标签", + "tip": "label|输入框内置标签" + }, + "propType": "string", + "description": "label|输入框内置标签" + }, + { + "name": "state", + "title": { + "label": "状态", + "tip": "state|输入框状态" + }, + "propType": { + "type": "oneOf", + "value": ["success", "loading", "error"] + }, + "description": "state|输入框状态" + }, + { + "name": "placeholder", + "title": { + "label": "占位提示", + "tip": "placeholder|输入提示" + }, + "propType": "string", + "description": "输入提示" + }, + { + "name": "value", + "title": { + "label": "value", + "tip": "value|日期值（受控）" + }, + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "日期值（受控）moment 对象" + }, + { + "name": "defaultValue", + "title": { + "label": "默认值", + "tip": "defaultValue|初始日期值，moment 对象" + }, + "propType": "date", + "description": "defaultValue|初始日期值，moment 对象" + }, + { + "name": "format", + "title": { + "label": "格式", + "tip": "format|日期值的格式（用于限定用户输入和展示）" + }, + "propType": "string", + "description": "format|日期值的格式（用于限定用户输入和展示）", + "defaultValue": "YYYY-MM-DD" + }, + { + "name": "onChange", + "propType": "func", + "description": "日期值改变时的回调\n@param {MomentObject|String} value 日期值" + }, + { + "name": "onOk", + "propType": "func", + "description": "点击确认按钮时的回调\n@return {MomentObject|String} 日期值" + }, + { + "name": "size", + "title": { + "label": "尺寸", + "tip": "size|输入框尺寸" + }, + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "size|输入框尺寸", + "defaultValue": "medium" + }, + { + "name": "disabled", + "title": { + "label": "是否禁用", + "tip": "disabled|是否禁用" + }, + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "hasClear", + "title": { + "label": "清除按钮", + "tip": "hasClear|是否显示清空按钮" + }, + "propType": "bool", + "description": "hasClear|是否显示清空按钮", + "defaultValue": true + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "跟随滚动" + }, + { + "name": "defaultVisible", + "title": { + "label": "弹层显示", + "tip": "defaultVisible|弹层默认是否显示" + }, + "propType": "bool", + "description": "defaultVisible|弹层默认是否显示", + "defaultValue": false + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "form", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "rtl", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "value", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "name", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "defaultValue", + "title": { + "label": "默认值", + "tip": "defaultValue|初始日期值，moment 对象" + }, + "setter": "DateSetter" + }, + { + "name": "form", + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Dialog", + "title": "对话框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Dialog", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "visible", + "propType": { + "type": "oneOfType", + "value": ["JSExpression", "bool"] + }, + "description": "是否显示", + "defaultValue": false + }, + { + "name": "title", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "description": "标题" + }, + { + "name": "children", + "propType": { + "type": "oneOfType", + "value": [ + "bool", + { + "type": "instanceOf", + "value": "node" + } + ] + }, + "description": "内容" + }, + { + "name": "footer", + "propType": { + "type": "oneOfType", + "value": ["bool"] + }, + "description": "底部按钮" + }, + { + "name": "footerAlign", + "propType": { + "type": "oneOf", + "value": ["left", "center", "right"] + }, + "description": "操作对齐方式", + "defaultValue": "right" + }, + { + "name": "closeable", + "propType": { + "type": "oneOf", + "value": ["close", "mask", "esc,close", "close,esc,mask", "esc"] + }, + "description": "关闭方式", + "defaultValue": "esc,close" + }, + { + "name": "onClose", + "propType": "func", + "description": "对话框关闭时触发的回调函数\n@param {String} trigger 关闭触发行为的描述字符串\n@param {Object} event 关闭时事件对象" + }, + { + "name": "hasMask", + "propType": "bool", + "description": "是否显示遮罩", + "defaultValue": true + }, + { + "name": "animation", + "propType": { + "type": "oneOfType", + "value": ["object", "bool"] + }, + "description": "显示隐藏时动画的播放方式\n@property {String} in 进场动画\n@property {String} out 出场动画" + }, + { + "name": "autoFocus", + "propType": "bool", + "description": "是否获得焦点", + "defaultValue": false + }, + { + "name": "isFullScreen", + "propType": "bool", + "description": "是否全屏", + "defaultValue": false + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "isModal": true, + "rootSelector": "div.next-dialog", + "nestingRule": { + "parentWhitelist": ["Page"] + } + }, + "props": [ + { + "name": "title", + "title": "标题", + "setter": "StringSetter", + "initialValue": "标题" + }, + { + "name": "visible", + "title": "是否显示", + "setter": "BoolSetter", + "initialValue": false + }, + { + "name": "hasMask", + "title": "显示遮罩", + "setter": "BoolSetter", + "initialValue": true + }, + { + "name": "closeMode", + "title": "关闭方式", + "setter": { + "componentName": "SelectSetter", + "mutiple": true, + "props": { + "options": [ + { + "title": "close", + "value": "close" + }, + { + "title": "mask", + "value": "mask" + }, + { + "title": "esc", + "value": "esc" + } + ] + } + }, + "initialValue": ["esc", "close"] + }, + { + "name": "autoFocus", + "title": "自动聚焦", + "setter": "BoolSetter", + "initialValue": false + }, + { + "name": "buttons", + "title": "底部按钮配置", + "type": "group", + "extraProps": { + "display": "block" + }, + "items": [ + { + "name": "footer", + "title": "是否显示", + "setter": "BoolSetter", + "initialValue": true + }, + { + "name": "footerAlign", + "title": "对齐方式", + "initialValue": "right", + "condition": { + "type": "JSFunction", + "value": "target => {\n return target.getProps().getPropValue(\"footer\");\n }" + }, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "right", + "props": { + "options": [ + { + "title": "left", + "value": "left" + }, + { + "title": "center", + "value": "center" + }, + { + "title": "right", + "value": "right" + } + ] + } + } + }, + { + "name": "footerActions", + "title": "排列方式", + "initialValue": ["ok", "cancel"], + "condition": { + "type": "JSFunction", + "value": "target => {\n return target.getProps().getPropValue(\"footer\");\n }" + }, + "setter": { + "componentName": "SelectSetter", + "initialValue": ["ok", "cancel"], + "props": { + "options": [ + { + "title": "ok, cancel", + "value": ["ok", "cancel"] + }, + { + "title": "cancel, ok", + "value": ["cancel", "ok"] + }, + { + "title": "cancel", + "value": ["cancel"] + }, + { + "title": "ok", + "value": ["ok"] + } + ] + } + } + } + ] + } + ], + "supports": { + "events": ["onOk", "onCancel", "onClose"], + "style": true + } + }, + "experimental": { + "callbacks": { + "onNodeAdd": { + "type": "JSFunction", + "value": "(dragment, currentNode) => {\n \n \n if (\n !dragment ||\n [\"NextP\", \"NextBlock\", \"Slot\"].includes(dragment.componentName) ||\n (dragment.isModal && dragment.isModal())\n ) {\n console.log(\n `[${dragment.componentName}] doesn\\'n need to wrap with NextBlock > NextBlockCell`\n );\n return;\n }\n\n const NextPProps = {\n wrap: false,\n type: \"body2\",\n verAlign: \"middle\",\n textSpacing: true,\n align: \"left\"\n };\n\n if (\n [\n \"Form\",\n \"ResponsiveGrid\",\n \"Box\",\n \"Card\",\n \"List\",\n \"Message\",\n \"Slider\",\n \"NextTable\"\n ].includes(dragment.componentName) ||\n dragment.getPropValue(\"isFillContainer\")\n ) {\n NextPProps.full = true;\n }\n const layoutPSchema = {\n componentName: \"NextP\",\n title: \"段落\",\n props: NextPProps,\n children: [dragment.schema]\n };\n\n \n const layoutBlockNode = len =>\n currentNode.document.createNode({\n componentName: \"NextBlock\",\n title: \"区块\",\n props: {\n childTotalColumns: len || 12\n },\n children: [\n {\n componentName: \"NextBlockCell\",\n title: \"子区块\",\n props: {\n isAutoContainer: true,\n colSpan: 12,\n rowSpan: 1\n },\n children: [layoutPSchema]\n }\n ]\n });\n\n const dropLocation = dragment.document.designer.dropLocation;\n\n if (!dropLocation) {\n \n return;\n }\n const dropTarget = dropLocation.target;\n const dropTargetName = dropLocation.target.componentName || \"\";\n\n \n const targetId = (dropLocation && dropLocation.target.id) || \"\";\n \n let slotTarget =\n currentNode.slots.length > 0 &&\n currentNode.slots.find(item => item.id === targetId);\n\n const layoutPNode = currentNode.document.createNode(layoutPSchema);\n\n \n const isAsideSlot =\n slotTarget && [\"aside\"].indexOf(slotTarget._slotFor.key) > -1;\n \n const isNeedPSlot =\n slotTarget &&\n [\"header\", \"footer\", \"nav\"].indexOf(slotTarget._slotFor.key) > -1;\n\n const wrapWithBlock = (dragment, node, dropTargetName, blockLen) => {\n setTimeout(() => {\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] need to wrap with NextBlock > NextBlockCell > NextP [from NextPage2]`\n );\n const newNode = node.document.createNode(\n layoutBlockNode(blockLen).schema\n );\n node.insertBefore(newNode, dragment, false);\n dragment.remove(false);\n newNode\n .getChildren()\n .get(0)\n .getChildren()\n .get(0)\n .getChildren()\n .get(0)\n .select();\n }, 1);\n };\n\n const wrapWithP = (dragment, node, dropTargetName) => {\n setTimeout(() => {\n \n \n if (dropTargetName === \"NextP\") {\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] does't need to wrap with NextP. [from NextPage3]`\n );\n return;\n }\n\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] need to wrap with NextP [from NextPage3]`\n );\n const newNode = node.document.createNode(\n Object.assign(layoutPNode.schema)\n );\n node.insertBefore(newNode, dragment, false);\n dragment.remove(false);\n newNode\n .getChildren()\n .get(0)\n .select();\n }, 1);\n };\n\n \n \n if (\n [\"NextPage\"].includes(dropTargetName) &&\n currentNode.getChildren().has(dragment)\n ) {\n wrapWithBlock(dragment, currentNode, dropTargetName, 12);\n\n \n \n } else if (\n isAsideSlot &&\n slotTarget &&\n slotTarget.getChildren().has(dragment)\n ) {\n wrapWithBlock(dragment, slotTarget, dropTargetName, 1);\n\n \n \n \n } else if (\n dropTarget.getPropValue(\"isAutoContainer\") ||\n dropTargetName === \"Tab.Item\"\n ) {\n wrapWithP(dragment, dropTarget, dropTargetName);\n\n \n \n } else if (isNeedPSlot && slotTarget) {\n wrapWithP(dragment, slotTarget, dropTargetName);\n }\n\n \n }" + } + } + }, + "icon": "", + "category": "容器" + }, + { + "componentName": "Div", + "title": "Div", + "configure": { + "component": { + "isContainer": true + } + }, + "category": "基础" + }, + { + "componentName": "Divider", + "title": "分隔符", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Divider", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "children", + "propType": "string", + "description": "文案", + "defaultValue": "分隔符" + }, + { + "name": "dashed", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否虚线", + "en_US": "Dashed" + } + }, + "propType": { + "type": "bool" + }, + "description": "是否为虚线", + "defaultValue": false + }, + { + "name": "direction", + "title": { + "label": { + "type": "i18n", + "zh_CN": "朝向", + "en_US": "Direction" + } + }, + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "线是水平还是垂直类型", + "defaultValue": "hoz" + }, + { + "name": "orientation", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标题位置", + "en_US": "Orientation" + } + }, + "propType": { + "type": "oneOf", + "value": ["left", "right", "center"] + }, + "description": "分割线标题的位置", + "defaultValue": "center" + } + ], + "experimental": { + "filters": [ + { + "name": "", + "filter": { + "type": "JSFunction", + "value": "filters" + } + } + ] + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Drawer.Inner", + "title": "Drawer.Inner", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Drawer", + "main": "", + "destructuring": true, + "subName": "Inner" + }, + "props": [ + { + "name": "className", + "propType": "string" + }, + { + "name": "closeable", + "propType": "bool", + "defaultValue": true + }, + { + "name": "role", + "propType": "string", + "defaultValue": "dialog" + }, + { + "name": "title", + "propType": "string" + }, + { + "name": "placement", + "propType": { + "type": "oneOf", + "value": ["top", "right", "bottom", "left"] + } + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "onClose", + "propType": "func" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "headerStyle", + "propType": "object" + }, + { + "name": "bodyStyle", + "propType": "object" + }, + { + "name": "afterClose", + "propType": "func" + }, + { + "name": "beforeOpen", + "propType": "func" + }, + { + "name": "beforeClose", + "propType": "func" + }, + { + "name": "cache", + "propType": "bool" + }, + { + "name": "shouldUpdatePosition", + "propType": "bool" + } + ], + "category": "基础" + }, + { + "componentName": "Drawer", + "title": "抽屉", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Drawer", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "prefix", + "title": { + "type": "i18n", + "zh_CN": "前缀", + "en_US": "prefix" + }, + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "width", + "title": { + "type": "i18n", + "zh_CN": "宽度", + "en_US": "width", + "tip": "width|仅在 placement是 left right 的时候生效" + }, + "propType": { + "type": "oneOfType", + "value": ["number", "string"] + }, + "description": "宽度，仅在 placement是 left right 的时候生效" + }, + { + "name": "height", + "title": { + "type": "i18n", + "zh_CN": "高度", + "en_US": "height", + "tip": "height|仅在 placement是 top bottom 的时候生效" + }, + "propType": { + "type": "oneOfType", + "value": ["number", "string"] + }, + "description": "高度，仅在 placement是 top bottom 的时候生效" + }, + { + "name": "placement", + "propType": { + "type": "oneOf", + "value": ["top", "right", "bottom", "left"] + }, + "description": "位于页面的位置", + "defaultValue": "right" + }, + { + "name": "title", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "description": "标题" + }, + { + "name": "headerStyle", + "propType": "object", + "description": "header上的样式" + }, + { + "name": "bodyStyle", + "propType": "object", + "description": "body上的样式" + }, + { + "name": "visible", + "propType": "bool", + "description": "是否显示" + }, + { + "name": "hasMask", + "propType": "bool", + "description": "是否显示遮罩", + "defaultValue": true + }, + { + "name": "onVisibleChange", + "propType": "func" + }, + { + "name": "animation", + "title": { + "label": "动画", + "tip": "animation" + }, + "propType": "bool", + "description": "显示隐藏时动画的播放方式\n@property {String} in 进场动画\n@property {String} out 出场动画" + }, + { + "name": "closeable", + "propType": { + "type": "oneOfType", + "value": ["string", "bool"] + }, + "description": "控制对话框关闭的方式，值可以为字符串或者布尔值，其中字符串是由以下值组成：\n**close** 表示点击关闭按钮可以关闭对话框\n**mask** 表示点击遮罩区域可以关闭对话框\n**esc** 表示按下 esc 键可以关闭对话框\n如 'close' 或 'close,esc,mask'\n如果设置为 true，则以上关闭方式全部生效\n如果设置为 false，则以上关闭方式全部失效", + "defaultValue": true + }, + { + "name": "onClose", + "propType": "func", + "description": "对话框关闭时触发的回调函数\n@param {String} trigger 关闭触发行为的描述字符串\n@param {Object} event 关闭时事件对象" + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + } + ], + "configure": { + "component": { + "isContainer": true, + "isModal": true, + "rootSelector": ".next-drawer", + "nestingRule": { + "parentWhitelist": { + "type": "JSFunction", + "value": "(testNode, currentNode) => {\n return testNode.componentName === \"Page\";\n }" + } + } + }, + "props": [ + { + "name": "title", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标题", + "en_US": "Title" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: title | 说明: 标题", + "en_US": "prop: title | description: title" + } + }, + "setter": { + "componentName": "StringSetter" + }, + "description": "标题" + }, + { + "name": "width", + "title": { + "label": { + "type": "i18n", + "zh_CN": "宽度", + "en_US": "width" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: width | 说明: 宽度", + "en_US": "prop: width | description: 仅在 placement是 left right 的时候生效" + } + }, + "setter": { + "componentName": "NumberSetter" + }, + "description": "宽度，仅在 placement是 left right 的时候生效" + }, + { + "name": "height", + "title": { + "label": { + "type": "i18n", + "zh_CN": "高度", + "en_US": "height" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: height | 说明: 高度", + "en_US": "prop: height | description: 仅在 placement是 top bottom 的时候生效" + } + }, + "setter": { + "componentName": "NumberSetter" + }, + "description": "高度，仅在 placement是 top bottom 的时候生效" + }, + { + "name": "placement", + "title": { + "label": { + "type": "i18n", + "zh_CN": "弹出位置", + "en_US": "height" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: placement | 说明: 位于页面的位置", + "en_US": "prop: placement | description: drawer placement" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["top", "right", "bottom", "left"] + } + }, + "description": "位于页面的位置", + "defaultValue": "right" + }, + { + "name": "visible", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否显示", + "en_US": "visible" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: visible | 说明: 是否显示", + "en_US": "prop: visible | description: drawer visible" + } + }, + "setter": "BoolSetter", + "description": "是否显示" + }, + { + "name": "hasMask", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示遮罩", + "en_US": "hasMask" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasMask | 说明: 是否显示遮罩", + "en_US": "prop: hasMask | description: drawer hasMask" + } + }, + "setter": { + "componentName": "BoolSetter" + }, + "description": "是否显示遮罩", + "defaultValue": true + }, + { + "name": "closeable", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示遮罩", + "en_US": "closeable" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: closeable | 说明: 控制对话框关闭的方式，值可以为字符串或者布尔值，其中字符串是由以下值组成：\n**close** 表示点击关闭按钮可以关闭对话框\n**mask** 表示点击遮罩区域可以关闭对话框\n**esc** 表示按下 esc 键可以关闭对话框\n如 'close' 或 'close,esc,mask'\n如果设置为 true，则以上关闭方式全部生效\n如果设置为 false，则以上关闭方式全部失效", + "en_US": "prop: closeable | description: drawer closeable" + } + }, + "setter": { + "componentName": "BoolSetter" + }, + "description": "控制对话框关闭的方式，值可以为字符串或者布尔值，其中字符串是由以下值组成：\n**close** 表示点击关闭按钮可以关闭对话框\n**mask** 表示点击遮罩区域可以关闭对话框\n**esc** 表示按下 esc 键可以关闭对话框\n如 'close' 或 'close,esc,mask'\n如果设置为 true，则以上关闭方式全部生效\n如果设置为 false，则以上关闭方式全部失效", + "defaultValue": true + } + ] + }, + "experimental": { + "callbacks": { + "onNodeAdd": { + "type": "JSFunction", + "value": "(dragment, currentNode) => {\n \n \n if (\n !dragment ||\n [\"NextP\", \"NextBlock\", \"Slot\"].includes(dragment.componentName) ||\n (dragment.isModal && dragment.isModal())\n ) {\n console.log(\n `[${dragment.componentName}] doesn\\'n need to wrap with NextBlock > NextBlockCell`\n );\n return;\n }\n\n const NextPProps = {\n wrap: false,\n type: \"body2\",\n verAlign: \"middle\",\n textSpacing: true,\n align: \"left\"\n };\n\n if (\n [\n \"Form\",\n \"ResponsiveGrid\",\n \"Box\",\n \"Card\",\n \"List\",\n \"Message\",\n \"Slider\",\n \"NextTable\"\n ].includes(dragment.componentName) ||\n dragment.getPropValue(\"isFillContainer\")\n ) {\n NextPProps.full = true;\n }\n const layoutPSchema = {\n componentName: \"NextP\",\n title: \"段落\",\n props: NextPProps,\n children: [dragment.schema]\n };\n\n \n const layoutBlockNode = len =>\n currentNode.document.createNode({\n componentName: \"NextBlock\",\n title: \"区块\",\n props: {\n childTotalColumns: len || 12\n },\n children: [\n {\n componentName: \"NextBlockCell\",\n title: \"子区块\",\n props: {\n isAutoContainer: true,\n colSpan: 12,\n rowSpan: 1\n },\n children: [layoutPSchema]\n }\n ]\n });\n\n const dropLocation = dragment.document.designer.dropLocation;\n\n if (!dropLocation) {\n \n return;\n }\n const dropTarget = dropLocation.target;\n const dropTargetName = dropLocation.target.componentName || \"\";\n\n \n const targetId = (dropLocation && dropLocation.target.id) || \"\";\n \n let slotTarget =\n currentNode.slots.length > 0 &&\n currentNode.slots.find(item => item.id === targetId);\n\n const layoutPNode = currentNode.document.createNode(layoutPSchema);\n\n \n const isAsideSlot =\n slotTarget && [\"aside\"].indexOf(slotTarget._slotFor.key) > -1;\n \n const isNeedPSlot =\n slotTarget &&\n [\"header\", \"footer\", \"nav\"].indexOf(slotTarget._slotFor.key) > -1;\n\n const wrapWithBlock = (dragment, node, dropTargetName, blockLen) => {\n setTimeout(() => {\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] need to wrap with NextBlock > NextBlockCell > NextP [from NextPage2]`\n );\n const newNode = node.document.createNode(\n layoutBlockNode(blockLen).schema\n );\n node.insertBefore(newNode, dragment, false);\n dragment.remove(false);\n newNode\n .getChildren()\n .get(0)\n .getChildren()\n .get(0)\n .getChildren()\n .get(0)\n .select();\n }, 1);\n };\n\n const wrapWithP = (dragment, node, dropTargetName) => {\n setTimeout(() => {\n \n \n if (dropTargetName === \"NextP\") {\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] does't need to wrap with NextP. [from NextPage3]`\n );\n return;\n }\n\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] need to wrap with NextP [from NextPage3]`\n );\n const newNode = node.document.createNode(\n Object.assign(layoutPNode.schema)\n );\n node.insertBefore(newNode, dragment, false);\n dragment.remove(false);\n newNode\n .getChildren()\n .get(0)\n .select();\n }, 1);\n };\n\n \n \n if (\n [\"NextPage\"].includes(dropTargetName) &&\n currentNode.getChildren().has(dragment)\n ) {\n wrapWithBlock(dragment, currentNode, dropTargetName, 12);\n\n \n \n } else if (\n isAsideSlot &&\n slotTarget &&\n slotTarget.getChildren().has(dragment)\n ) {\n wrapWithBlock(dragment, slotTarget, dropTargetName, 1);\n\n \n \n \n } else if (\n dropTarget.getPropValue(\"isAutoContainer\") ||\n dropTargetName === \"Tab.Item\"\n ) {\n wrapWithP(dragment, dropTarget, dropTargetName);\n\n \n \n } else if (isNeedPSlot && slotTarget) {\n wrapWithP(dragment, slotTarget, dropTargetName);\n }\n\n \n }" + } + } + }, + "icon": "", + "category": "容器" + }, + { + "componentName": "Dropdown", + "title": "下拉菜单", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Dropdown", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "pure", + "propType": "bool", + "defaultValue": false + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层当前是否显示" + }, + { + "name": "defaultVisible", + "propType": "bool", + "description": "弹层默认是否显示", + "defaultValue": false + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层显示或隐藏时触发的回调函数\n@param {Boolean} visible 弹层是否显示\n@param {String} type 触发弹层显示或隐藏的来源 fromContent 表示由Dropdown内容触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "triggerType", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "instanceOf", + "value": "array" + } + ] + }, + "description": "触发弹层显示或隐藏的操作类型，可以是 'click'，'hover'，或者它们组成的数组，如 ['hover', 'click']", + "defaultValue": "hover" + }, + { + "name": "disabled", + "propType": "bool", + "description": "设置此属性，弹层无法显示或隐藏", + "defaultValue": false + }, + { + "name": "align", + "propType": "string", + "description": "弹层相对于触发元素的定位, 详见 Overlay 的定位部分", + "defaultValue": "tl bl" + }, + { + "name": "offset", + "propType": { + "type": "instanceOf", + "value": "array" + }, + "description": "弹层相对于trigger的定位的微调, 接收数组[hoz, ver], 表示弹层在 left / top 上的增量\ne.g. [100, 100] 表示往右(RTL 模式下是往左) 、下分布偏移100px", + "defaultValue": [0, 0] + }, + { + "name": "delay", + "propType": "number", + "description": "弹层显示或隐藏的延时时间（以毫秒为单位），在 triggerType 被设置为 hover 时生效", + "defaultValue": 200 + }, + { + "name": "autoFocus", + "propType": "bool", + "description": "弹层打开时是否让其中的元素自动获取焦点" + }, + { + "name": "hasMask", + "propType": "bool", + "description": "是否显示遮罩", + "defaultValue": false + }, + { + "name": "cache", + "propType": "bool", + "description": "隐藏时是否保留子节点", + "defaultValue": false + }, + { + "name": "animation", + "propType": { + "type": "oneOfType", + "value": ["object", "bool"] + }, + "description": "配置动画的播放方式，支持 { in: 'enter-class', out: 'leave-class' } 的对象参数，如果设置为 false，则不播放动画\n@default { in: 'expandInDown', out: 'expandOutUp' }" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "trigger", + "title": { + "label": "触发元素", + "tip": "" + }, + "setter": "SlotSetter" + }, + { + "name": "animation", + "title": { + "label": "animation", + "tip": "配置动画的播放方式，支持 { in: 'enter-class', out: 'leave-class' } 的对象参数，如果设置为 false，则不播放动画\n@default { in: 'expandInDown', out: 'expandOutUp' }" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "in", + "description": "", + "setter": "StringSetter", + "defaultValue": "enter-class" + }, + { + "name": "out", + "description": "", + "setter": "StringSetter", + "defaultValue": "leave-class" + } + ] + } + }, + "initialValue": { + "in": "enter-class", + "out": "leave-class" + } + }, + { + "componentName": "BoolSetter", + "initialValue": true + } + ] + } + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "ErrorBoundary", + "title": "ErrorBoundary", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "ConfigProvider", + "main": "", + "destructuring": true, + "subName": "ErrorBoundary" + }, + "props": [ + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "element" + } + }, + { + "name": "afterCatch", + "propType": "func", + "description": "捕获错误后的自定义处理, 比如埋点上传\n@param {Object} error 错误\n@param {Object} errorInfo 错误详细信息" + }, + { + "name": "fallbackUI", + "propType": "func", + "description": "捕获错误后的展现 自定义组件\n@param {Object} error 错误\n@param {Object} errorInfo 错误详细信息\n@returns {Element} 捕获错误后的处理" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "Field", + "title": "Field", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Field", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "this", + "propType": "any" + } + ], + "category": "基础" + }, + { + "componentName": "Form.Error", + "title": "Form.Error", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Form", + "main": "", + "destructuring": true, + "subName": "Error" + }, + "props": [ + { + "name": "name", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "instanceOf", + "value": "array" + } + ] + }, + "description": "表单名" + }, + { + "name": "field", + "propType": "object", + "description": "自定义 field (在 Form 内不需要设置)" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "children", + "propType": { + "type": "oneOfType", + "value": [ + { + "type": "instanceOf", + "value": "node" + }, + "func" + ] + }, + "description": "自定义错误渲染, 可以是 node 或者 function(errors, state)" + }, + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + } + ], + "category": "基础" + }, + { + "componentName": "Form.Item", + "title": "表单项", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Form", + "main": "", + "destructuring": true, + "subName": "Item" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "label", + "propType": "string", + "description": "标签" + }, + { + "name": "labelCol", + "propType": { + "type": "shape", + "value": [ + { + "name": "span", + "description": "span", + "propType": "number" + }, + { + "name": "offset", + "description": "offset", + "propType": "number" + } + ] + }, + "description": "label 标签布局，通 `` 组件，设置 span offset 值，如 {span: 8, offset: 16}，该项仅在垂直表单有效" + }, + { + "name": "wrapperCol", + "propType": { + "type": "shape", + "value": [ + { + "name": "span", + "description": "span", + "propType": "number" + }, + { + "name": "offset", + "description": "offset", + "propType": "number" + } + ] + }, + "description": "需要为输入控件设置布局样式时，使用该属性，用法同 labelCol" + }, + { + "name": "help", + "title": { + "label": "自定义提示信息", + "tip": "如不设置，则会根据校验规则自动生成." + }, + "propType": "string", + "description": "自定义提示信息，如不设置，则会根据校验规则自动生成." + }, + { + "name": "extra", + "title": { + "label": "额外的提示信息", + "tip": "和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 位于错误信息后面" + }, + "propType": "string", + "description": "额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 位于错误信息后面" + }, + { + "name": "validateState", + "title": { + "label": "校验状态", + "tip": "如不设置，则会根据校验规则自动生成\n@enumdesc 失败, 成功, 校验中, 警告" + }, + "propType": { + "type": "oneOf", + "value": ["error", "success", "loading", "warning"] + }, + "description": "校验状态，如不设置，则会根据校验规则自动生成\n@enumdesc 失败, 成功, 校验中, 警告" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + }, + { + "name": "size", + "title": { + "label": "Size", + "tip": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。" + }, + "propType": { + "type": "oneOf", + "value": ["large", "small", "medium"] + }, + "description": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。" + }, + { + "name": "fullWidth", + "title": { + "label": "fullWidth", + "tip": "单个 Item 中表单类组件宽度是否是100%" + }, + "propType": "bool", + "description": "单个 Item 中表单类组件宽度是否是100%" + }, + { + "name": "labelAlign", + "title": { + "label": "标签的位置", + "tip": "上, 左, 内" + }, + "propType": { + "type": "oneOf", + "value": ["top", "left", "inset"] + }, + "description": "标签的位置\n@enumdesc 上, 左, 内" + }, + { + "name": "labelTextAlign", + "title": { + "label": "标签的左右对齐方式", + "tip": "左, 右" + }, + "propType": { + "type": "oneOf", + "value": ["left", "right"] + }, + "description": "标签的左右对齐方式\n@enumdesc 左, 右" + }, + { + "name": "className", + "propType": "string", + "description": "扩展class" + }, + { + "name": "required", + "title": { + "label": "不能为空", + "tip": "[表单校验] 不能为空" + }, + "propType": "bool", + "description": "[表单校验] 不能为空" + }, + { + "name": "requiredMessage", + "title": { + "label": "自定义错误信息", + "tip": "[表单校验]为空时自定义错误信息" + }, + "propType": "string", + "description": "required 自定义错误信息" + }, + { + "name": "min", + "title": { + "label": "最小值", + "tip": "[表单校验] 最小值" + }, + "propType": "number", + "description": "[表单校验] 最小值" + }, + { + "name": "max", + "title": { + "label": "最大值", + "tip": "[表单校验] 最大值" + }, + "propType": "number", + "description": "[表单校验] 最大值" + }, + { + "name": "minmaxMessage", + "title": { + "label": "min/max message", + "tip": "[表单校验] min/max 自定义错误信息" + }, + "propType": "string", + "description": "min/max 自定义错误信息" + }, + { + "name": "minLength", + "title": { + "label": "最小长度", + "tip": "[表单校验] 字符串最小长度 / 数组最小个数" + }, + "propType": "number", + "description": "[表单校验] 字符串最小长度 / 数组最小个数" + }, + { + "name": "maxLength", + "title": { + "label": "最大长度", + "tip": "[表单校验] 字符串最大长度 / 数组最大个数" + }, + "propType": "number", + "description": "[表单校验] 字符串最大长度 / 数组最大个数" + }, + { + "name": "minmaxLengthMessage", + "title": { + "label": "max|min length error message", + "tip": "[表单校验] minLength/maxLength 自定义错误信息" + }, + "propType": "string", + "description": "minLength/maxLength 自定义错误信息" + }, + { + "name": "length", + "title": { + "label": "长度", + "tip": "[表单校验] 字符串精确长度 / 数组精确个数" + }, + "propType": "number", + "description": "[表单校验] 字符串精确长度 / 数组精确个数" + }, + { + "name": "lengthMessage", + "title": { + "label": "length error message", + "tip": "[表单校验] minLength/maxLength 自定义错误信息" + }, + "propType": "string", + "description": "length 自定义错误信息" + }, + { + "name": "pattern", + "title": { + "label": "正则", + "tip": "[表单校验] 正则校验" + }, + "propType": "string", + "description": "正则校验" + }, + { + "name": "patternMessage", + "title": { + "label": "pattern error message", + "tip": "[表单校验] pattern 自定义错误信息" + }, + "propType": "string", + "description": "pattern 自定义错误信息" + }, + { + "name": "format", + "title": { + "label": "format", + "tip": "[表单校验] 四种常用的 pattern" + }, + "propType": { + "type": "oneOf", + "value": ["number", "email", "url", "tel"] + }, + "description": "[表单校验] 四种常用的 pattern" + }, + { + "name": "formatMessage", + "title": { + "label": "format error message", + "tip": "[表单校验] format 自定义错误信息" + }, + "propType": "string", + "description": "format 自定义错误信息" + }, + { + "name": "validator", + "propType": "func", + "description": "[表单校验] 自定义校验函数" + }, + { + "name": "autoValidate", + "propType": "bool", + "description": "是否修改数据时自动触发校验" + }, + { + "name": "device", + "propType": { + "type": "oneOf", + "value": ["phone", "tablet", "desktop"] + }, + "description": "预设屏幕宽度" + }, + { + "name": "responsive", + "propType": "bool" + }, + { + "name": "colSpan", + "propType": "number", + "description": "在响应式布局模式下，表单项占多少列" + }, + { + "name": "labelWidth", + "propType": { + "type": "oneOfType", + "value": ["string", "number"] + }, + "description": "在响应式布局下，且label在左边时，label的宽度是多少", + "defaultValue": 100 + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否开启预览态" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["Form"] + } + }, + "supports": { + "style": true + }, + "props": [ + { + "name": "label", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签文本", + "en_US": "Label" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: label | 说明: 标签文本内容", + "en_US": "prop: label | description: label content" + } + }, + "setter": "StringSetter", + "description": "标签" + }, + { + "name": "help", + "title": { + "label": { + "type": "i18n", + "zh_CN": "错误提示", + "en_US": "Help Info" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: help | 说明: 自定义提示信息, 如不设置，则会根据校验规则自动生成.", + "en_US": "prop: help | description: help infomation" + } + }, + "setter": "StringSetter", + "description": "自定义提示信息，如不设置，则会根据校验规则自动生成." + }, + { + "name": "extra", + "title": { + "label": { + "type": "i18n", + "zh_CN": "帮助提示", + "en_US": "Extra Info" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: extra | 说明: 额外的提示信息, 和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 位于错误信息后面", + "en_US": "prop: extra | description: extra infomation" + } + }, + "setter": "StringSetter" + }, + { + "name": "validateState", + "title": { + "label": "校验状态", + "tip": "如不设置，则会根据校验规则自动生成\n@enumdesc 失败, 成功, 校验中, 警告" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["error", "success", "loading", "warning"] + } + } + }, + { + "name": "size", + "title": { + "label": "尺寸", + "tip": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "defaultValue": "medium" + }, + { + "name": "labelAlign", + "title": { + "label": "标签位置", + "tip": "上, 左, 内" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["top", "left", "inset"] + } + }, + "defaultValue": "left" + }, + { + "name": "labelTextAlign", + "title": { + "label": "标签对齐", + "tip": "左, 右" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["left", "right"] + } + }, + "defaultValue": "left" + }, + { + "name": "device", + "title": { + "label": "设备" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["phone", "tablet", "desktop"] + } + }, + "defaultValue": "desktop" + }, + { + "name": "fullWidth", + "title": { + "label": "宽度占满", + "tip": "单个 Item 中表单类组件宽度是否是100%" + }, + "setter": "BoolSetter", + "description": "单个 Item 中表单类组件宽度是否是100%" + }, + { + "name": "isPreview", + "title": { + "label": "预览态" + }, + "setter": "BoolSetter", + "description": "是否开启预览态" + }, + { + "name": "autoValidate", + "title": { + "label": "自动校验" + }, + "setter": "BoolSetter", + "description": "是否修改数据时自动触发校验" + }, + { + "type": "group", + "display": "accordion", + "title": "校验", + "items": [ + { + "type": "group", + "display": "popup", + "title": "非空校验", + "items": [ + { + "name": "required", + "title": { + "label": "不能为空", + "tip": "[表单校验] 不能为空" + }, + "setter": "BoolSetter", + "description": "[表单校验] 不能为空" + }, + { + "name": "requiredMessage", + "title": { + "label": "错误信息", + "tip": "[表单校验]为空时自定义错误信息" + }, + "setter": "StringSetter", + "description": "required 自定义错误信息" + } + ] + }, + { + "type": "group", + "display": "popup", + "title": "最大/最小值校验", + "items": [ + { + "name": "min", + "title": { + "label": "最小值", + "tip": "[表单校验] 最小值" + }, + "setter": "NumberSetter", + "description": "[表单校验] 最小值" + }, + { + "name": "max", + "title": { + "label": "最大值", + "tip": "[表单校验] 最大值" + }, + "setter": "NumberSetter", + "description": "[表单校验] 最大值" + }, + { + "name": "minmaxMessage", + "title": { + "label": "错误信息", + "tip": "[表单校验] min/max 自定义错误信息" + }, + "setter": "StringSetter" + } + ] + }, + { + "type": "group", + "display": "popup", + "title": "最大/最小长度校验", + "items": [ + { + "name": "minLength", + "title": { + "label": "最小长度", + "tip": "[表单校验] 字符串最小长度 / 数组最小个数" + }, + "setter": "NumberSetter", + "description": "[表单校验] 字符串最小长度 / 数组最小个数" + }, + { + "name": "maxLength", + "title": { + "label": "最大长度", + "tip": "[表单校验] 字符串最大长度 / 数组最大个数" + }, + "setter": "NumberSetter", + "description": "[表单校验] 字符串最大长度 / 数组最大个数" + }, + { + "name": "minmaxLengthMessage", + "title": { + "label": "错误信息", + "tip": "[表单校验] minLength/maxLength 自定义错误信息" + }, + "setter": "StringSetter", + "description": "minLength/maxLength 自定义错误信息" + } + ] + }, + { + "type": "group", + "display": "popup", + "title": "长度校验", + "items": [ + { + "name": "length", + "title": { + "label": "长度", + "tip": "[表单校验] 字符串精确长度 / 数组精确个数" + }, + "setter": "NumberSetter", + "description": "[表单校验] 字符串精确长度 / 数组精确个数" + }, + { + "name": "lengthMessage", + "title": { + "label": "错误信息", + "tip": "[表单校验] minLength/maxLength 自定义错误信息" + }, + "setter": "StringSetter", + "description": "length 自定义错误信息" + } + ] + }, + { + "type": "group", + "display": "popup", + "title": "正则校验", + "items": [ + { + "name": "pattern", + "title": { + "label": "正则", + "tip": "[表单校验] 正则校验" + }, + "setter": "StringSetter", + "description": "正则校验" + }, + { + "name": "patternMessage", + "title": { + "label": "错误信息", + "tip": "[表单校验] pattern 自定义错误信息" + }, + "setter": "StringSetter", + "description": "pattern 自定义错误信息" + } + ] + }, + { + "type": "group", + "display": "popup", + "title": "格式化校验", + "items": [ + { + "name": "format", + "title": { + "label": "format", + "tip": "[表单校验] 四种常用的 pattern" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["number", "email", "url", "tel"] + } + }, + "description": "[表单校验] 四种常用的 pattern" + }, + { + "name": "formatMessage", + "title": { + "label": "错误信息", + "tip": "[表单校验] format 自定义错误信息" + }, + "setter": "StringSetter", + "description": "format 自定义错误信息" + } + ] + }, + { + "name": "validator", + "display": "popup", + "title": { + "label": "自定义校验函数" + }, + "setter": "FunctionSetter", + "description": "[表单校验] 自定义校验函数" + } + ] + }, + { + "type": "group", + "title": "布局", + "display": "accordion", + "items": [ + { + "name": "labelCol", + "display": "inline", + "setter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "span", + "description": "span", + "setter": "NumberSetter" + }, + { + "name": "offset", + "description": "offset", + "setter": "NumberSetter" + } + ] + } + } + }, + "description": "label 标签布局，通 `` 组件，设置 span offset 值，如 {span: 8, offset: 16}，该项仅在垂直表单有效" + }, + { + "name": "wrapperCol", + "display": "inline", + "setter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "span", + "description": "span", + "setter": "NumberSetter" + }, + { + "name": "offset", + "description": "offset", + "setter": "NumberSetter" + } + ] + } + } + }, + "description": "需要为输入控件设置布局样式时，使用该属性，用法同 labelCol" + } + ] + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ] + }, + "experimental": { + "callbacks": { + "onNodeRemove": { + "type": "JSFunction", + "value": "(removedNode, currentNode) => {\n if (!removedNode || !currentNode) {\n return;\n }\n const children = currentNode.children;\n \n if (children && children.length === 0) {\n currentNode.remove();\n }\n }" + } + } + }, + "icon": "https://img.alicdn.com/tfs/TB1nYqOuW61gK0jSZFlXXXDKFXa-112-64.png", + "category": "内容" + }, + { + "componentName": "Form.Reset", + "title": "重置按钮", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Form", + "main": "", + "destructuring": true, + "subName": "Reset" + }, + "props": [ + { + "name": "onClick", + "propType": "func", + "description": "点击提交后触发" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "children", + "title": "内容", + "propType": "string" + }, + { + "name": "icon", + "propType": "string", + "description": "自定义内联样式" + }, + { + "name": "type", + "title": "类型", + "propType": { + "type": "oneOf", + "value": ["primary", "secondary", "normal"] + }, + "description": "按钮的类型", + "defaultValue": "normal" + }, + { + "name": "size", + "title": "尺寸", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "按钮的尺寸", + "defaultValue": "medium" + }, + { + "name": "iconSize", + "title": "Icon 尺寸", + "propType": { + "type": "oneOf", + "value": ["xxs", "xs", "small", "medium", "large", "xl", "xxl", "xxxl"] + }, + "defaultValue": "small", + "description": "按钮中 Icon 的尺寸，用于替代 Icon 的默认大小" + }, + { + "name": "ghost", + "title": "ghost", + "propType": { + "type": "oneOf", + "value": [true, false, "light", "dark"] + }, + "description": "是否为幽灵按钮", + "defaultValue": false + }, + { + "name": "toDefault", + "propType": "bool", + "description": "返回默认值" + }, + { + "name": "loading", + "title": "loading", + "propType": "bool", + "description": "设置按钮的载入状态", + "defaultValue": false + }, + { + "name": "text", + "title": "text", + "propType": "bool", + "description": "是否为文本按钮", + "defaultValue": false + }, + { + "name": "warning", + "title": "warning", + "propType": "bool", + "description": "是否为警告按钮", + "defaultValue": false + }, + { + "name": "disabled", + "title": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "onMouseUp", + "propType": "func" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "icon", + "setter": "IconSetter", + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n target.nodes[0].children.import(value && {\"componentName\": \"Icon\", \"props\": {\"type\": value, \"style\": {\"marginRight\": 5}}}, true);\n }" + } + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文本内容", + "en_US": "content" + }, + "tip": "按钮文本内容" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + } + } + ] + } + }, + "category": "基础" + }, + { + "componentName": "Form.Submit", + "title": "提交按钮", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Form", + "main": "", + "destructuring": true, + "subName": "Submit" + }, + "props": [ + { + "name": "onClick", + "propType": "func", + "description": "点击提交后触发\n@param {Object} value 数据\n@param {Object} errors 错误数据\n@param {class} field 实例" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "children", + "title": "内容", + "propType": "string" + }, + { + "name": "icon", + "propType": "string", + "description": "自定义内联样式" + }, + { + "name": "type", + "title": "类型", + "propType": { + "type": "oneOf", + "value": ["primary", "secondary", "normal"] + }, + "description": "按钮的类型", + "defaultValue": "normal" + }, + { + "name": "size", + "title": "尺寸", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "按钮的尺寸", + "defaultValue": "medium" + }, + { + "name": "iconSize", + "title": "Icon 尺寸", + "propType": { + "type": "oneOf", + "value": ["xxs", "xs", "small", "medium", "large", "xl", "xxl", "xxxl"] + }, + "defaultValue": "small", + "description": "按钮中 Icon 的尺寸，用于替代 Icon 的默认大小" + }, + { + "name": "ghost", + "title": "ghost", + "propType": { + "type": "oneOf", + "value": [true, false, "light", "dark"] + }, + "description": "是否为幽灵按钮", + "defaultValue": false + }, + { + "name": "validate", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否校验", + "en_US": "Validate" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: validate | 说明: 是否校验/需要校验的 name 数组", + "en_US": "prop: validate | description: validate or validate array" + } + }, + "propType": { + "type": "oneOfType", + "value": [ + "bool", + { + "type": "instanceOf", + "value": "array" + } + ] + }, + "description": "是否校验/需要校验的 name 数组" + }, + { + "name": "loading", + "title": "loading", + "propType": "bool", + "description": "设置按钮的载入状态", + "defaultValue": false + }, + { + "name": "text", + "title": "text", + "propType": "bool", + "description": "是否为文本按钮", + "defaultValue": false + }, + { + "name": "warning", + "title": "warning", + "propType": "bool", + "description": "是否为警告按钮", + "defaultValue": false + }, + { + "name": "disabled", + "title": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "onMouseUp", + "propType": "func" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "disabled", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["ExpressionSetter", "BoolSetter"] + } + } + }, + { + "name": "icon", + "setter": "IconSetter", + "extraProps": { + "defaultValue": "", + "onChange": { + "type": "JSFunction", + "value": "(val, field, editor) => {\n field.nodes[0].children.import(val && {\"componentName\": \"Icon\", \"props\": {\"type\": val, \"style\": {\"marginRight\": 5}}}, true); //field.top.setPropValue('children', [{\"componentName\": \"Icon\", \"props\": {\"type\": val}}, (field.top.getPropValue('children') || []).slice(-1)]);\n}" + } + } + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文本内容", + "en_US": "content" + }, + "tip": "按钮文本内容" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + } + } + ] + } + }, + "experimental": { + "initials": [ + { + "name": "htmlType", + "initial": { + "type": "JSFunction", + "value": "() => \"submit\"" + } + } + ] + }, + "category": "基础" + }, + { + "componentName": "Form", + "title": "表单容器", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Form", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "inline", + "propType": "bool", + "description": "内联表单" + }, + { + "name": "size", + "title": { + "label": "Size", + "tip": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。\n@enumdesc 大, 中, 小" + }, + "propType": { + "type": "oneOf", + "value": ["large", "medium", "small"] + }, + "description": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。\n@enumdesc 大, 中, 小", + "defaultValue": "medium" + }, + { + "name": "fullWidth", + "propType": "bool", + "description": "单个 Item 中表单类组件宽度是否是100%" + }, + { + "name": "labelAlign", + "title": { + "label": "标签的位置", + "tip": "上, 左, 内" + }, + "propType": { + "type": "oneOf", + "value": ["top", "left", "inset"] + }, + "description": "标签的位置\n@enumdesc 上, 左, 内", + "defaultValue": "left" + }, + { + "name": "labelTextAlign", + "propType": { + "type": "oneOf", + "value": ["left", "right"] + }, + "description": "标签的左右对齐方式\n@enumdesc 左, 右" + }, + { + "name": "onSubmit", + "propType": "func", + "description": "form内有 `htmlType=\"submit\"` 的元素的时候会触发" + }, + { + "name": "className", + "propType": "string", + "description": "扩展class" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + }, + { + "name": "value", + "propType": { + "type": "oneOfType", + "value": ["Json", "JSExpression"] + }, + "description": "表单数值" + }, + { + "name": "onChange", + "propType": "func", + "description": "表单变化回调\n@param {Object} values 表单数据\n@param {Object} item 详细\n@param {String} item.name 变化的组件名\n@param {String} item.value 变化的数据\n@param {Object} item.field field 实例" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "device", + "propType": { + "type": "oneOf", + "value": ["phone", "tablet", "desktop"] + }, + "description": "预设屏幕宽度", + "defaultValue": "desktop" + }, + { + "name": "responsive", + "propType": "bool", + "description": "是否开启内置的响应式布局 （使用ResponsiveGrid）" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否开启预览态" + }, + { + "name": "field", + "propType": "any", + "description": "field 实例" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": [ + { + "name": "inline", + "title": { + "label": { + "type": "i18n", + "zh_CN": "内联表单", + "en_US": "Inline" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: inline | 说明: 内联表单", + "en_US": "prop: inline | description: inline form" + } + }, + "setter": "BoolSetter" + }, + { + "name": "fullWidth", + "title": { + "label": { + "type": "i18n", + "zh_CN": "宽度占满", + "en_US": "FullWidth" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: fullWidth | 说明: 单个 Item 中表单类组件宽度是否是100%", + "en_US": "prop: fullWidth | description: full width" + } + }, + "setter": "BoolSetter" + }, + { + "name": "isPreview", + "title": { + "label": { + "type": "i18n", + "zh_CN": "预览态", + "en_US": "Preview Mode" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: isPreview | 说明: 是否开启预览态", + "en_US": "prop: isPreview | description: preview mode" + } + }, + "setter": "BoolSetter", + "description": "是否开启预览态" + }, + { + "name": "field", + "title": { + "label": { + "type": "i18n", + "zh_CN": "Field 实例", + "en_US": "Field" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: field | 说明: 传入 Field 实例", + "en_US": "prop: field | description: field instance" + }, + "docUrl": "https://fusion.alibaba-inc.com/pc/component/basic/form#%E5%A4%8D%E6%9D%82%E5%8A%9F%E8%83%BD(Field)" + }, + "setter": { + "componentName": "ExpressionSetter" + } + }, + { + "name": "value", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单值", + "en_US": "value" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: value | 说明: 表单值", + "en_US": "prop: value | description: value instance" + } + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["JsonSetter", "ExpressionSetter"] + } + } + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。\n@enumdesc 大, 中, 小", + "en_US": "prop: size | description: size" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["large", "medium", "small"] + } + }, + "description": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。\n@enumdesc 大, 中, 小", + "defaultValue": "medium" + }, + { + "name": "labelAlign", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签位置", + "en_US": "Label Align" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: labelAlign | 说明: 标签的位置\n@enumdesc 上, 左, 内", + "en_US": "prop: labelAlign | description: label align" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["top", "left", "inset"] + } + }, + "defaultValue": "left" + }, + { + "name": "labelTextAlign", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签对齐", + "en_US": "Text Align" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: labelTextAlign | 说明: 标签的左右对齐方式\n@enumdesc 左, 右", + "en_US": "prop: labelTextAlign | description: label text align" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["left", "right"] + } + }, + "defaultValue": "left" + }, + { + "name": "device", + "title": { + "label": { + "type": "i18n", + "zh_CN": "设备", + "en_US": "Device" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: device | 说明: 预设屏幕宽度", + "en_US": "prop: device | description: device" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["phone", "tablet", "desktop"] + } + }, + "defaultValue": "desktop" + } + ], + "supports": { + "style": true, + "events": ["saveField", "onSubmit", "onChange"] + } + }, + "experimental": { + "callbacks": { + "onNodeAdd": { + "type": "JSFunction", + "value": "(dragment, currentNode) => {\n \n if (!dragment || dragment.componentName === \"Form.Item\") {\n return;\n }\n \n const layoutPNode = currentNode.document.createNode({\n componentName: \"Form.Item\",\n title: \"表单项\",\n props: {\n label: \"表单项: \"\n },\n children: [dragment.schema]\n });\n \n setTimeout(() => {\n if (!currentNode.getChildren().has(dragment)) {\n return;\n }\n const newNode = currentNode.document.createNode(Object.assign(layoutPNode.schema));\n currentNode.insertBefore(newNode, dragment, false);\n dragment.remove(false);\n newNode.getChildren().get(0).select();\n }, 1);\n }" + } + } + }, + "icon": "https://img.alicdn.com/tfs/TB1oH02u2b2gK0jSZK9XXaEgFXa-112-64.png", + "category": "内容" + }, + { + "componentName": "Group", + "title": "Group", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Nav", + "main": "", + "destructuring": true, + "subName": "Group" + }, + "props": [ + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "label", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "标签内容" + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "导航项和子导航" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "Icon", + "title": "图标", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Icon", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "type", + "propType": "string", + "description": "指定显示哪种图标" + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "图标尺寸", + "en_US": "Icon Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 指定图标大小", + "en_US": "prop: size | description: icon size" + } + }, + "propType": { + "type": "oneOfType", + "value": [ + { + "type": "oneOf", + "value": ["xxs", "xs", "small", "medium", "large", "xl", "xxl", "xxxl", "inherit"] + }, + "number" + ] + }, + "description": "指定图标大小", + "defaultValue": "medium" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "type", + "title": { + "label": { + "type": "i18n", + "zh_CN": "图标类型", + "en_US": "Icon" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: type | 说明: 图标类型", + "en_US": "prop: type | description: icon type" + } + }, + "setter": { + "componentName": "IconSetter", + "props": { + "hasClear": false + } + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Image", + "title": "图片", + "npm": { + "package": "@alifd/ali-lowcode-components", + "version": "latest", + "exportName": "Image", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "src", + "title": { + "label": { + "type": "i18n", + "zh_CN": "图片链接", + "en_US": "Image Address" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: src | 说明: 图片链接", + "en_US": "prop: src | description: image address" + } + }, + "propType": "string", + "defaultValue": "https://img.alicdn.com/tps/TB16TQvOXXXXXbiaFXXXXXXXXXX-120-120.svg" + }, + { + "name": "title", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标题", + "en_US": "Title" + } + }, + "propType": "string" + }, + { + "name": "alt", + "title": { + "label": { + "type": "i18n", + "zh_CN": "代替文本", + "en_US": "Alt" + } + }, + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "icon": "", + "category": "常用" + }, + { + "componentName": "Inner", + "title": "Inner", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Dialog", + "main": "", + "destructuring": true, + "subName": "Inner" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "title", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "footer", + "propType": { + "type": "oneOfType", + "value": [ + "bool", + { + "type": "instanceOf", + "value": "node" + } + ] + } + }, + { + "name": "footerAlign", + "propType": { + "type": "oneOf", + "value": ["left", "center", "right"] + }, + "defaultValue": "right" + }, + { + "name": "footerActions", + "propType": { + "type": "instanceOf", + "value": "array" + }, + "defaultValue": ["ok", "cancel"] + }, + { + "name": "onOk", + "propType": "func" + }, + { + "name": "onCancel", + "propType": "func" + }, + { + "name": "okProps", + "propType": "object" + }, + { + "name": "cancelProps", + "propType": "object" + }, + { + "name": "closeable", + "propType": "bool", + "defaultValue": true + }, + { + "name": "onClose", + "propType": "func" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "role", + "propType": "string", + "defaultValue": "dialog" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "height", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "Input.Group", + "title": "Input.Group", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Input", + "main": "", + "destructuring": true, + "subName": "Group" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "description": "样式前缀", + "defaultValue": "next-" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "addonBefore", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "输入框前附加内容" + }, + { + "name": "addonBeforeClassName", + "propType": "string", + "description": "输入框前附加内容css" + }, + { + "name": "addonAfter", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "输入框后附加内容" + }, + { + "name": "addonAfterClassName", + "propType": "string", + "description": "输入框后额外css" + }, + { + "name": "rtl", + "propType": "bool", + "description": "rtl" + } + ], + "category": "基础" + }, + { + "componentName": "Input.Password", + "title": "密码框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Input", + "main": "", + "destructuring": true, + "subName": "Password" + }, + "props": [ + { + "name": "name", + "propType": "string" + }, + { + "name": "showToggle", + "propType": "bool", + "description": "是否展示切换按钮", + "defaultValue": true + }, + { + "name": "label", + "propType": "string", + "title": "标签文案", + "description": "label" + }, + { + "name": "hasClear", + "propType": "bool", + "description": "是否出现清除按钮" + }, + { + "name": "state", + "title": "状态", + "propType": { + "type": "oneOf", + "value": ["error", "loading", "success", "warning"] + }, + "description": "状态\n@enumdesc 错误, 校验中, 成功, 警告" + }, + { + "name": "size", + "title": "尺寸", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "尺寸\n@enumdesc 小, 中, 大", + "defaultValue": "medium" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "maxLength", + "propType": "number", + "description": "最大长度" + }, + { + "name": "hasLimitHint", + "propType": "bool", + "description": "是否展现最大长度样式" + }, + { + "name": "cutString", + "propType": "bool", + "description": "是否截断超出字符串" + }, + { + "name": "readOnly", + "propType": "bool", + "description": "是否只读" + }, + { + "name": "trim", + "propType": "bool", + "description": "onChange返回会自动去除头尾空字符" + }, + { + "name": "placeholder", + "propType": "string", + "description": "输入提示" + }, + { + "name": "hasBorder", + "propType": "bool", + "description": "是否有边框" + }, + { + "name": "onPressEnter", + "propType": "func", + "description": "按下回车的回调" + }, + { + "name": "onClear", + "propType": "func" + }, + { + "name": "onChange", + "propType": "func" + }, + { + "name": "onKeyDown", + "propType": "func" + }, + { + "name": "onFocus", + "propType": "func" + }, + { + "name": "onBlur", + "propType": "func" + }, + { + "name": "hint", + "title": "Icon 水印", + "propType": "string", + "description": "水印 (Icon的type类型，和hasClear占用一个地方)" + }, + { + "name": "innerBefore", + "propType": "string", + "description": "文字前附加内容" + }, + { + "name": "innerAfter", + "propType": "string", + "description": "文字后附加内容" + }, + { + "name": "addonBefore", + "propType": "string", + "description": "输入框前附加内容" + }, + { + "name": "addonAfter", + "propType": "string", + "description": "输入框后附加内容" + }, + { + "name": "addonTextBefore", + "propType": "string", + "description": "输入框前附加文字" + }, + { + "name": "addonTextAfter", + "propType": "string", + "description": "输入框后附加文字" + }, + { + "name": "autoFocus", + "propType": "bool", + "description": "自动聚焦" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": [ + { + "name": "label", + "setter": "StringSetter", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签文本", + "en_US": "Label" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: label | 说明: 标签文本内容", + "en_US": "prop: label | description: label content" + } + }, + "description": "label" + }, + { + "name": "maxLength", + "title": { + "label": { + "type": "i18n", + "zh_CN": "最大长度", + "en_US": "MaxLength" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: maxLength | 说明: 最大长度", + "en_US": "prop: maxLength | description: max length" + } + }, + "setter": "NumberSetter", + "description": "最大长度" + }, + { + "name": "placeholder", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入提示", + "en_US": "Placeholder" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: placeholder | 说明: 输入提示", + "en_US": "prop: placeholder | description: placeholder" + } + }, + "setter": "StringSetter" + }, + { + "name": "state", + "title": { + "label": { + "type": "i18n", + "zh_CN": "状态", + "en_US": "State" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: state | 说明: 状态\n@enumdesc 错误, 校验中, 成功, 警告", + "en_US": "prop: state | description: input state" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["error", "loading", "success", "warning"] + } + } + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 尺寸\n@enumdesc 小, 中, 大", + "en_US": "prop: size | description: size" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "defaultValue": "medium" + }, + { + "name": "showToggle", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示切换", + "en_US": "Show Togger" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: showToggle | 说明: 是否展示切换按钮", + "en_US": "prop: showToggle | description: show togger icon" + } + }, + "setter": "BoolSetter", + "defaultValue": true + }, + { + "name": "hasClear", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示清除", + "en_US": "Show Clear" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasClear | 说明: 是否出现清除按钮", + "en_US": "prop: hasClear | description: show clear icon" + } + }, + "setter": "BoolSetter", + "description": "是否出现清除按钮" + }, + { + "name": "disabled", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否禁用", + "en_US": "Disabled" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: disabled | 说明: 是否被禁用", + "en_US": "prop: disabled | description: disabled" + } + }, + "setter": "BoolSetter", + "description": "是否禁用" + }, + { + "name": "hasLimitHint", + "title": { + "label": { + "type": "i18n", + "zh_CN": "展示限制", + "en_US": "ShowLimit" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasLimitHint | 说明: 是否展现最大长度样式", + "en_US": "prop: hasLimitHint | description: hasLimitHint" + } + }, + "setter": "BoolSetter", + "description": "是否展现最大长度样式" + }, + { + "name": "cutString", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否截断", + "en_US": "Cut Off" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: cutString | 说明: 是否截断超出字符串", + "en_US": "prop: cutString | description: whether cut off string" + } + }, + "setter": "BoolSetter", + "description": "是否截断超出字符串" + }, + { + "name": "readOnly", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否只读", + "en_US": "ReadOnly" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: readOnly | 说明: 是否只读", + "en_US": "prop: readOnly | description: ReadOnly" + } + }, + "setter": "BoolSetter", + "description": "是否只读" + }, + { + "name": "trim", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否 Trim", + "en_US": "Trim" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: trim | 说明: onChange返回会自动去除头尾空字符", + "en_US": "prop: trim | description: whether trim when onChange called" + } + }, + "setter": "BoolSetter" + }, + { + "name": "hasBorder", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示边框", + "en_US": "ShowBorder" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasBorder | 说明: 是否有边框", + "en_US": "prop: hasBorder | description: HasBorder" + } + }, + "setter": "BoolSetter" + }, + { + "name": "autoFocus", + "title": { + "label": { + "type": "i18n", + "zh_CN": "自动聚焦", + "en_US": "Auto Focus" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: autoFocus | 说明: 自动聚焦", + "en_US": "prop: autoFocus | description: autoFocus" + } + }, + "setter": "BoolSetter", + "description": "自动聚焦" + }, + { + "name": "hint", + "title": { + "label": { + "type": "i18n", + "zh_CN": "Icon 水印", + "en_US": "IconHint" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hint | 说明: Icon 水印", + "en_US": "prop: hint | description: Icon hint" + } + }, + "setter": { + "componentName": "IconSetter" + } + }, + { + "name": "innerBefore", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文字前附加内容", + "en_US": "Inner Before" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: innerBefore | 说明: 文字前附加内容", + "en_US": "prop: innerBefore | description: innerBefore" + } + }, + "setter": "StringSetter" + }, + { + "name": "innerAfter", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文字后附加内容", + "en_US": "Inner After" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: innerAfter | 说明: 文字后附加内容", + "en_US": "prop: innerAfter | description: innerAfter" + } + }, + "setter": "StringSetter" + }, + { + "name": "addonBefore", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入框前附加内容", + "en_US": "Addon Before" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: addonBefore | 说明: 输入框前附加内容", + "en_US": "prop: addonBefore | description: addonBefore" + } + }, + "setter": "StringSetter" + }, + { + "name": "addonAfter", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入框后附加内容", + "en_US": "Addon After" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: addonAfter | 说明: 输入框后附加内容", + "en_US": "prop: addonAfter | description: addonAfter" + } + }, + "setter": "StringSetter" + }, + { + "name": "addonTextBefore", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入框前附加文字", + "en_US": "Text Before" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: addonTextBefore | 说明: 输入框前附加文字", + "en_US": "prop: addonTextBefore | description: addonTextBefore" + } + }, + "setter": "StringSetter" + }, + { + "name": "addonTextAfter", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入框后附加文字", + "en_US": "Text After" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: addonTextAfter | 说明: 输入框后附加文字", + "en_US": "prop: addonTextAfter | description: addonTextAfter" + } + }, + "setter": "StringSetter" + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ], + "supports": { + "style": true, + "events": ["onPressEnter", "onClear", "onChange", "onKeyDown", "onFocus", "onBlur"] + } + }, + "category": "基础" + }, + { + "componentName": "Input.TextArea", + "title": "多行文本框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Input", + "main": "", + "destructuring": true, + "subName": "TextArea" + }, + "props": [ + { + "name": "hasBorder", + "propType": "bool", + "description": "是否有边框", + "defaultValue": true + }, + { + "name": "state", + "propType": { + "type": "oneOf", + "value": ["error", "warning"] + }, + "description": "状态\n@enumdesc 错误" + }, + { + "name": "autoHeight", + "propType": "bool", + "description": "自动高度 true / {minRows: 2, maxRows: 4}", + "defaultValue": false + }, + { + "name": "rows", + "propType": "number", + "description": "多行文本框高度
(不要直接用height设置多行文本框的高度, ie9 10会有兼容性问题)", + "defaultValue": 4 + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态", + "defaultValue": false + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "onClear", + "propType": "func" + }, + { + "name": "onChange", + "propType": "func" + }, + { + "name": "onKeyDown", + "propType": "func" + }, + { + "name": "onFocus", + "propType": "func" + }, + { + "name": "onBlur", + "propType": "func" + } + ], + "configure": { + "props": [ + { + "name": "rows", + "title": { + "label": { + "type": "i18n", + "zh_CN": "行数", + "en_US": "Rows" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: rows | 说明: 多行文本框高度
(不要直接用height设置多行文本框的高度, ie9 10会有兼容性问题)", + "en_US": "prop: rows | description: row numbers" + } + }, + "setter": "NumberSetter", + "defaultValue": 4 + }, + { + "name": "maxLength", + "title": { + "label": { + "type": "i18n", + "zh_CN": "最大长度", + "en_US": "MaxLength" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: maxLength | 说明: 最大长度", + "en_US": "prop: maxLength | description: max length" + } + }, + "setter": "NumberSetter", + "description": "最大长度" + }, + { + "name": "placeholder", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入提示", + "en_US": "Placeholder" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: placeholder | 说明: 输入提示", + "en_US": "prop: placeholder | description: placeholder" + } + }, + "setter": "StringSetter" + }, + { + "name": "state", + "title": { + "label": { + "type": "i18n", + "zh_CN": "状态", + "en_US": "State" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: state | 说明: 状态\n@enumdesc 错误", + "en_US": "prop: state | description: input state" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["error", "warning"] + } + } + }, + { + "name": "autoHeight", + "title": { + "label": { + "type": "i18n", + "zh_CN": "自动高度", + "en_US": "Auto Height" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: autoHeight | 说明: 自动高度 true / {minRows: 2, maxRows: 4}", + "en_US": "prop: autoHeight | description: auto height" + } + }, + "setter": "BoolSetter", + "defaultValue": false + }, + { + "name": "isPreview", + "title": { + "label": { + "type": "i18n", + "zh_CN": "预览态", + "en_US": "Preview" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: isPreview | 说明: 是否为预览态", + "en_US": "prop: isPreview | description: preview" + } + }, + "setter": "BoolSetter", + "defaultValue": false + }, + { + "name": "disabled", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否禁用", + "en_US": "Disabled" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: disabled | 说明: 是否被禁用", + "en_US": "prop: disabled | description: disabled" + } + }, + "setter": "BoolSetter", + "description": "是否禁用" + }, + { + "name": "hasLimitHint", + "title": { + "label": { + "type": "i18n", + "zh_CN": "展示限制", + "en_US": "ShowLimit" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasLimitHint | 说明: 是否展现最大长度样式", + "en_US": "prop: hasLimitHint | description: hasLimitHint" + } + }, + "setter": "BoolSetter", + "description": "是否展现最大长度样式" + }, + { + "name": "cutString", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否截断", + "en_US": "Cut Off" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: cutString | 说明: 是否截断超出字符串", + "en_US": "prop: cutString | description: whether cut off string" + } + }, + "setter": "BoolSetter", + "description": "是否截断超出字符串" + }, + { + "name": "readOnly", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否只读", + "en_US": "ReadOnly" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: readOnly | 说明: 是否只读", + "en_US": "prop: readOnly | description: ReadOnly" + } + }, + "setter": "BoolSetter", + "description": "是否只读" + }, + { + "name": "trim", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否 Trim", + "en_US": "Trim" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: trim | 说明: onChange返回会自动去除头尾空字符", + "en_US": "prop: trim | description: whether trim when onChange called" + } + }, + "setter": "BoolSetter" + }, + { + "name": "hasBorder", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示边框", + "en_US": "ShowBorder" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasBorder | 说明: 是否有边框", + "en_US": "prop: hasBorder | description: HasBorder" + } + }, + "setter": "BoolSetter" + }, + { + "name": "autoFocus", + "title": { + "label": { + "type": "i18n", + "zh_CN": "自动聚焦", + "en_US": "Auto Focus" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: autoFocus | 说明: 自动聚焦", + "en_US": "prop: autoFocus | description: autoFocus" + } + }, + "setter": "BoolSetter", + "description": "自动聚焦" + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ], + "supports": { + "style": true, + "events": ["onPressEnter", "onClear", "onChange", "onKeyDown", "onFocus", "onBlur"] + } + }, + "category": "基础" + }, + { + "componentName": "Input", + "title": "输入框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Input", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "label", + "propType": "string", + "title": "标签文案", + "description": "label" + }, + { + "name": "id", + "propType": "string", + "description": "ID" + }, + { + "name": "name", + "propType": "string" + }, + { + "name": "hasClear", + "propType": "bool", + "description": "是否出现清除按钮" + }, + { + "name": "state", + "title": "状态", + "propType": { + "type": "oneOf", + "value": ["error", "loading", "success", "warning"] + }, + "description": "状态\n@enumdesc 错误, 校验中, 成功, 警告" + }, + { + "name": "size", + "title": "尺寸", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "尺寸\n@enumdesc 小, 中, 大", + "defaultValue": "medium" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "maxLength", + "propType": "number", + "description": "最大长度" + }, + { + "name": "hasLimitHint", + "propType": "bool", + "description": "是否展现最大长度样式" + }, + { + "name": "cutString", + "propType": "bool", + "description": "是否截断超出字符串" + }, + { + "name": "readOnly", + "propType": "bool", + "description": "是否只读" + }, + { + "name": "trim", + "propType": "bool", + "description": "onChange返回会自动去除头尾空字符" + }, + { + "name": "placeholder", + "propType": "string", + "description": "输入提示" + }, + { + "name": "hasBorder", + "propType": "bool", + "description": "是否有边框" + }, + { + "name": "onPressEnter", + "propType": "func", + "description": "按下回车的回调" + }, + { + "name": "onClear", + "propType": "func" + }, + { + "name": "onChange", + "propType": "func" + }, + { + "name": "onKeyDown", + "propType": "func" + }, + { + "name": "onFocus", + "propType": "func" + }, + { + "name": "onBlur", + "propType": "func" + }, + { + "name": "hint", + "title": "Icon 水印", + "propType": "string", + "description": "水印 (Icon的type类型，和hasClear占用一个地方)" + }, + { + "name": "innerBefore", + "propType": "string", + "description": "文字前附加内容" + }, + { + "name": "innerAfter", + "propType": "string", + "description": "文字后附加内容" + }, + { + "name": "addonBefore", + "propType": "string", + "description": "输入框前附加内容" + }, + { + "name": "addonAfter", + "propType": "string", + "description": "输入框后附加内容" + }, + { + "name": "addonTextBefore", + "propType": "string", + "description": "输入框前附加文字" + }, + { + "name": "addonTextAfter", + "propType": "string", + "description": "输入框后附加文字" + }, + { + "name": "autoFocus", + "propType": "bool", + "description": "自动聚焦" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": [ + { + "name": "label", + "setter": "StringSetter", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签文本", + "en_US": "Label" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: label | 说明: 标签文本内容", + "en_US": "prop: label | description: label content" + } + }, + "description": "label" + }, + { + "name": "placeholder", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入提示", + "en_US": "Placeholder" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: placeholder | 说明: 输入提示", + "en_US": "prop: placeholder | description: placeholder" + } + }, + "setter": "StringSetter" + }, + { + "name": "state", + "title": { + "label": { + "type": "i18n", + "zh_CN": "状态", + "en_US": "State" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: state | 说明: 状态\n@enumdesc 错误, 校验中, 成功, 警告", + "en_US": "prop: state | description: input state" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["error", "loading", "success", "warning"] + } + } + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 尺寸\n@enumdesc 小, 中, 大", + "en_US": "prop: size | description: size" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "defaultValue": "medium" + }, + { + "name": "maxLength", + "title": { + "label": { + "type": "i18n", + "zh_CN": "最大长度", + "en_US": "MaxLength" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: maxLength | 说明: 最大长度", + "en_US": "prop: maxLength | description: max length" + } + }, + "setter": "NumberSetter", + "description": "最大长度" + }, + { + "name": "hasClear", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示清除", + "en_US": "Show Clear" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasClear | 说明: 是否出现清除按钮", + "en_US": "prop: hasClear | description: show clear icon" + } + }, + "setter": "BoolSetter", + "description": "是否出现清除按钮" + }, + { + "name": "disabled", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否禁用", + "en_US": "Disabled" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: disabled | 说明: 是否被禁用", + "en_US": "prop: disabled | description: disabled" + } + }, + "setter": "BoolSetter", + "description": "是否禁用" + }, + { + "name": "hasLimitHint", + "title": { + "label": { + "type": "i18n", + "zh_CN": "展示限制", + "en_US": "ShowLimit" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasLimitHint | 说明: 是否展现最大长度样式", + "en_US": "prop: hasLimitHint | description: hasLimitHint" + } + }, + "setter": "BoolSetter", + "description": "是否展现最大长度样式" + }, + { + "name": "cutString", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否截断", + "en_US": "Cut Off" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: cutString | 说明: 是否截断超出字符串", + "en_US": "prop: cutString | description: whether cut off string" + } + }, + "setter": "BoolSetter", + "description": "是否截断超出字符串" + }, + { + "name": "readOnly", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否只读", + "en_US": "ReadOnly" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: readOnly | 说明: 是否只读", + "en_US": "prop: readOnly | description: ReadOnly" + } + }, + "setter": "BoolSetter", + "description": "是否只读" + }, + { + "name": "trim", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否 Trim", + "en_US": "Trim" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: trim | 说明: onChange返回会自动去除头尾空字符", + "en_US": "prop: trim | description: whether trim when onChange called" + } + }, + "setter": "BoolSetter" + }, + { + "name": "hasBorder", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示边框", + "en_US": "ShowBorder" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasBorder | 说明: 是否有边框", + "en_US": "prop: hasBorder | description: HasBorder" + } + }, + "setter": "BoolSetter" + }, + { + "name": "autoFocus", + "title": { + "label": { + "type": "i18n", + "zh_CN": "自动聚焦", + "en_US": "Auto Focus" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: autoFocus | 说明: 自动聚焦", + "en_US": "prop: autoFocus | description: autoFocus" + } + }, + "setter": "BoolSetter", + "description": "自动聚焦" + }, + { + "name": "hint", + "title": { + "label": { + "type": "i18n", + "zh_CN": "Icon 水印", + "en_US": "IconHint" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hint | 说明: Icon 水印", + "en_US": "prop: hint | description: Icon hint" + } + }, + "setter": { + "componentName": "IconSetter" + } + }, + { + "name": "innerBefore", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文字前附加内容", + "en_US": "Inner Before" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: innerBefore | 说明: 文字前附加内容", + "en_US": "prop: innerBefore | description: innerBefore" + } + }, + "setter": "StringSetter" + }, + { + "name": "innerAfter", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文字后附加内容", + "en_US": "Inner After" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: innerAfter | 说明: 文字后附加内容", + "en_US": "prop: innerAfter | description: innerAfter" + } + }, + "setter": "StringSetter" + }, + { + "name": "addonBefore", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入框前附加内容", + "en_US": "Addon Before" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: addonBefore | 说明: 输入框前附加内容", + "en_US": "prop: addonBefore | description: addonBefore" + } + }, + "setter": "StringSetter" + }, + { + "name": "addonAfter", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入框后附加内容", + "en_US": "Addon After" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: addonAfter | 说明: 输入框后附加内容", + "en_US": "prop: addonAfter | description: addonAfter" + } + }, + "setter": "StringSetter" + }, + { + "name": "addonTextBefore", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入框前附加文字", + "en_US": "Text Before" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: addonTextBefore | 说明: 输入框前附加文字", + "en_US": "prop: addonTextBefore | description: addonTextBefore" + } + }, + "setter": "StringSetter" + }, + { + "name": "addonTextAfter", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入框后附加文字", + "en_US": "Text After" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: addonTextAfter | 说明: 输入框后附加文字", + "en_US": "prop: addonTextAfter | description: addonTextAfter" + } + }, + "setter": "StringSetter" + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ], + "supports": { + "style": true, + "events": ["onPressEnter", "onClear", "onChange", "onKeyDown", "onFocus", "onBlur"] + } + }, + "icon": "", + "category": "内容" + }, + { + "title": "折线图", + "category": "常用图表(试验)", + "componentName": "LineChart", + "icon": "https://unpkg.alibaba-inc.com/@ali/vc-bizcharts@1.1.4/src/vc-line/logo.svg", + "npm": { + "package": "bizcharts", + "version": "4.0.14", + "exportName": "LineChart", + "main": "", + "destructuring": true, + "subName": "" + }, + "configure": { + "props": [ + { + "name": "title", + "title": "标题", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "折线图标题", + "tip": "标题文本", + "supportVariable": true + }, + { + "name": "description", + "title": "描述", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "折线图描述", + "tip": "描述文本", + "supportVariable": true + }, + { + "name": "xField", + "title": "横坐标", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "year", + "tip": "标题文本", + "supportVariable": true + }, + { + "name": "yField", + "title": "纵坐标", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "value", + "tip": "描述文本", + "supportVariable": true + }, + { + "name": "data", + "title": "图表数据", + "tip": "配置图表数据", + "setter": "JsonSetter" + } + ], + "supports": { + "style": true + } + } + }, + { + "title": "折线", + "category": "常用图表(试验)", + "componentName": "Line", + "icon": "https://unpkg.alibaba-inc.com/@ali/vc-bizcharts@1.1.4/src/vc-line/logo.svg", + "npm": { + "package": "@ant-design/charts", + "version": "4.0.14", + "exportName": "Line", + "main": "", + "destructuring": true, + "subName": "" + }, + "configure": { + "props": [ + { + "name": "title", + "title": "标题", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "2018年爆款商品A销售趋势", + "tip": "标题文本", + "supportVariable": true + }, + { + "name": "description", + "title": "描述", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "一达通进出口业务", + "tip": "描述文本", + "supportVariable": true + }, + { + "name": "xField", + "title": "横坐标", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "year", + "tip": "标题文本", + "supportVariable": true + }, + { + "name": "yField", + "title": "纵坐标", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "value", + "tip": "描述文本", + "supportVariable": true + }, + { + "name": "data", + "title": "图表数据", + "tip": "配置图表数据", + "setter": "JsonSetter" + } + ], + "supports": { + "style": true + } + } + }, + { + "title": "水位图", + "category": "常用图表(试验)", + "componentName": "LiquidChart", + "icon": "https://unpkg.alibaba-inc.com/@ali/vc-bizcharts@1.1.4/src/vc-LiquidChart/logo.svg", + "npm": { + "package": "bizcharts", + "version": "4.0.14", + "exportName": "LiquidChart", + "main": "", + "destructuring": true, + "subName": "" + }, + "configure": { + "props": [ + { + "name": "title", + "title": "标题", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "水位图标题", + "tip": "标题文本", + "supportVariable": true + }, + { + "name": "description", + "title": "描述", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "水位图描述", + "tip": "描述文本", + "supportVariable": true + }, + { + "name": "dataSource", + "title": "图表数据", + "type": "group", + "display": "block", + "tip": "配置图表数据", + "items": [ + { + "name": "min", + "title": "最小值", + "setter": "NumberSetter" + }, + { + "name": "max", + "title": "最大值", + "setter": "NumberSetter" + }, + { + "name": "value", + "title": "值", + "setter": "NumberSetter" + } + ] + } + ], + "supports": { + "style": true + } + } + }, + { + "componentName": "List.Item", + "title": "列表项", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "List", + "main": "", + "destructuring": true, + "subName": "Item" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "title", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + } + }, + { + "name": "description", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + } + }, + { + "name": "media", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + } + }, + { + "name": "extra", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + } + } + ], + "icon": "", + "category": "内容" + }, + { + "componentName": "List", + "title": "列表", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "List", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "header", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + } + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium"] + } + }, + { + "name": "footer", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + } + }, + { + "name": "divider", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + } + } + ], + "configure": { + "component": { + "isContainer": true + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Loading", + "title": "加载", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Loading", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "tip", + "propType": "string", + "description": "自定义内容" + }, + { + "name": "tipAlign", + "propType": { + "type": "oneOf", + "value": ["right", "bottom"] + }, + "description": "自定义内容位置", + "defaultValue": "bottom" + }, + { + "name": "visible", + "propType": "bool", + "description": "loading 状态, 默认 true", + "defaultValue": true + }, + { + "name": "onVisibleChange", + "propType": "func" + }, + { + "name": "className", + "propType": "string", + "description": "自定义class" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["large", "medium"] + }, + "description": "设置动画尺寸\n@description 仅仅对默认动画效果起作用\n@enumdesc 大号, 中号", + "defaultValue": "large" + }, + { + "name": "color", + "propType": "string", + "description": "动画颜色" + }, + { + "name": "fullScreen", + "propType": "bool", + "description": "全屏展示" + }, + { + "name": "inline", + "title": "inline", + "propType": "bool", + "description": "should loader be displayed inline", + "defaultValue": true + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": [ + { + "name": "tip", + "title": { + "label": "自定义内容", + "tip": "" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + } + }, + { + "name": "tipAlign", + "title": { + "label": "内容位置", + "tip": "自定义内容位置" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "动画右边", + "value": "right" + }, + { + "title": "动画下面", + "value": "bottom" + } + ] + } + } + }, + { + "name": "visible", + "title": { + "label": "是否显示" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + } + }, + { + "name": "size", + "title": { + "label": "动画尺寸" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "large", + "value": "large" + }, + { + "title": "medium", + "value": "medium" + } + ] + } + } + }, + { + "name": "color", + "title": "动画颜色", + "setter": { + "componentName": "ColorSetter" + } + }, + { + "name": "fullScreen", + "title": "全屏显示", + "setter": "BoolSetter" + }, + { + "name": "inline", + "title": "行内显示", + "setter": "BoolSetter" + } + ], + "supports": { + "style": true, + "events": ["onVisibleChange"] + } + }, + "icon": "", + "category": "反馈" + }, + { + "componentName": "MenuButton", + "title": "菜单按钮", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "MenuButton", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "label", + "propType": "string", + "description": "按钮上的文本内容" + }, + { + "name": "autoWidth", + "propType": "bool", + "description": "弹层是否与按钮宽度相同", + "defaultValue": true + }, + { + "name": "popupTriggerType", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "弹层触发方式", + "defaultValue": "click" + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器" + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层展开状态" + }, + { + "name": "defaultVisible", + "propType": "bool", + "description": "弹层默认是否展开" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层在显示和隐藏触发的事件" + }, + { + "name": "popupStyle", + "propType": "object", + "description": "弹层自定义样式" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹层自定义样式类" + }, + { + "name": "popupProps", + "propType": "object", + "description": "弹层属性透传" + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "defaultSelectedKeys", + "propType": { + "type": "arrayOf", + "value": "string" + }, + "description": "默认激活的菜单项（用法同 Menu 非受控）", + "defaultValue": [] + }, + { + "name": "selectedKeys", + "propType": { + "type": "arrayOf", + "value": "string" + }, + "description": "激活的菜单项（用法同 Menu 受控）" + }, + { + "name": "selectMode", + "propType": { + "type": "oneOf", + "value": ["single", "multiple"] + }, + "description": "菜单的选择模式，同 Menu" + }, + { + "name": "onItemClick", + "propType": "func", + "description": "点击菜单项后的回调，同 Menu" + }, + { + "name": "onSelect", + "propType": "func", + "description": "选择菜单后的回调，同 Menu" + }, + { + "name": "menuProps", + "propType": "object", + "description": "菜单属性透传" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "popupContainer", + "title": { + "label": "弹层容器", + "tip": "指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数()。" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "FunctionSetter"] + } + } + } + ] + } + }, + "icon": "", + "category": "常用" + }, + { + "componentName": "Menu.Divider", + "title": "菜单分隔线", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Menu", + "main": "", + "destructuring": true, + "subName": "Divider" + }, + "props": [ + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": false, + "nestingRule": { + "parentWhitelist": ["Menu", "SubMenu", "Menu.Group", "MenuButton"] + } + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Menu.Group", + "title": "菜单组", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Menu", + "main": "", + "destructuring": true, + "subName": "Group" + }, + "props": [ + { + "name": "label", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "标签内容" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["Menu", "SubMenu", "Menu.Group", "MenuButton"] + } + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Menu.Item", + "title": "菜单项", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Menu", + "main": "", + "destructuring": true, + "subName": "Item" + }, + "props": [ + { + "name": "key", + "propType": "string", + "description": "菜单项标识符" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "helper", + "propType": "node", + "description": "帮助文本" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["Menu", "SubMenu", "Menu.Group", "MenuButton"] + } + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Menu.PopupItem", + "title": "自定义弹出内容", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Menu", + "main": "", + "destructuring": true, + "subName": "PopupItem" + }, + "props": [ + { + "name": "key", + "propType": "string", + "description": "菜单项标识符" + }, + { + "name": "label", + "propType": "node", + "description": "标签内容" + }, + { + "name": "children", + "propType": "node", + "description": "自定义弹层内容" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["Menu", "SubMenu", "Menu.Group", "MenuButton"] + } + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Menu", + "title": "菜单", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Menu", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "onItemClick", + "propType": "func", + "description": "点击菜单项触发的回调函数\n@param {String} key 点击的菜单项的 key 值\n@param {Object} item 点击的菜单项对象\n@param {Object} event 点击的事件对象" + }, + { + "name": "defaultOpenAll", + "propType": "bool", + "description": "初始展开所有的子菜单，只在 mode 设置为 'inline' 以及 openMode 设置为 'multiple' 下生效，优先级高于 defaultOpenKeys", + "defaultValue": false + }, + { + "name": "onOpen", + "propType": "func", + "description": "打开或关闭子菜单触发的回调函数\n@param {String} key 打开的所有子菜单的 key 值\n@param {Object} extra 额外参数\n@param {String} extra.key 当前操作子菜单的 key 值\n@param {Boolean} extra.open 是否是打开" + }, + { + "name": "mode", + "propType": { + "type": "oneOf", + "value": ["inline", "popup"] + }, + "description": "子菜单打开的模式", + "defaultValue": "inline" + }, + { + "name": "triggerType", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "子菜单打开的触发行为", + "defaultValue": "click" + }, + { + "name": "openMode", + "propType": { + "type": "oneOf", + "value": ["single", "multiple"] + }, + "description": "展开内连子菜单的模式，同时可以展开一个子菜单还是多个子菜单，该属性仅在 mode 为 inline 时生效", + "defaultValue": "multiple" + }, + { + "name": "inlineIndent", + "propType": "number", + "description": "内连子菜单缩进距离", + "defaultValue": 20 + }, + { + "name": "inlineArrowDirection", + "propType": { + "type": "oneOf", + "value": ["down", "right"] + }, + "defaultValue": "down" + }, + { + "name": "popupAutoWidth", + "propType": "bool", + "description": "是否自动让弹层的宽度和菜单项保持一致，如果弹层的宽度比菜单项小则和菜单项保持一致，如果宽度大于菜单项则不做处理", + "defaultValue": false + }, + { + "name": "popupAlign", + "propType": { + "type": "oneOf", + "value": ["follow", "outside"] + }, + "description": "弹层的对齐方式", + "defaultValue": "follow" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹出子菜单自定义 className" + }, + { + "name": "onSelect", + "propType": "func", + "description": "选中或取消选中菜单项触发的回调函数\n@param {Array} selectedKeys 选中的所有菜单项的值\n@param {Object} item 选中或取消选中的菜单项\n@param {Object} extra 额外参数\n@param {Boolean} extra.select 是否是选中\n@param {Array} extra.key 菜单项的 key\n@param {Object} extra.label 菜单项的文本\n@param {Array} extra.keyPath 菜单项 key 的路径" + }, + { + "name": "selectMode", + "propType": { + "type": "oneOf", + "value": ["single", "multiple"] + }, + "description": "选中模式，单选还是多选，默认无值，不可选" + }, + { + "name": "shallowSelect", + "propType": "bool", + "description": "是否只能选择第一层菜单项（不能选择子菜单中的菜单项）", + "defaultValue": false + }, + { + "name": "hasSelectedIcon", + "propType": "bool", + "description": "是否显示选中图标，如果设置为 false 需配合配置平台设置选中时的背景色以示区分", + "defaultValue": true + }, + { + "name": "labelToggleChecked", + "propType": "bool", + "defaultValue": true + }, + { + "name": "isSelectIconRight", + "propType": "bool", + "description": "是否将选中图标居右，仅当 hasSelectedIcon 为true 时生效。\n注意：SubMenu 上的选中图标一直居左，不受此API控制", + "defaultValue": false + }, + { + "name": "direction", + "propType": { + "type": "oneOf", + "value": ["ver", "hoz"] + }, + "description": "菜单第一层展示方向", + "defaultValue": "ver" + }, + { + "name": "hozAlign", + "propType": { + "type": "oneOf", + "value": ["left", "right"] + }, + "description": "横向菜单条 item 和 footer 的对齐方向，在 direction 设置为 'hoz' 并且 header 存在时生效", + "defaultValue": "left" + }, + { + "name": "hozInLine", + "propType": "bool", + "description": "横向菜单模式下，是否维持在一行，即超出一行折叠成 SubMenu 显示， 仅在 direction='hoz' mode='popup' 时生效", + "defaultValue": false + }, + { + "name": "header", + "propType": "node", + "description": "自定义菜单头部" + }, + { + "name": "footer", + "propType": "node", + "description": "自定义菜单尾部" + }, + { + "name": "autoFocus", + "propType": "bool", + "description": "是否自动获得焦点", + "defaultValue": false + }, + { + "name": "focusedKey", + "propType": "string", + "description": "当前获得焦点的子菜单或菜单项 key 值" + }, + { + "name": "focusable", + "propType": "bool", + "defaultValue": true + }, + { + "name": "onItemFocus", + "propType": "func" + }, + { + "name": "onBlur", + "propType": "func" + }, + { + "name": "embeddable", + "propType": "bool", + "description": "是否开启嵌入式模式，一般用于Layout的布局中，开启后没有默认背景、外层border、box-shadow，可以配合`` 自定义高度", + "defaultValue": false + }, + { + "name": "onItemKeyDown", + "propType": "func" + }, + { + "name": "expandAnimation", + "propType": "bool", + "defaultValue": true + }, + { + "name": "itemClassName", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "openKeys", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "arrayOf", + "value": "string" + } + ] + }, + "description": "当前打开的子菜单的 key 值" + }, + { + "name": "defaultOpenKeys", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "arrayOf", + "value": "string" + } + ] + }, + "description": "初始打开的子菜单的 key 值", + "defaultValue": [] + }, + { + "name": "selectedKeys", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "arrayOf", + "value": "string" + } + ] + }, + "description": "当前选中菜单项的 key 值" + }, + { + "name": "defaultSelectedKeys", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "arrayOf", + "value": "string" + } + ] + }, + "description": "初始选中菜单项的 key 值", + "defaultValue": [] + } + ], + "configure": { + "component": { + "isContainer": true + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "MonthPicker", + "title": "MonthPicker", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "DatePicker", + "main": "", + "destructuring": true, + "subName": "MonthPicker" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "label", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "输入框内置标签" + }, + { + "name": "state", + "propType": { + "type": "oneOf", + "value": ["success", "loading", "error"] + }, + "description": "输入框状态" + }, + { + "name": "placeholder", + "propType": "string", + "description": "输入提示" + }, + { + "name": "defaultVisibleYear", + "propType": "func", + "description": "默认展现的年\n@return {MomentObject} 返回包含指定年份的 moment 对象实例" + }, + { + "name": "value", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "日期值（受控）moment 对象" + }, + { + "name": "defaultValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "初始日期值，moment 对象" + }, + { + "name": "format", + "propType": "string", + "description": "日期值的格式（用于限定用户输入和展示）", + "defaultValue": "YYYY-MM" + }, + { + "name": "disabledDate", + "propType": "func", + "description": "禁用日期函数\n@param {MomentObject} 日期值\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\n@return {Boolean} 是否禁用" + }, + { + "name": "footerRender", + "propType": "func", + "description": "自定义面板页脚\n@return {Node} 自定义的面板页脚组件" + }, + { + "name": "onChange", + "propType": "func", + "description": "日期值改变时的回调\n@param {MomentObject|String} value 日期值" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "输入框尺寸", + "defaultValue": "medium" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "hasClear", + "propType": "bool", + "description": "是否显示清空按钮", + "defaultValue": true + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层显示状态" + }, + { + "name": "defaultVisible", + "propType": "bool", + "description": "弹层默认是否显示" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层展示状态变化时的回调\n@param {Boolean} visible 弹层是否显示\n@param {String} type 触发弹层显示和隐藏的来源 calendarSelect 表示由日期表盘的选择触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "popupTriggerType", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "弹层触发方式", + "defaultValue": "click" + }, + { + "name": "popupAlign", + "propType": "string", + "description": "弹层对齐方式, 具体含义见 OverLay文档", + "defaultValue": "tl tl" + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + }, + { + "name": "popupStyle", + "propType": "object", + "description": "弹层自定义样式" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹层自定义样式类" + }, + { + "name": "popupProps", + "propType": "object", + "description": "弹层其他属性" + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "inputProps", + "propType": "object", + "description": "输入框其他属性" + }, + { + "name": "monthCellRender", + "propType": "func", + "description": "自定义月份渲染函数\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@returns {ReactNode}" + }, + { + "name": "yearCellRender", + "propType": "func" + }, + { + "name": "dateInputAriaLabel", + "propType": "string", + "description": "日期输入框的 aria-label 属性" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态" + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {MomentObject} value 月份" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "name", + "propType": "string" + }, + { + "name": "popupComponent", + "propType": { + "type": "instanceOf", + "value": "elementType" + } + }, + { + "name": "popupContent", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "Nav.Item", + "title": "导航项", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Nav", + "main": "", + "destructuring": true, + "subName": "Item" + }, + "props": [ + { + "name": "icon", + "propType": { + "type": "icon" + }, + "description": "自定义图标" + }, + { + "name": "children", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "description": "导航内容" + }, + { + "name": "style", + "propType": "object" + } + ], + "icon": "", + "category": "导航" + }, + { + "componentName": "Nav", + "title": "导航", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Nav", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "children", + "propType": "node", + "description": "导航项和子导航" + }, + { + "name": "type", + "propType": { + "type": "oneOf", + "value": ["normal", "primary", "secondary", "line"] + }, + "description": "导航类型", + "defaultValue": "normal" + }, + { + "name": "direction", + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "导航布局", + "defaultValue": "ver" + }, + { + "name": "hozAlign", + "propType": { + "type": "oneOf", + "value": ["left", "right"] + }, + "description": "对齐方向", + "defaultValue": "left" + }, + { + "name": "activeDirection", + "propType": { + "type": "oneOf", + "value": [null, "top", "bottom", "left", "right"] + }, + "description": "选中条方向" + }, + { + "name": "mode", + "propType": { + "type": "oneOf", + "value": ["inline", "popup"] + }, + "description": "子导航打开的模式", + "defaultValue": "inline" + }, + { + "name": "triggerType", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "子导航打开的触发方式", + "defaultValue": "click" + }, + { + "name": "inlineIndent", + "propType": "number", + "description": "内联子导航缩进距离", + "defaultValue": 20 + }, + { + "name": "defaultOpenAll", + "propType": "bool", + "description": "初始展开所有的子导航", + "defaultValue": false + }, + { + "name": "openMode", + "propType": { + "type": "oneOf", + "value": ["single", "multiple"] + }, + "description": "内联子导航的展开模式", + "defaultValue": "multiple" + }, + { + "name": "selectedKeys", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "instanceOf", + "value": "array" + } + ] + }, + "description": "当前选中导航key值" + }, + { + "name": "defaultSelectedKeys", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "instanceOf", + "value": "array" + } + ] + }, + "description": "初始选中导航项的key值" + }, + { + "name": "onSelect", + "propType": "func", + "description": "选中或取消选中导航项触发的回调函数\n@param {Array} selectedKeys 选中的所有导航项的 key\n@param {Object} item 选中或取消选中的导航项\n@param {Object} extra 额外参数\n@param {Boolean} extra.select 是否是选中\n@param {Array} extra.key 导航项的 key\n@param {Object} extra.label 导航项的文本\n@param {Array} extra.keyPath 导航项 key 的路径" + }, + { + "name": "popupAlign", + "propType": { + "type": "oneOf", + "value": ["follow", "outside"] + }, + "description": "弹出子导航的对齐方式（水平导航只支持 follow ）\n@eumdesc Item 顶端对齐, Nav 顶端对齐", + "defaultValue": "follow" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹出子导航的自定义类名" + }, + { + "name": "iconOnly", + "propType": "bool", + "description": "是否只显示图标" + }, + { + "name": "hasArrow", + "propType": "bool", + "description": "是否显示右侧的箭头", + "defaultValue": true + }, + { + "name": "hasTooltip", + "propType": "bool", + "description": "是否有ToolTips", + "defaultValue": false + }, + { + "name": "header", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "自定义导航头部" + }, + { + "name": "footer", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "自定义导航尾部" + }, + { + "name": "embeddable", + "propType": "bool", + "description": "开启嵌入式模式", + "defaultValue": false + } + ], + "configure": { + "component": { + "isContainer": true + } + }, + "icon": "", + "category": "导航" + }, + { + "componentName": "NextBlockCell", + "title": "子区块", + "category": "容器", + "npm": { + "package": "@alife/container", + "version": "0.3.7", + "exportName": "Block", + "main": "lib/index.js", + "destructuring": true, + "subName": "Cell" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "prefix", + "propType": "string" + }, + { + "name": "colSpan", + "propType": "number" + }, + { + "name": "rowSpan", + "propType": "number" + }, + { + "name": "content", + "propType": "node" + }, + { + "name": "title", + "propType": "node" + }, + { + "name": "extra", + "propType": "node" + } + ], + "configure": { + "component": { + "isContainer": true, + "disableBehaviors": "*" + }, + "props": [ + { + "name": "isAutoContainer", + "initialValue": true, + "defaultValue": true, + "setter": "BoolSetter", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "primaryKey", + "title": "项目编号", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "initialValue": { + "type": "JSFunction", + "value": "val => {\n if (val) return val;\n return String(Math.floor(Math.random() * 10000));\n }" + }, + "setter": "StringSetter" + }, + { + "name": "title", + "title": "标题", + "initialValue": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "setter": "StringSetter" + }, + { + "name": "colSpan", + "title": { + "label": "宽度(几列)", + "tip": "水平方向上占几列 (单位/份数, 最大12)" + }, + "display": "inline", + "initialValue": 1, + "setter": { + "componentName": "NumberSetter", + "props": { + "min": 1, + "max": 12, + "defaultValue": 1 + } + } + }, + { + "name": "rowSpan", + "title": { + "label": "高度(几行)", + "tip": "垂直方向占几行 (单位/份数)" + }, + "tip": "横向占的栅格数，1代表1行", + "initialValue": 1, + "setter": { + "componentName": "NumberSetter", + "props": { + "min": 1, + "max": 12, + "defaultValue": 1 + } + } + } + ] + }, + "experimental": { + "getResizingHandlers": { + "type": "JSFunction", + "value": "() => {\n return [\"e\"];\n }" + }, + "callbacks": { + "onResizeStart": { + "type": "JSFunction", + "value": "(e, currentNode) => {\n const { trigger } = e;\n const parent = currentNode.getParent();\n if (parent) {\n const parentNode = parent.getDOMNode();\n if (parentNode) {\n currentNode.parentRect = parentNode.getBoundingClientRect();\n }\n }\n currentNode.beforeSpan = currentNode.getPropValue(\"colSpan\") || 12;\n currentNode.startRect = currentNode.getRect();\n }" + }, + "onResize": { + "type": "JSFunction", + "value": "(e, currentNode) => {\n const { trigger, deltaX, deltaY } = e;\n const startWidth = currentNode.startRect\n ? currentNode.startRect.width\n : currentNode.beforeSpan * (currentNode.parentRect.width / 12);\n let width = startWidth + deltaX;\n if (!currentNode.startRect) {\n currentNode.startRect = {\n width\n };\n }\n width = Math.max(0, width); \n width = Math.min(width, currentNode.parentRect.width); \n const allowMoveX = Math.round(width - startWidth); \n currentNode.moveColumn = Math.round(\n allowMoveX / (currentNode.parentRect.width / 12)\n );\n currentNode.targetColumn =\n currentNode.beforeSpan + currentNode.moveColumn;\n currentNode.targetColumn = Math.max(1, currentNode.targetColumn); \n currentNode.targetColumn = Math.min(currentNode.targetColumn, 12); \n \n currentNode.getDOMNode().style[\"width\"] = `${Math.round(width)}px`;\n }" + }, + "onResizeEnd": { + "type": "JSFunction", + "value": "(e, currentNode) => {\n currentNode.getDOMNode().style[\"width\"] = `100%`;\n const columnEnums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];\n if (currentNode.targetColumn <= 1) {\n currentNode.targetColumn = 1;\n } else if (currentNode.targetColumn >= 12) {\n currentNode.targetColumn = 12;\n } else {\n let lastDelta = {\n column: columnEnums[0],\n delta: Math.abs(currentNode.targetColumn - columnEnums[0])\n };\n columnEnums.forEach(item => {\n let currentDelta = {\n column: item,\n delta: Math.abs(currentNode.targetColumn - item)\n };\n\n if (currentDelta.delta < lastDelta.delta) lastDelta = currentDelta;\n });\n currentNode.targetColumn = lastDelta.column;\n }\n\n currentNode.setPropValue(\"colSpan\", currentNode.targetColumn);\n }" + }, + "onMoveHook": { + "type": "JSFunction", + "value": "() => false" + } + } + }, + "icon": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png" + }, + { + "componentName": "NextBlock", + "title": "区块", + "category": "容器", + "npm": { + "package": "@alife/container", + "version": "0.3.7", + "exportName": "Block", + "main": "lib/index.js", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "prefix", + "propType": "string" + }, + { + "name": "childTotalColumns", + "propType": "number" + }, + { + "name": "colSpan", + "propType": "number" + }, + { + "name": "rowSpan", + "propType": "number" + }, + { + "name": "noPadding", + "propType": "bool" + }, + { + "name": "noBorder", + "propType": "bool" + }, + { + "name": "background", + "propType": { + "type": "oneOf", + "value": ["lining", "surface", "transparent"] + }, + "defaultValue": "lining" + }, + { + "name": "abc", + "propType": "string" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "childWhitelist": ["NextBlockCell"], + "parentWhitelist": { + "type": "JSFunction", + "value": "(testNode, currentNode) => {\n \n if (\n [\"NextPage\", \"Dialog\", \"Drawer\", \"Tab.Item\"].indexOf(\n testNode.componentName\n ) > -1\n ) {\n return true;\n }\n if (\n testNode.componentName === \"Slot\" &&\n [\"aside\"].indexOf(testNode.title) > -1\n ) {\n return true;\n }\n return false;\n }" + } + } + }, + "props": [ + { + "name": "title", + "title": "标题", + "initialValue": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "setter": "StringSetter" + }, + { + "name": "type", + "title": "样式", + "initialValue": "standard", + "defaultValue": "standard", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "standard", + "defaultValue": "standard", + "props": { + "options": [ + { + "title": "标准", + "value": "standard" + }, + { + "title": "透明", + "value": "transparent" + } + ] + } + }, + "extraProps": { + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n target.getNode().setPropValue(\"noPadding\", value === \"transparent\");\n target.getNode().setPropValue(\"noBorder\", value === \"transparent\");\n target\n .getNode()\n .setPropValue(\n \"background\",\n value === \"transparent\" ? value : \"surface\"\n );\n }" + } + } + }, + { + "name": "mode", + "title": "样式", + "initialValue": "inset", + "defaultValue": "inset", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "inset", + "defaultValue": "inset", + "props": { + "options": [ + { + "title": "标准", + "value": "inset" + }, + { + "title": "透明", + "value": "transparent" + }, + { + "title": "卡片", + "value": "card" + } + ] + } + } + }, + { + "name": "layoutmode", + "title": "布局模式", + "initialValue": "OOO", + "defaultValue": "OOO", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "OOO", + "defaultValue": "OOO", + "props": { + "card": true, + "options": [ + { + "label": "O", + "img": "https://img.alicdn.com/imgextra/i1/O1CN019KIIca1DFEKhu5AvI_!!6000000000186-55-tps-500-240.svg", + "value": "O" + }, + { + "label": "OO", + "img": "https://img.alicdn.com/imgextra/i2/O1CN016quqXZ1zWj1IrJPck_!!6000000006722-55-tps-500-240.svg", + "value": "OO" + }, + { + "label": "OOO", + "img": "https://img.alicdn.com/imgextra/i4/O1CN01Vpmd151yx07vfE7Eh_!!6000000006644-55-tps-500-240.svg", + "value": "OOO" + }, + { + "label": "OOOO", + "img": "https://img.alicdn.com/imgextra/i2/O1CN01IJEBFD1TY2S22RwLY_!!6000000002393-2-tps-500-240.png", + "value": "OOOO" + }, + { + "label": "OOOOOO", + "img": "https://img.alicdn.com/imgextra/i3/O1CN01GJ77gp1sg9rkUeuSc_!!6000000005795-2-tps-500-240.png", + "value": "OOOOOO" + }, + { + "label": "OB", + "img": "https://img.alicdn.com/imgextra/i2/O1CN015gIDsk26BqGkVCEnr_!!6000000007624-55-tps-500-240.svg", + "value": "OB" + }, + { + "label": "BO", + "img": "https://img.alicdn.com/imgextra/i2/O1CN01INZixz1vvDjrWjrTF_!!6000000006234-55-tps-499-240.svg", + "value": "BO" + }, + { + "label": "品", + "img": "https://img.alicdn.com/imgextra/i2/O1CN01XuHd5821cL6hrxpfz_!!6000000007005-55-tps-500-240.svg", + "value": "品" + }, + { + "label": "自定义", + "img": "https://img.alicdn.com/imgextra/i2/O1CN01EAvKa01OeqFtUhsDl_!!6000000001731-2-tps-408-410.png", + "value": "custom" + } + ] + } + }, + "extraProps": { + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n const map = {\n O: \"(12|1)\",\n OO: \"(6|1):(6|1)\",\n OOO: \"(4|1):(4|1):(4|1)\",\n OOOO: \"(3|1):(3|1):(3|1):(3|1)\",\n OOOOOO: \"(2|1):(2|1):(2|1):(2|1):(2|1):(2|1)\",\n OB: \"(6|2):(6|1):(6|1)\",\n BO: \"(6|1):(6|2):(6|1)\",\n 品: \"(12|1):(6|1):(6|1)\"\n };\n \n const autolayout = map[value];\n autolayout &&\n target\n .getProps()\n .get(\"autolayout\")\n .setValue(autolayout);\n }" + } + } + }, + { + "name": "autolayout", + "title": { + "label": "布局", + "tip": "一个括号表示一个块，用冒号分割；括号内含义为(列宽|行高)" + }, + "defaultValue": "(6|1):(6|1)", + "setter": { + "componentName": "StringSetter" + }, + "condition": { + "type": "JSFunction", + "value": "target => {\n return target.getProps().getPropValue(\"layoutmode\") === \"custom\";\n }" + }, + "extraProps": { + "setValue": { + "type": "JSFunction", + "value": "setValue(target, value) {\n \n let arrValue = value.split(\":\");\n arrValue = arrValue.filter(item => {\n return item && item.trim(); \n });\n arrValue = arrValue.map(item => {\n return item.replace(/[\\(\\)]/gi, \"\").split(\"|\");\n });\n const flag = arrValue.find(item => {\n return isNaN(Number(item[0])) || isNaN(Number(item[1]));\n });\n\n if (flag) {\n return;\n }\n\n const node = target.getNode();\n node.mergeChildren(\n (child, index) => {\n const wh = arrValue[index];\n child.setPropValue(\"colSpan\", +(wh && wh[0]) || 12);\n child.setPropValue(\"rowSpan\", +(wh && wh[1]) || 1);\n return index >= arrValue.length;\n },\n children => {\n let l = children.length;\n const items = [];\n while (l++ < arrValue.length) {\n items.push({\n componentName: \"NextBlockCell\",\n props: {\n isAutoContainer: true,\n colSpan: +arrValue[l - 1][0] || 12,\n rowSpan: +arrValue[l - 1][1] || 1\n }\n });\n }\n return items;\n },\n null\n );\n }" + } + } + }, + { + "name": "noPadding", + "title": "无边距", + "initialValue": false, + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "setter": "BoolSetter" + }, + { + "name": "noBorder", + "title": "无边框", + "initialValue": false, + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "setter": "BoolSetter" + }, + { + "name": "background", + "title": "背景色", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "extraProps": { + "defaultValue": "surface" + }, + "defaultValue": "surface", + "initialValue": "surface", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "surface", + "props": { + "defaultValue": "surface", + "options": [ + { + "title": "底色", + "value": "lining" + }, + { + "title": "白色", + "value": "surface" + }, + { + "title": "透明", + "value": "transparent" + } + ] + } + } + }, + { + "name": "colSpan", + "title": { + "label": "宽度(几列)", + "tip": "水平方向上占几列 (单位/份数, 最大12), 也可以通过拖动左侧面板改变列数" + }, + "display": "inline", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "initialValue": 12, + "defaultValue": 12, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [2, 4, 6, 8, 12] + } + } + }, + { + "name": "rowSpan", + "title": { + "label": "高度(几行)", + "tip": "垂直方向占几行 (单位/份数)" + }, + "display": "inline", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "initialValue": 1, + "defaultValue": 1, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [1, 2, 3, 4, 5] + } + } + }, + { + "name": "childTotalColumns", + "title": { + "label": "一行几列", + "tip": "可以通过增加子区块个数，查看变化" + }, + "display": "inline", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "initialValue": 12, + "defaultValue": 12, + "setter": { + "componentName": "NumberSetter", + "props": { + "min": 1, + "max": 12, + "defaultValue": 1 + } + } + }, + { + "name": "Cells", + "title": "子区块", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "primaryKey", + "title": "项目编号", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "initialValue": { + "type": "JSFunction", + "value": "val => {\n if (val) return val;\n return String(Math.floor(Math.random() * 10000));\n }" + }, + "setter": "StringSetter" + }, + { + "name": "title", + "title": "标题", + "initialValue": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "setter": "StringSetter" + }, + { + "name": "colSpan", + "title": { + "label": "宽度(几列)", + "tip": "水平方向上占几列 (单位/份数, 最大12)" + }, + "display": "inline", + "initialValue": 1, + "setter": { + "componentName": "NumberSetter", + "props": { + "min": 1, + "max": 12, + "defaultValue": 1 + } + } + }, + { + "name": "rowSpan", + "title": { + "label": "高度(几行)", + "tip": "垂直方向占几行 (单位/份数)" + }, + "display": "inline", + "initialValue": 1, + "setter": { + "componentName": "NumberSetter", + "props": { + "min": 1, + "max": 12, + "defaultValue": 1 + } + } + } + ] + } + }, + "initialValue": { + "type": "JSFunction", + "value": "() => {\n return {\n primaryKey: String(Math.floor(Math.random() * 10000)),\n title: \"\",\n colSpan: 1,\n rowSpan: 1\n };\n }" + } + } + } + }, + "extraProps": { + "virtual": { + "type": "JSFunction", + "value": "() => true" + }, + "getValue": { + "type": "JSFunction", + "value": "(target, value) => {\n return target.getNode().children.map(child => {\n return {\n primaryKey: String(child.getPropValue(\"primaryKey\")),\n title: child.getPropValue(\"title\"),\n colSpan: child.getPropValue(\"colSpan\"),\n rowSpan: child.getPropValue(\"rowSpan\")\n };\n });\n }" + }, + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n const node = target.getNode();\n const map = {};\n if (!Array.isArray(value)) {\n value = [];\n }\n const added = [];\n value.forEach(item => {\n const blockCellItem = Object.assign({}, item);\n map[item.primaryKey] = blockCellItem;\n });\n node.mergeChildren(\n child => {\n const primaryKey = String(child.getPropValue(\"primaryKey\"));\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n child.setPropValue(\"title\", map[primaryKey].title);\n child.setPropValue(\"colSpan\", map[primaryKey].colSpan);\n child.setPropValue(\"rowSpan\", map[primaryKey].rowSpan);\n delete map[primaryKey];\n return false;\n }\n return true;\n },\n () => {\n const items = [];\n for (const primaryKey in map) {\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n items.push({\n componentName: \"NextBlockCell\",\n props: map[primaryKey]\n });\n }\n }\n return items;\n },\n (child1, child2) => {\n const a = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child1.getPropValue(\"primaryKey\"))\n );\n const b = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child2.getPropValue(\"primaryKey\"))\n );\n return a - b;\n }\n );\n }" + }, + "onChange": { + "type": "JSFunction", + "value": "() => {}" + } + } + } + ] + }, + "experimental": { + "initialChildren": [ + { + "componentName": "NextBlockCell", + "props": { + "title": "", + "prefix": "next-", + "placeholderStyle": { + "height": "100%" + }, + "layoutmode": "O", + "childTotalColumns": 12, + "isAutoContainer": true, + "colSpan": 12, + "rowSpan": 1 + } + } + ], + "callbacks": {} + }, + "icon": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png" + }, + { + "componentName": "NextPCell", + "title": "组", + "category": "容器", + "npm": { + "package": "@alife/container", + "version": "0.3.7", + "exportName": "P", + "main": "lib/index.js", + "destructuring": true, + "subName": "Cell" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "type", + "title": "字体大小", + "extraProps": { + "defaultValue": "body2" + }, + "defaultValue": "body2", + "initialValue": "body2", + "setter": { + "componentName": "SelectSetter", + "initialValue": "body2", + "props": { + "defaultValue": "body2", + "options": [ + { + "title": "h1", + "value": "h1" + }, + { + "title": "h2", + "value": "h2" + }, + { + "title": "h3", + "value": "h3" + }, + { + "title": "h4", + "value": "h4" + }, + { + "title": "h5", + "value": "h5" + }, + { + "title": "h6", + "value": "h6" + }, + { + "title": "body1", + "value": "body1" + }, + { + "title": "body2", + "value": "body2" + }, + { + "title": "caption", + "value": "caption" + }, + { + "title": "overline", + "value": "overline" + } + ] + } + } + }, + { + "name": "verAlign", + "title": "垂直对齐", + "extraProps": { + "defaultValue": "baseline" + }, + "defaultValue": "baseline", + "initialValue": "baseline", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "baseline", + "props": { + "defaultValue": "baseline", + "options": [ + { + "title": "top", + "value": "top" + }, + { + "title": "baseline", + "value": "baseline" + }, + { + "title": "middle", + "value": "middle" + }, + { + "title": "bottom", + "value": "bottom" + } + ] + } + } + }, + { + "name": "align", + "title": "水平对齐", + "extraProps": { + "defaultValue": "left" + }, + "defaultValue": "left", + "initialValue": "left", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "left", + "props": { + "defaultValue": "left", + "options": [ + { + "title": "space-between", + "value": "space-between" + }, + { + "title": "space-around", + "value": "space-around" + }, + { + "title": "space-evenly", + "value": "space-evenly" + }, + { + "title": "left", + "value": "left" + }, + { + "title": "center", + "value": "center" + }, + { + "title": "right", + "value": "right" + } + ] + } + } + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["NextP"] + } + }, + "props": [ + { + "name": "width", + "title": "宽度", + "initialValue": "auto", + "defaultValue": "auto", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "setter": { + "componentName": "NumberSetter", + "props": { + "units": [ + { + "type": "px", + "list": true + }, + { + "type": "%", + "list": true + } + ] + } + } + }, + { + "name": "direction", + "title": "排布方式", + "initialValue": "hoz", + "defaultValue": "hoz", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "hoz", + "defaultValue": "hoz", + "props": { + "options": [ + { + "title": "上下排列", + "value": "ver" + }, + { + "title": "左右排列", + "value": "hoz" + } + ] + } + } + }, + { + "name": "align", + "title": "对齐方式", + "initialValue": "inherit", + "defaultValue": "inherit", + "condition": { + "type": "JSFunction", + "value": "target => {\n if (!target || !target.getProps()) {\n console.warn(\"target or props should not be empty: \", target);\n return false;\n }\n return !!(target.getProps().getPropValue(\"direction\") === \"ver\");\n }" + }, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "inherit", + "defaultValue": "inherit", + "props": { + "options": [ + { + "title": "左", + "value": "left" + }, + { + "title": "中", + "value": "center" + }, + { + "title": "右", + "value": "right" + }, + { + "title": "默认", + "value": "inherit" + } + ] + } + } + }, + { + "name": "verAlign", + "title": "对齐方式", + "initialValue": "inherit", + "defaultValue": "inherit", + "condition": { + "type": "JSFunction", + "value": "target => {\n if (!target || !target.getProps()) {\n console.warn(\"target or props should not be empty: \", target);\n return false;\n }\n return !!(target.getProps().getPropValue(\"direction\") === \"hoz\");\n }" + }, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "inherit", + "defaultValue": "inherit", + "props": { + "options": [ + { + "title": "上", + "value": "top" + }, + { + "title": "中", + "value": "middle" + }, + { + "title": "baseline", + "value": "baseline" + }, + { + "title": "下", + "value": "bottom" + }, + { + "title": "默认", + "value": "inherit" + } + ] + } + } + } + ], + "supports": { + "style": true + } + }, + "icon": "" + }, + { + "componentName": "NextP", + "title": "段落模板", + "category": "容器", + "npm": { + "package": "@alife/container", + "version": "0.3.7", + "exportName": "P", + "main": "lib/index.js", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "textSpacing", + "title": { + "label": "文字间距", + "tip": "开启后，同一“段落”下，多个Text之间会产生间距" + }, + "propType": "bool", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "defaultValue": true + }, + { + "name": "full", + "title": { + "label": "占满一行", + "tip": "开启后，子元素将占满一行" + }, + "propType": "bool", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "defaultValue": false + }, + { + "name": "flex", + "title": { + "label": "块状布局", + "tip": "相对于“行内布局模式”,子元素是不可分割的块" + }, + "propType": "bool", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "defaultValue": true + }, + { + "name": "wrap", + "title": { + "label": "超长换行", + "tip": "只在块状布局下生效，而行内布局下默认就是换行的" + }, + "propType": "bool", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "defaultValue": false + }, + { + "name": "type", + "title": "字体大小", + "extraProps": { + "defaultValue": "body2" + }, + "defaultValue": "body2", + "initialValue": "body2", + "setter": { + "componentName": "SelectSetter", + "initialValue": "body2", + "props": { + "defaultValue": "body2", + "options": [ + { + "title": "h1", + "value": "h1" + }, + { + "title": "h2", + "value": "h2" + }, + { + "title": "h3", + "value": "h3" + }, + { + "title": "h4", + "value": "h4" + }, + { + "title": "h5", + "value": "h5" + }, + { + "title": "h6", + "value": "h6" + }, + { + "title": "body1", + "value": "body1" + }, + { + "title": "body2", + "value": "body2" + }, + { + "title": "caption", + "value": "caption" + }, + { + "title": "overline", + "value": "overline" + } + ] + } + } + }, + { + "name": "verAlign", + "title": "垂直对齐", + "extraProps": { + "defaultValue": "baseline" + }, + "defaultValue": "baseline", + "initialValue": "baseline", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "baseline", + "props": { + "defaultValue": "baseline", + "options": [ + { + "title": "top", + "value": "top" + }, + { + "title": "baseline", + "value": "baseline" + }, + { + "title": "middle", + "value": "middle" + }, + { + "title": "bottom", + "value": "bottom" + } + ] + } + } + }, + { + "name": "align", + "title": "水平对齐", + "extraProps": { + "defaultValue": "space-between" + }, + "defaultValue": "space-between", + "initialValue": "space-between", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "space-between", + "defaultValue": "space-between", + "props": { + "defaultValue": "space-between", + "options": [ + { + "title": "space-between", + "value": "space-between" + }, + { + "title": "space-around", + "value": "space-around" + }, + { + "title": "space-evenly", + "value": "space-evenly" + }, + { + "title": "left", + "value": "left" + }, + { + "title": "center", + "value": "center" + }, + { + "title": "right", + "value": "right" + } + ] + } + } + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": { + "type": "JSFunction", + "value": "(testNode, currentNode) => {\n if (\n testNode.isContainer() &&\n [\"NextPage\", \"NextBlock\"].indexOf(testNode.componentName) === -1\n ) {\n return true;\n }\n if (\n testNode.componentName === \"Slot\" &&\n [\"header\", \"footer\", \"nav\"].indexOf(testNode.title) > -1\n ) {\n return true;\n }\n return false;\n }" + } + } + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + } + ] + } + }, + "experimental": { + "callbacks": { + "onNodeRemove": { + "type": "JSFunction", + "value": "(removedNode, currentNode) => {\n if (!removedNode || !currentNode) {\n return;\n }\n const children = currentNode.children;\n \n if (children && children.length === 0) {\n currentNode.remove();\n }\n }" + } + }, + "initials": [ + { + "name": "flex", + "initial": { + "type": "JSFunction", + "value": "() => true" + } + } + ] + } + }, + { + "componentName": "NextPage", + "title": "页面", + "category": "容器", + "npm": { + "package": "@alife/container", + "version": "0.3.7", + "exportName": "Page", + "main": "lib/index.js", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "header", + "propType": "node" + }, + { + "name": "footer", + "propType": "node" + }, + { + "name": "nav", + "propType": "node" + }, + { + "name": "aside", + "propType": "node" + }, + { + "name": "main", + "propType": "node" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": { + "type": "JSFunction", + "value": "dropTargetNode => {\n let targetNodeNextPageNum = 0;\n dropTargetNode.getChildren().forEach(item => {\n if (item.componentName === \"NextPage\") {\n targetNodeNextPageNum += 1;\n }\n });\n \n if (\n dropTargetNode.isRoot() &&\n dropTargetNode.componentName !== \"NextPage\" &&\n targetNodeNextPageNum === 0\n ) {\n return true;\n }\n\n return false;\n }" + } + } + }, + "props": [ + { + "name": "columns", + "title": "列数", + "defaultValue": 12, + "setter": "NumberSetter", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "page", + "type": "group", + "title": { + "label": "页面" + }, + "extraProps": { + "display": "block" + }, + "items": [ + { + "name": "contentAlignCenter", + "title": { + "label": "内容居中", + "tip": "（在大屏下有区别）开启后内容区域有最大宽度且整体居中" + }, + "setter": { + "componentName": "BoolSetter", + "initialValue": false + } + }, + { + "name": "contentProps.noPadding", + "title": { + "label": "内间距" + }, + "initialValue": false, + "defaultValue": false, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": false, + "defaultValue": false, + "props": { + "options": [ + { + "title": "有", + "value": false + }, + { + "title": "无", + "value": true + } + ] + } + } + }, + { + "name": "minHeight", + "title": { + "label": "最小高度" + }, + "initialValue": "100vh", + "defaultValue": "100vh", + "setter": { + "componentName": "StringSetter" + }, + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "background", + "title": { + "label": "Page的背景色" + }, + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "lining" + } + }, + { + "name": "contentProps.background", + "title": { + "label": "主体背景色" + }, + "initialValue": "transparent", + "defaultValue": "transparent", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "transparent", + "defaultValue": "transparent", + "props": { + "options": [ + { + "title": "不透明", + "value": "surface" + }, + { + "title": "透明", + "value": "transparent" + } + ] + } + } + } + ] + }, + { + "name": "headerSelection", + "type": "group", + "title": { + "label": "头部" + }, + "extraProps": { + "display": "block" + }, + "items": [ + { + "name": "header", + "title": { + "label": "内容" + }, + "setter": { + "componentName": "SlotSetter", + "initialValue": { + "type": "JSSlot", + "title": "header", + "value": [] + } + } + }, + { + "name": "headerProps.background", + "title": { + "label": "头部背景" + }, + "condition": { + "type": "JSFunction", + "value": "target => {\n if (!target || !target.getProps()) {\n console.warn(\"target or props should not be empty: \", target);\n return false;\n }\n return !!target.getProps().getPropValue(\"header\");\n }" + }, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "surface", + "props": { + "options": [ + { + "title": "不透明", + "value": "surface" + }, + { + "title": "透明", + "value": "transparent" + } + ] + } + } + }, + { + "name": "headerProps.style.padding", + "title": { + "label": "内间距" + }, + "defaultValue": "", + "initialValue": "", + "condition": { + "type": "JSFunction", + "value": "target => {\n if (!target || !target.getProps()) {\n console.warn(\"target or props should not be empty: \", target);\n return false;\n }\n return !!target.getProps().getPropValue(\"header\");\n }" + }, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "", + "props": { + "options": [ + { + "title": "无", + "value": "0" + }, + { + "title": "有", + "value": "" + } + ] + } + } + }, + { + "name": "headerDivider", + "title": { + "label": "头部底下分割线", + "tip": "一般用于头部、内容区颜色相同时 headerDivider" + }, + "defaultValue": true, + "initialValue": true, + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "setter": { + "componentName": "BoolSetter", + "initialValue": true, + "defaultValue": true + } + } + ] + }, + { + "name": "footer", + "type": "group", + "title": { + "label": "底部" + }, + "extraProps": { + "display": "block" + }, + "items": [ + { + "name": "footer", + "title": { + "label": "内容" + }, + "setter": { + "componentName": "SlotSetter", + "initialValue": { + "type": "JSSlot", + "title": "footer", + "value": [] + } + } + }, + { + "name": "footerProps.fixed", + "title": { + "label": "是否吸底", + "tip": "可以用来放置吸底的表单提交按钮等" + }, + "defaultValue": false, + "initialValue": false, + "condition": { + "type": "JSFunction", + "value": "target => {\n if (!target || !target.getProps()) {\n console.warn(\"target or props should not be empty: \", target);\n return false;\n }\n return !!target.getProps().getPropValue(\"footer\");\n }" + }, + "setter": { + "componentName": "BoolSetter", + "initialValue": false, + "defaultValue": false + } + } + ] + }, + { + "name": "nav", + "title": { + "label": "左侧导航" + }, + "extraProps": { + "display": "block" + }, + "setter": { + "componentName": "SlotSetter", + "initialValue": { + "type": "JSSlot", + "title": "nav", + "value": [] + } + } + }, + { + "name": "aside", + "title": { + "label": "侧边栏" + }, + "extraProps": { + "display": "block" + }, + "setter": { + "componentName": "SlotSetter", + "initialValue": { + "type": "JSSlot", + "title": "aside", + "value": [ + { + "componentName": "NextBlock", + "title": "区块", + "props": { + "prefix": "next-", + "placeholderStyle": { + "height": "100%" + }, + "noPadding": false, + "noBorder": false, + "background": "surface", + "colSpan": 12, + "rowSpan": 1, + "childTotalColumns": 1 + } + } + ] + } + } + } + ], + "supports": { + "style": true, + "loop": false + } + }, + "experimental": { + "callbacks": { + "onNodeAdd": { + "type": "JSFunction", + "value": "(dragment, currentNode) => {\n \n \n if (\n !dragment ||\n [\"NextP\", \"NextBlock\", \"Slot\"].includes(dragment.componentName) ||\n (dragment.isModal && dragment.isModal())\n ) {\n console.log(\n `[${dragment.componentName}] doesn\\'n need to wrap with NextBlock > NextBlockCell`\n );\n return;\n }\n\n const NextPProps = {\n wrap: false,\n type: \"body2\",\n verAlign: \"middle\",\n textSpacing: true,\n align: \"left\"\n };\n\n if (\n [\n \"Form\",\n \"ResponsiveGrid\",\n \"Box\",\n \"Card\",\n \"List\",\n \"Message\",\n \"Slider\",\n \"NextTable\"\n ].includes(dragment.componentName) ||\n dragment.getPropValue(\"isFillContainer\")\n ) {\n NextPProps.full = true;\n }\n const layoutPSchema = {\n componentName: \"NextP\",\n title: \"段落\",\n props: NextPProps,\n children: [dragment.schema]\n };\n\n \n const layoutBlockNode = len =>\n currentNode.document.createNode({\n componentName: \"NextBlock\",\n title: \"区块\",\n props: {\n childTotalColumns: len || 12\n },\n children: [\n {\n componentName: \"NextBlockCell\",\n title: \"子区块\",\n props: {\n isAutoContainer: true,\n colSpan: 12,\n rowSpan: 1\n },\n children: [layoutPSchema]\n }\n ]\n });\n\n const dropLocation = dragment.document.designer.dropLocation;\n\n if (!dropLocation) {\n \n return;\n }\n const dropTarget = dropLocation.target;\n const dropTargetName = dropLocation.target.componentName || \"\";\n\n \n const targetId = (dropLocation && dropLocation.target.id) || \"\";\n \n let slotTarget =\n currentNode.slots.length > 0 &&\n currentNode.slots.find(item => item.id === targetId);\n\n const layoutPNode = currentNode.document.createNode(layoutPSchema);\n\n \n const isAsideSlot =\n slotTarget && [\"aside\"].indexOf(slotTarget._slotFor.key) > -1;\n \n const isNeedPSlot =\n slotTarget &&\n [\"header\", \"footer\", \"nav\"].indexOf(slotTarget._slotFor.key) > -1;\n\n const wrapWithBlock = (dragment, node, dropTargetName, blockLen) => {\n setTimeout(() => {\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] need to wrap with NextBlock > NextBlockCell > NextP [from NextPage2]`\n );\n const newNode = node.document.createNode(\n layoutBlockNode(blockLen).schema\n );\n node.insertBefore(newNode, dragment, false);\n dragment.remove(false);\n newNode\n .getChildren()\n .get(0)\n .getChildren()\n .get(0)\n .getChildren()\n .get(0)\n .select();\n }, 1);\n };\n\n const wrapWithP = (dragment, node, dropTargetName) => {\n setTimeout(() => {\n \n \n if (dropTargetName === \"NextP\") {\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] does't need to wrap with NextP. [from NextPage3]`\n );\n return;\n }\n\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] need to wrap with NextP [from NextPage3]`\n );\n const newNode = node.document.createNode(\n Object.assign(layoutPNode.schema)\n );\n node.insertBefore(newNode, dragment, false);\n dragment.remove(false);\n newNode\n .getChildren()\n .get(0)\n .select();\n }, 1);\n };\n\n \n \n if (\n [\"NextPage\"].includes(dropTargetName) &&\n currentNode.getChildren().has(dragment)\n ) {\n wrapWithBlock(dragment, currentNode, dropTargetName, 12);\n\n \n \n } else if (\n isAsideSlot &&\n slotTarget &&\n slotTarget.getChildren().has(dragment)\n ) {\n wrapWithBlock(dragment, slotTarget, dropTargetName, 1);\n\n \n \n \n } else if (\n dropTarget.getPropValue(\"isAutoContainer\") ||\n dropTargetName === \"Tab.Item\"\n ) {\n wrapWithP(dragment, dropTarget, dropTargetName);\n\n \n \n } else if (isNeedPSlot && slotTarget) {\n wrapWithP(dragment, slotTarget, dropTargetName);\n }\n\n \n }" + } + }, + "initials": [ + { + "name": "minHeight", + "initial": { + "type": "JSFunction", + "value": "() => \"100vh\"" + } + } + ] + }, + "icon": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png" + }, + { + "componentName": "NextTable", + "title": "表格", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "NextTable", + "version": "1.23.x", + "exportName": "NextTable", + "main": "lib/index.js", + "subName": "" + }, + "props": [ + { + "name": "columns", + "title": "数据列", + "propType": { + "type": "arrayOf", + "value": { + "type": "shape", + "value": [ + { + "name": "title", + "description": "列标题", + "propType": "string", + "defaultValue": "Title" + }, + { + "name": "dataKey", + "description": "列索引", + "propType": "string", + "defaultValue": "Key" + }, + { + "name": "dataType", + "description": "数据类型", + "propType": { + "type": "oneOf", + "value": [ + "text", + "timestamp", + "cascadeTimestamp", + "employee", + "money", + "moneyRange" + ] + }, + "defaultValue": "Key" + }, + { + "name": "editType", + "description": "编辑类型", + "propType": { + "type": "oneOf", + "value": ["select", "text", "radio", "date", "employee"] + }, + "defaultValue": "Key" + } + ] + } + } + }, + { + "name": "data", + "title": "数据源", + "propType": { + "type": "oneOfType", + "value": ["Json", "JSExpression"] + } + }, + { + "name": "actionTitle", + "title": "操作列标题", + "propType": "string" + }, + { + "name": "actionColumn", + "title": "操作列", + "propType": { + "type": "arrayOf", + "value": { + "type": "shape", + "value": [ + { + "name": "title", + "description": "列标题", + "propType": "string", + "defaultValue": "Title" + }, + { + "name": "callback", + "description": "callback", + "propType": "func", + "defaultValue": { + "type": "JSFunction", + "value": "(rowData, action, table) => {\n return table.editRow(rowData).then((row) => {\n console.log(row);\n })}" + } + } + ] + } + } + }, + { + "name": "customBarItem", + "isRequired": true, + "title": "自定义工具栏渲染", + "propType": "any" + } + ], + "configure": { + "props": [ + { + "name": "customBarItem", + "isRequired": true, + "title": "自定义工具栏渲染", + "setter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "render", + "title": "整体自定义渲染", + "setter": { + "componentName": "FunctionSetter", + "props": { + "supportParams": true + } + } + }, + { + "name": "rightRender", + "title": "底部自定义渲染", + "setter": { + "componentName": "SlotSetter", + "initialValue": { + "type": "JSSlot", + "params": ["value", "index", "record"], + "value": [] + } + } + }, + { + "name": "bottomRender", + "title": "右侧自定义渲染", + "setter": { + "componentName": "SlotSetter", + "initialValue": { + "type": "JSSlot", + "params": ["value", "index", "record"], + "value": [] + } + } + } + ] + } + } + } + }, + { + "name": "StyleAndTheme", + "title": "风格和样式", + "type": "group", + "extraProps": { + "display": "entry" + }, + "items": [ + { + "name": "theme", + "title": "主题", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "zebra", + "value": "zebra" + }, + { + "title": "split", + "value": "split" + }, + { + "title": "border", + "value": "border" + } + ] + } + } + }, + { + "name": "hasHeader", + "title": "是否显示表头", + "setter": "BoolSetter" + }, + { + "name": "fixedHeader", + "title": "是否固定表头", + "setter": "BoolSetter" + }, + { + "name": "stickyHeader", + "title": "表头是否是sticky", + "setter": "BoolSetter" + }, + { + "name": "setEmptyContent", + "title": "开启自定义空提示", + "setter": "BoolSetter" + }, + { + "description": "最大高度", + "name": "maxBodyHeight", + "setter": "StringSetter" + } + ] + }, + { + "name": "Selector", + "title": "行选择器", + "type": "group", + "extraProps": { + "display": "entry" + }, + "items": [ + { + "name": "rowSelector", + "title": "选择器模式", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "checkboxSelector", + "value": "checkboxSelector" + }, + { + "title": "radioSelector", + "value": "radioSelector" + } + ] + } + } + }, + { + "name": "showRowSelector", + "title": "是否启用选择模式", + "setter": "BoolSetter" + } + ] + }, + { + "name": "Pagination", + "title": "分页设置", + "type": "group", + "extraProps": { + "display": "entry" + }, + "items": [ + { + "name": "isPagination", + "title": "是否显示分页", + "setter": "BoolSetter", + "initialValue": true + }, + { + "name": "pagination", + "title": "分页设置", + "setter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "paginationPosition", + "title": "翻页器显示位置", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "left", + "value": "left" + }, + { + "title": "right", + "value": "right" + } + ] + } + } + }, + { + "name": "size", + "title": "分页组件大小", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "small", + "value": "small" + }, + { + "title": "medium", + "value": "medium" + }, + { + "title": "large", + "value": "large" + } + ] + } + } + }, + { + "name": "type", + "title": "分页组件类型", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "normal", + "value": "normal" + }, + { + "title": "simple", + "value": "simple" + }, + { + "title": "mini", + "value": "mini" + } + ] + } + } + }, + { + "name": "shape", + "title": "前进后退按钮样式", + "setter": { + "componentName": "SelectSetter", + "props": { + "options": [ + { + "title": "normal", + "value": "normal" + }, + { + "title": "arrow-only", + "value": "arrow-only" + }, + { + "title": "arrow-prev-only", + "value": "arrow-prev-only" + }, + { + "title": "no-border", + "value": "no-border" + } + ] + } + } + }, + { + "name": "pageSizeSelector", + "title": "每页显示选择器类型", + "setter": "BoolSetter" + }, + { + "name": "pageSizeList", + "title": "每页显示选择器可选值", + "setter": "StringSetter" + }, + { + "name": "pageSizePosition", + "title": "每页显示选择器在组件中的位置", + "setter": { + "componentName": "SelectSetter", + "props": { + "options": [ + { + "title": "start", + "value": "start" + }, + { + "title": "end", + "value": "end" + } + ] + } + } + }, + { + "name": "hideOnlyOnePage", + "title": "hideOnlyOnePage", + "setter": "BoolSetter" + }, + { + "name": "showJump", + "title": "showJump", + "setter": "BoolSetter" + }, + { + "name": "pageShowCount", + "title": "页码显示的数量", + "setter": "NumberSetter" + } + ] + } + }, + "initialValue": { + "type": "normal", + "shape": "arrow-only", + "pageSize": 10, + "pageSizeSelector": false, + "pageSizeList": "5,10,20", + "pageSizePosition": "end", + "paginationPosition": "right", + "hideOnlyOnePage": false, + "showJump": true + } + } + } + ] + }, + { + "name": "ExpandAndTree", + "title": "可折叠/树形表格", + "type": "group", + "extraProps": { + "display": "entry" + }, + "items": [ + { + "name": "hasExpandedRowCtrl", + "title": "启用折叠", + "setter": "BoolSetter" + }, + { + "name": "isTree", + "title": "启用树形", + "setter": "BoolSetter" + } + ] + }, + { + "name": "TopAction", + "title": "顶部操作选项", + "type": "group", + "extraProps": { + "display": "entry" + }, + "items": [ + { + "name": "showMiniPager", + "title": "顶部迷你分页器", + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "showActionBar", + "title": "显示操作条", + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "showLinkBar", + "title": "显示外链条", + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "showSearch", + "title": "显示搜索", + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "searchBarPlaceholder", + "title": "搜索 placeholder", + "setter": "StringSetter" + }, + { + "name": "showCustomColumn", + "title": "显示筛选器", + "setter": { + "componentName": "BoolSetter" + } + } + ] + }, + { + "name": "actionBar", + "title": "操作条", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "title", + "description": "标题", + "setter": "StringSetter", + "initialValue": "Title" + }, + { + "name": "callback", + "description": "callback", + "setter": { + "componentName": "FunctionSetter" + } + } + ] + } + }, + "initialValue": { + "title": "Title" + } + } + } + } + }, + { + "name": "linkBar", + "title": "外链操作条", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "title", + "description": "标题", + "setter": "StringSetter", + "initialValue": "Title" + }, + { + "name": "callback", + "description": "callback", + "setter": { + "componentName": "FunctionSetter" + } + } + ] + } + }, + "initialValue": { + "title": "Title" + } + } + } + } + }, + { + "name": "columns", + "title": "数据列", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + "ExpressionSetter", + { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "title", + "description": "列标题", + "setter": "StringSetter" + }, + { + "name": "dataKey", + "description": "列索引", + "setter": "StringSetter" + }, + { + "description": "宽度", + "name": "width", + "setter": "StringSetter" + }, + { + "name": "dataType", + "description": "数据类型", + "setter": { + "componentName": "SelectSetter", + "props": { + "options": [ + { + "title": "text", + "value": "text" + }, + { + "title": "timestamp", + "value": "timestamp" + }, + { + "title": "cascadeTimestamp", + "value": "cascadeTimestamp" + }, + { + "title": "employee", + "value": "employee" + }, + { + "title": "money", + "value": "money" + }, + { + "title": "moneyRange", + "value": "moneyRange" + } + ] + } + } + }, + { + "name": "editType", + "description": "编辑类型", + "setter": { + "componentName": "SelectSetter", + "props": { + "options": [ + { + "title": "select", + "value": "select" + }, + { + "title": "text", + "value": "text" + }, + { + "title": "radio", + "value": "radio" + }, + { + "title": "date", + "value": "date" + }, + { + "title": "employee", + "value": "employee" + } + ] + } + } + }, + { + "name": "lock", + "description": "锁定位置", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "左", + "value": "left" + }, + { + "title": "右", + "value": "right" + }, + { + "title": "无", + "value": "" + } + ] + }, + "initialValue": "" + } + }, + { + "description": "自定义渲染", + "name": "render", + "setter": { + "componentName": "SlotSetter", + "title": "单元格自定义", + "initialValue": { + "type": "JSSlot", + "params": [""], + "value": [ + { + "componentName": "Box" + } + ] + } + } + } + ] + } + }, + "initialValue": { + "title": "Title", + "dataKey": "Key", + "dataType": "text", + "editType": "text", + "width": 200, + "lock": "" + } + } + } + } + ] + } + } + }, + { + "name": "data", + "title": "数据源", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["JsonSetter", "ExpressionSetter"] + } + } + }, + { + "name": "action", + "title": "操作列选项", + "type": "group", + "extraProps": { + "display": "entry" + }, + "items": [ + { + "name": "actionTitle", + "title": "操作列标题", + "setter": "StringSetter" + }, + { + "name": "actionWidth", + "title": "操作列宽度", + "setter": "NumberSetter" + }, + { + "name": "actionType", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "link", + "value": "link" + }, + { + "title": "button", + "value": "button" + } + ] + } + } + }, + { + "name": "actionFixed", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "right", + "value": "right" + }, + { + "title": "none", + "value": "none" + } + ] + } + } + }, + { + "name": "actionHidden", + "setter": "BoolSetter", + "initialValue": false + } + ] + }, + { + "name": "actionColumn", + "title": "操作列", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "title", + "description": "列标题", + "setter": "StringSetter", + "initialValue": "Title" + }, + { + "name": "callback", + "description": "callback", + "setter": { + "componentName": "FunctionSetter" + } + } + ] + } + }, + "initialValue": { + "title": "Title", + "callback": { + "type": "JSFunction", + "value": "(rowData, action, table) => {\n return table.editRow(rowData).then((row) => {\n console.log(row);\n })}" + } + } + } + } + } + } + ], + "supports": { + "style": true, + "events": [ + "onFetchData", + "onSelect", + "onRowClick", + "onRowMouseEnter", + "onRowMouseLeave", + "onResizeChange", + "onColumnsChange", + "onRowOpen", + "onShowSearch", + "onHideSearch" + ] + } + }, + "icon": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png", + "category": "内容" + }, + { + "componentName": "NextText", + "title": "文本", + "category": "常用", + "npm": { + "package": "@alife/container", + "version": "0.3.7", + "exportName": "Text", + "main": "lib/index.js", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "classname", + "propType": "bool", + "defaultValue": true + }, + { + "name": "type", + "title": "字体大小", + "extraProps": { + "defaultValue": "body2" + }, + "defaultValue": "body2", + "initialValue": "body2", + "setter": { + "componentName": "SelectSetter", + "initialValue": "body2", + "props": { + "defaultValue": "body2", + "options": [ + { + "title": "默认", + "value": "inherit" + }, + { + "title": "h1", + "value": "h1" + }, + { + "title": "h2", + "value": "h2" + }, + { + "title": "h3", + "value": "h3" + }, + { + "title": "h4", + "value": "h4" + }, + { + "title": "h5", + "value": "h5" + }, + { + "title": "h6", + "value": "h6" + }, + { + "title": "body1", + "value": "body1" + }, + { + "title": "body2", + "value": "body2" + }, + { + "title": "caption", + "value": "caption" + }, + { + "title": "overline", + "value": "overline" + } + ] + } + } + }, + { + "name": "children", + "propType": "string" + }, + { + "name": "mark", + "title": "标记", + "propType": "bool", + "description": "添加标记样式", + "defaultValue": false + }, + { + "name": "code", + "title": "代码", + "propType": "bool", + "description": "添加代码样式", + "defaultValue": false + }, + { + "name": "delete", + "title": "删除线", + "propType": "bool", + "description": "添加删除线样式", + "defaultValue": false + }, + { + "name": "underline", + "title": "下划线", + "propType": "bool", + "description": "添加下划线样式", + "defaultValue": false + }, + { + "name": "strong", + "propType": "bool", + "description": "是否加粗", + "defaultValue": false + }, + { + "name": "onClick", + "propType": "func", + "description": "鼠标点击" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "classname", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文本内容", + "en_US": "Text" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性：children | 说明：文本内容", + "en_US": "prop: children | description: text of the content" + } + }, + "setter": "TextAreaSetter" + } + ] + } + } + }, + { + "componentName": "Wrapper", + "title": "备注容器", + "category": "Others", + "npm": { + "package": "@alifd/ali-lowcode-components", + "version": "latest", + "exportName": "NoteWrapper", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "note", + "propType": "string", + "defaultValue": "这是一个备注" + } + ], + "configure": { + "component": { + "isContainer": true, + "isModal": false + }, + "props": [ + { + "name": "style", + "setter": "StyleSetter" + }, + { + "name": "note", + "propType": "string", + "setter": "StringSetter" + } + ] + }, + "icon": "" + }, + { + "componentName": "NumberPicker", + "title": "数字输入框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "NumberPicker", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["large", "medium"] + }, + "description": "大小", + "defaultValue": "medium" + }, + { + "name": "type", + "propType": { + "type": "oneOf", + "value": ["normal", "inline"] + }, + "description": "设置类型", + "defaultValue": "normal" + }, + { + "name": "value", + "propType": "number", + "description": "当前值" + }, + { + "name": "defaultValue", + "propType": "number", + "description": "默认值" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "step", + "propType": "number", + "description": "步长", + "defaultValue": 1 + }, + { + "name": "precision", + "propType": "number", + "description": "保留小数点后位数", + "defaultValue": 0 + }, + { + "name": "editable", + "propType": "bool", + "description": "用户是否可以输入", + "defaultValue": true + }, + { + "name": "autoFocus", + "propType": "bool", + "description": "自动焦点" + }, + { + "name": "max", + "propType": "number", + "description": "最大值", + "defaultValue": null + }, + { + "name": "min", + "propType": "number", + "description": "最小值", + "defaultValue": null + }, + { + "name": "format", + "propType": "func", + "description": "格式化当前值" + }, + { + "name": "upBtnProps", + "propType": "object", + "description": "增加按钮的props" + }, + { + "name": "downBtnProps", + "propType": "object", + "description": "减少按钮的props" + }, + { + "name": "label", + "propType": "string", + "description": "内联 label" + }, + { + "name": "innerAfter", + "propType": { + "type": "oneOfType", + "value": ["string", "icon"] + }, + "description": "inner after" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态" + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {number} value 评分值" + }, + { + "name": "onChange", + "propType": "func", + "description": "数值被改变的事件\n@param {Number} value 数据\n@param {Event} e DOM事件对象" + }, + { + "name": "onKeyDown", + "propType": "func", + "description": "键盘按下" + }, + { + "name": "onFocus", + "propType": "func", + "description": "焦点获得" + }, + { + "name": "onBlur", + "propType": "func", + "description": "焦点失去" + }, + { + "name": "onCorrect", + "propType": "func", + "description": "数值订正后的回调\n@param {Object} obj {currentValue,oldValue:String}" + }, + { + "name": "onDisabled", + "propType": "func" + }, + { + "name": "className", + "propType": "string", + "description": "自定义class" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + } + ], + "configure": { + "props": [ + { + "name": "value", + "title": "当前值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "defaultValue", + "title": "默认值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 尺寸\n@enumdesc 小, 中, 大", + "en_US": "prop: size | description: size" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "defaultValue": "medium" + }, + { + "name": "type", + "title": "类型", + "defaultValue": "normal", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "普通", + "value": "normal" + }, + { + "title": "内联", + "value": "inline" + } + ] + } + }, + "ExpressionSetter" + ] + } + } + }, + { + "name": "innerAfter", + "title": "单位", + "setter": ["StringSetter", "ExpressionSetter"] + }, + { + "name": "step", + "title": "步长", + "defaultValue": 1, + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "precision", + "title": "小数位数", + "defaultValue": 0, + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "max", + "title": "最大值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "min", + "title": "最小值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "editable", + "title": "可以输入", + "defaultValue": true, + "setter": ["BoolSetter", "ExpressionSetter"] + }, + { + "name": "format", + "title": "格式化", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + } + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + }, + { + "name": "style", + "setter": { + "componentName": "StyleSetter" + } + } + ], + "supports": { + "events": ["onChange", "onKeyDown", "onFocus", "onBlur", "onCorrect"] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Page", + "title": "页面", + "props": [ + { + "name": "style", + "propType": "object", + "defaultValue": { + "padding": 12 + } + } + ], + "configure": { + "supports": { + "style": true + }, + "component": { + "isContainer": true, + "disableBehaviors": "*", + "nestingRule": { + "childWhitelist": ["NextPage"] + } + } + }, + "category": "基础" + }, + { + "componentName": "Pagination", + "title": "翻页器", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Pagination", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "type", + "title": { + "label": "组件类型", + "tip": "分页组件类型" + }, + "propType": { + "type": "oneOf", + "value": ["normal", "simple", "mini"] + }, + "description": "分页组件类型", + "defaultValue": "normal" + }, + { + "name": "shape", + "title": { + "label": "按钮样式", + "tip": "前进后退按钮样式" + }, + "propType": { + "type": "oneOf", + "value": ["normal", "arrow-only", "arrow-prev-only", "no-border"] + }, + "description": "前进后退按钮样式", + "defaultValue": "normal" + }, + { + "name": "size", + "title": { + "label": "尺寸", + "tip": "分页组件大小" + }, + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "分页组件大小", + "defaultValue": "medium" + }, + { + "name": "current", + "propType": "number", + "description": "（受控）当前页码" + }, + { + "name": "defaultCurrent", + "title": { + "label": "初始页码", + "tip": "（非受控）初始页码" + }, + "propType": "number", + "description": "（非受控）初始页码", + "defaultValue": 1 + }, + { + "name": "onChange", + "propType": "func", + "description": "页码发生改变时的回调函数\n@param {Number} current 改变后的页码数\n@param {Object} e 点击事件对象" + }, + { + "name": "total", + "propType": "number", + "description": "总记录数", + "defaultValue": 100 + }, + { + "name": "totalRender", + "propType": "func", + "title": { + "label": "总数渲染", + "tip": "总数的渲染函数\n@param {Number} total 总数\n@param {Array} range 当前数据在总数中的区间" + } + }, + { + "name": "pageShowCount", + "propType": "number", + "title": { + "label": "显示页数", + "tip": "页码显示的数量，更多的使用...代替" + }, + "defaultValue": 5 + }, + { + "name": "pageSize", + "title": { + "label": "单页记录", + "tip": "一页中的记录数" + }, + "propType": "number", + "description": "一页中的记录数", + "defaultValue": 10 + }, + { + "name": "pageSizeSelector", + "title": { + "label": "选择器类型", + "tip": "每页显示选择器类型" + }, + "propType": { + "type": "oneOf", + "value": [false, "filter", "dropdown"] + }, + "description": "每页显示选择器类型", + "defaultValue": false + }, + { + "name": "pageNumberRender", + "propType": "func", + "title": { + "label": "自定义页码", + "tip": "自定义页码渲染函数，函数作用于页码button以及当前页/总页数的数字渲染\n@param {Number} index 分页的页码，从1开始\n@return {ReactNode} 返回渲染结果" + } + }, + { + "name": "pageSizePosition", + "title": { + "label": "选择器位置", + "tip": "每页显示选择器在组件中的位置" + }, + "propType": { + "type": "oneOf", + "value": ["start", "end"] + }, + "description": "每页显示选择器在组件中的位置", + "defaultValue": "start" + }, + { + "name": "onPageSizeChange", + "propType": "func", + "description": "每页显示记录数量改变时的回调函数\n@param {Number} pageSize 改变后的每页显示记录数" + }, + { + "name": "hideOnlyOnePage", + "propType": "bool", + "title": { + "label": "单页隐藏", + "tip": "当分页数为1时，是否隐藏分页器" + }, + "defaultValue": false + }, + { + "name": "showJump", + "propType": "bool", + "title": { + "label": "显示跳转", + "tip": "type 设置为 normal 时，在页码数超过5页后，会显示跳转输入框与按钮，当设置 showJump 为 false 时，不再显示该跳转区域" + }, + "defaultValue": true + }, + { + "name": "link", + "title": { + "label": "跳转链接", + "tip": "设置页码按钮的跳转链接，它的值为一个包含 {page} 的模版字符串" + }, + "propType": "string", + "description": "设置页码按钮的跳转链接，它的值为一个包含 {page} 的模版字符串" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "rtl", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "current", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "title": { + "label": "当前页面", + "tip": "（受控）当前页码" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["NumberSetter", "ExpressionSetter"] + } + } + }, + { + "name": "total", + "title": { + "label": "总记录数", + "tip": "总记录数" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["NumberSetter", "ExpressionSetter"] + } + } + } + ] + } + }, + "icon": "", + "category": "导航" + }, + { + "componentName": "Paragraph", + "title": "Paragraph", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Typography", + "main": "", + "destructuring": true, + "subName": "Paragraph" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "component", + "propType": { + "type": "instanceOf", + "value": "elementType" + }, + "description": "设置标签类型", + "defaultValue": "p" + }, + { + "name": "type", + "defaultValue": "long" + }, + { + "name": "size", + "defaultValue": "medium" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "title": "饼图", + "category": "常用图表(试验)", + "componentName": "PieChart", + "icon": "https://unpkg.alibaba-inc.com/@ali/vc-bizcharts@1.1.4/src/vc-PieChart/logo.svg", + "npm": { + "package": "bizcharts", + "version": "4.0.14", + "exportName": "PieChart", + "main": "", + "destructuring": true, + "subName": "" + }, + "configure": { + "props": [ + { + "name": "angleField", + "title": "占比字段", + "tip": "扇形切片大小（弧度）所对应的数据字段名", + "setter": "StringSetter" + }, + { + "name": "colorField", + "title": "颜色字段", + "tip": "扇形颜色映射对应的数据字段名", + "setter": "StringSetter" + }, + { + "name": "titleConfig", + "title": "标题配置", + "display": "block", + "type": "group", + "items": [ + { + "name": "title.text", + "title": "标题", + "setter": "StringSetter" + }, + { + "name": "title.visible", + "title": "是否展示", + "setter": "BoolSetter" + } + ] + }, + { + "name": "descriptionConfig", + "title": "描述配置", + "display": "block", + "type": "group", + "items": [ + { + "name": "description.text", + "title": "描述", + "setter": "StringSetter" + }, + { + "name": "description.visible", + "title": "是否展示", + "setter": "BoolSetter" + } + ] + }, + { + "name": "data", + "title": "图表数据", + "tip": "配置图表数据", + "setter": "JsonSetter" + } + ], + "supports": { + "style": true + } + } + }, + { + "componentName": "PopupItem", + "title": "PopupItem", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Nav", + "main": "", + "destructuring": true, + "subName": "PopupItem" + }, + "props": [ + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "icon", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "instanceOf", + "value": "node" + } + ] + }, + "description": "自定义图标，可以使用 Icon 的 type, 也可以使用组件 ``" + }, + { + "name": "label", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "标签内容" + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "弹出内容" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "Progress", + "title": "进度指示器", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Progress", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "shape", + "propType": { + "type": "oneOf", + "value": ["circle", "line"] + }, + "description": "形态", + "defaultValue": "line" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "尺寸", + "defaultValue": "medium" + }, + { + "name": "percent", + "title": "百分比", + "propType": "number", + "description": "所占百分比", + "defaultValue": 0 + }, + { + "name": "state", + "title": "进度状态", + "propType": { + "type": "oneOf", + "value": ["normal", "success", "error"] + }, + "description": "进度状态, 显示优先级: color > progressive > state", + "defaultValue": "normal" + }, + { + "name": "progressive", + "title": { + "label": "色阶变化", + "tip": "是否为色彩阶段变化模式, 显示优先级: color > progressive > state" + }, + "propType": "bool", + "description": "是否为色彩阶段变化模式, 显示优先级: color > progressive > state", + "defaultValue": false + }, + { + "name": "hasBorder", + "title": "边框", + "propType": "bool", + "description": "是否添加 Border（只适用于 Line Progress)", + "defaultValue": false + }, + { + "name": "textRender", + "title": { + "label": "文本渲染", + "tip": "文本渲染函数\n@param {Number} percent 当前的进度信息\n@param {Object} option 额外的参数\n@property {Boolean} option.rtl 是否在rtl 模式下渲染\n@return {ReactNode} 返回文本节点" + }, + "propType": "func", + "description": "文本渲染函数\n@param {Number} percent 当前的进度信息\n@param {Object} option 额外的参数\n@property {Boolean} option.rtl 是否在rtl 模式下渲染\n@return {ReactNode} 返回文本节点" + }, + { + "name": "color", + "propType": "string", + "description": "进度条颜色, 显示优先级: color > progressive > state" + }, + { + "name": "backgroundColor", + "propType": "string", + "description": "背景色" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "rtl", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "color", + "title": { + "label": "进度条颜色", + "tip": "color|进度条颜色, 显示优先级: color > progressive > state" + }, + "setter": { + "componentName": "ColorSetter" + } + }, + { + "name": "backgroundColor", + "title": { + "label": "背景色", + "tip": "backgroundColor|背景色" + }, + "setter": { + "componentName": "ColorSetter" + } + } + ] + } + }, + "icon": "", + "category": "反馈" + }, + { + "componentName": "RadioItem", + "title": "单选菜单项", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Menu", + "main": "", + "destructuring": true, + "subName": "RadioItem" + }, + "props": [ + { + "name": "checked", + "propType": "bool", + "description": "是否选中", + "defaultValue": false + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "onChange", + "propType": "func", + "description": "选中或取消选中触发的回调函数\n@param {Boolean} checked 是否选中\n@param {Object} event 选中事件对象" + }, + { + "name": "helper", + "propType": "node", + "description": "帮助文本" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["Menu", "SubMenu", "Menu.Group", "MenuButton"] + } + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Radio.Group", + "title": "单选框组", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Radio", + "main": "", + "destructuring": true, + "subName": "Group" + }, + "props": [ + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "name", + "propType": "string", + "description": "name" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["large", "medium", "small"] + }, + "description": "尺寸", + "defaultValue": "medium" + }, + { + "name": "shape", + "propType": { + "type": "oneOf", + "value": ["normal", "button"] + }, + "description": "展示形态" + }, + { + "name": "value", + "propType": { + "type": "oneOfType", + "value": ["string", "number", "bool"] + }, + "description": "选中项的值" + }, + { + "name": "defaultValue", + "propType": { + "type": "oneOfType", + "value": ["string", "number", "bool"] + }, + "description": "默认值" + }, + { + "name": "component", + "propType": "string", + "description": "设置标签类型", + "defaultValue": "div" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否被禁用" + }, + { + "name": "dataSource", + "propType": "object", + "description": "可选项列表" + }, + { + "name": "itemDirection", + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "子项目的排列方式", + "defaultValue": "hoz" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态", + "defaultValue": false + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {number} value 评分值" + }, + { + "name": "onChange", + "propType": "func", + "description": "选中值改变时的事件\n@param {String/Number} value 选中项的值\n@param {Event} e Dom 事件对象" + } + ], + "configure": { + "props": [ + { + "name": "shape", + "title": "展示形状", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "默认", + "value": "normal" + }, + { + "title": "按钮", + "value": "button" + } + ] + } + }, + "defaultValue": "normal" + }, + { + "name": "disabled", + "title": "是否禁用", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + } + }, + { + "name": "itemDirection", + "title": "排列方式", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "水平排列", + "value": "hoz" + }, + { + "title": "垂直排列", + "value": "ver" + } + ] + } + }, + "defaultValue": "hoz" + }, + { + "name": "isPreview", + "title": "预览态", + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "defaultValue", + "title": "默认值", + "defaultValue": "", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + } + }, + { + "name": "dataSource", + "display": "block", + "title": "选项", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "label", + "title": "label", + "setter": "StringSetter" + }, + { + "name": "value", + "title": "value", + "setter": "StringSetter" + } + ] + } + }, + "initialValue": { + "label": "选项一", + "value": "1" + } + } + } + }, + "ExpressionSetter" + ] + } + } + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ], + "supports": { + "style": true, + "events": ["onChange"] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Radio", + "title": "单选框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Radio", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "id", + "propType": "string", + "description": "input元素id" + }, + { + "name": "name", + "propType": "string", + "description": "name" + }, + { + "name": "checked", + "propType": "bool", + "description": "是否选中" + }, + { + "name": "defaultChecked", + "propType": "bool", + "description": "是否默认选中" + }, + { + "name": "label", + "propType": "string", + "description": "通过属性配置label" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否被禁用" + }, + { + "name": "value", + "propType": { + "type": "oneOfType", + "value": ["string", "number", "bool"] + }, + "description": "value" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态", + "defaultValue": false + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容" + }, + { + "name": "onChange", + "propType": "func", + "description": "状态变化时触发的事件\n@param {Boolean} checked 是否选中\n@param {Event} e Dom 事件对象" + }, + { + "name": "onMouseEnter", + "propType": "func", + "description": "鼠标进入enter事件\n@param {Event} e Dom 事件对象" + }, + { + "name": "onMouseLeave", + "propType": "func", + "description": "鼠标离开事件\n@param {Event} e Dom 事件对象" + } + ], + "icon": "", + "category": "内容" + }, + { + "componentName": "RangeCalendar", + "title": "RangeCalendar", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Calendar", + "main": "", + "destructuring": true, + "subName": "RangeCalendar" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "description": "样式前缀", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "defaultStartValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "默认的开始日期" + }, + { + "name": "defaultEndValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "默认的结束日期" + }, + { + "name": "startValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "开始日期（moment 对象）" + }, + { + "name": "endValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "结束日期（moment 对象）" + }, + { + "name": "disableChangeMode", + "propType": "bool", + "defaultValue": false + }, + { + "name": "format", + "propType": "string", + "defaultValue": "YYYY-MM-DD" + }, + { + "name": "showOtherMonth", + "propType": "bool", + "description": "是否显示非本月的日期", + "defaultValue": false + }, + { + "name": "defaultVisibleMonth", + "propType": "func", + "description": "模板展示的月份（起始月份）" + }, + { + "name": "onVisibleMonthChange", + "propType": "func", + "description": "展现的月份变化时的回调\n@param {Object} value 显示的月份 (moment 对象)\n@param {String} reason 触发月份改变原因" + }, + { + "name": "disabledDate", + "propType": "func", + "description": "不可选择的日期\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\n@returns {Boolean}" + }, + { + "name": "onSelect", + "propType": "func", + "description": "选择日期单元格时的回调\n@param {Object} value 对应的日期值 (moment 对象)" + }, + { + "name": "dateCellRender", + "propType": "func", + "description": "自定义日期单元格渲染" + }, + { + "name": "monthCellRender", + "propType": "func", + "description": "自定义月份渲染函数\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@returns {ReactNode}" + }, + { + "name": "yearCellRender", + "propType": "func" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "startValue", + "setter": "DateSetter" + }, + { + "name": "defaultStartValue", + "setter": "DateSetter" + }, + { + "name": "defaultEndValue", + "setter": "DateSetter" + }, + { + "name": "endValue", + "setter": "DateSetter" + } + ] + } + }, + "category": "基础" + }, + { + "componentName": "RangePicker", + "title": "日期区段选择", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "DatePicker", + "main": "", + "destructuring": true, + "subName": "RangePicker" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "type", + "propType": { + "type": "oneOf", + "value": ["date", "month", "year"] + }, + "description": "日期范围类型", + "defaultValue": "date" + }, + { + "name": "defaultVisibleMonth", + "propType": "func", + "description": "默认展示的起始月份\n@return {MomentObject} 返回包含指定月份的 moment 对象实例" + }, + { + "name": "onVisibleMonthChange", + "propType": "func" + }, + { + "name": "value", + "propType": "array", + "description": "日期范围值数组 [moment, moment]" + }, + { + "name": "defaultValue", + "propType": "array", + "description": "初始的日期范围值数组 [moment, moment]" + }, + { + "name": "format", + "propType": "string", + "description": "日期格式", + "defaultValue": "YYYY-MM-DD" + }, + { + "name": "showTime", + "propType": "bool", + "description": "是否使用时间控件，支持传入 TimePicker 的属性", + "defaultValue": false + }, + { + "name": "resetTime", + "propType": "bool", + "description": "每次选择是否重置时间（仅在 showTime 开启时有效）", + "defaultValue": false + }, + { + "name": "disabledDate", + "propType": "func", + "description": "禁用日期函数\n@param {MomentObject} 日期值\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\n@return {Boolean} 是否禁用" + }, + { + "name": "footerRender", + "propType": "func", + "description": "自定义面板页脚\n@return {Node} 自定义的面板页脚组件" + }, + { + "name": "onChange", + "propType": "func", + "description": "日期范围值改变时的回调 [ MomentObject|String, MomentObject|String ]\n@param {Array} value 日期值" + }, + { + "name": "onOk", + "propType": "func", + "description": "点击确认按钮时的回调 返回开始时间和结束时间`[ MomentObject|String, MomentObject|String ]`\n@return {Array} 日期范围" + }, + { + "name": "label", + "propType": "string", + "description": "输入框内置标签" + }, + { + "name": "state", + "propType": { + "type": "oneOf", + "value": ["error", "loading", "success"] + }, + "description": "输入框状态" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "输入框尺寸", + "defaultValue": "medium" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "hasClear", + "propType": "bool", + "description": "是否显示清空按钮", + "defaultValue": true + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层显示状态" + }, + { + "name": "defaultVisible", + "propType": "bool", + "description": "弹层默认是否显示", + "defaultValue": false + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层展示状态变化时的回调\n@param {Boolean} visible 弹层是否显示\n@param {String} type 触发弹层显示和隐藏的来源 okBtnClick 表示由确认按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "popupTriggerType", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "弹层触发方式", + "defaultValue": "click" + }, + { + "name": "popupAlign", + "propType": "string", + "description": "弹层对齐方式, 具体含义见 OverLay文档", + "defaultValue": "tl tl" + }, + { + "name": "popupContainer", + "propType": "node", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹层自定义样式类" + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "startDateInputAriaLabel", + "propType": "string", + "description": "开始日期输入框的 aria-label 属性" + }, + { + "name": "startTimeInputAriaLabel", + "propType": "string", + "description": "开始时间输入框的 aria-label 属性" + }, + { + "name": "endDateInputAriaLabel", + "propType": "string", + "description": "结束日期输入框的 aria-label 属性" + }, + { + "name": "endTimeInputAriaLabel", + "propType": "string", + "description": "结束时间输入框的 aria-label 属性" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "name", + "propType": "string" + }, + { + "name": "popupComponent", + "propType": "string" + }, + { + "name": "popupContent", + "propType": "node" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "supports": { + "style": true, + "events": ["onVisibleMonthChange", "onChange", "onOk", "onVisibleChange"] + }, + "props": [ + { + "name": "defaultValue", + "title": { + "label": "默认值", + "tip": "初始的日期范围值数组 [moment, moment]" + }, + "setter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": 0, + "title": "开始时间", + "setter": "DateSetter" + }, + { + "name": 1, + "title": "结束时间", + "setter": "DateSetter" + } + ] + } + } + } + }, + { + "name": "type", + "title": "日期类型", + "setter": { + "setter": "RadioGroupSetter", + "props": { + "options": ["date", "month", "year"] + } + }, + "description": "日期范围类型", + "defaultValue": "date" + }, + { + "name": "label", + "title": "内置标签", + "setter": "StringSetter", + "description": "输入框内置标签" + }, + { + "name": "state", + "title": "输入状态", + "setter": { + "setter": "RadioGroupSetter", + "props": { + "options": ["error", "loading", "success"] + } + }, + "description": "输入框状态" + }, + { + "name": "size", + "title": "尺寸", + "setter": { + "setter": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "description": "输入框尺寸", + "defaultValue": "medium" + }, + { + "name": "disabled", + "setter": "BoolSetter", + "title": "是否禁用" + }, + { + "name": "hasClear", + "setter": "BoolSetter", + "title": "清空按钮", + "defaultValue": true + }, + { + "name": "defaultVisible", + "setter": "BoolSetter", + "title": "显示弹层", + "defaultValue": false + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ] + }, + "category": "内容", + "icon": "" + }, + { + "componentName": "Range", + "title": "区段选择器", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Range", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "id", + "propType": "string" + }, + { + "name": "name", + "propType": "string", + "description": "name" + }, + { + "name": "value", + "propType": "number", + "description": "分值" + }, + { + "name": "slider", + "title": { + "label": "滑块个数", + "tip": "滑块个数: 单个, 两个" + }, + "propType": { + "type": "oneOf", + "value": ["single", "double"] + }, + "description": "滑块个数\n@enumdesc 单个, 两个", + "defaultValue": "single" + }, + { + "name": "min", + "title": { + "label": "最小值" + }, + "propType": "number", + "description": "最小值", + "defaultValue": 0 + }, + { + "name": "max", + "title": { + "label": "最大值" + }, + "propType": "number", + "description": "最大值", + "defaultValue": 100 + }, + { + "name": "step", + "title": { + "label": "步长", + "tip": "步长，取值必须大于 0，并且可被 (max - min) 整除。" + }, + "propType": "number", + "description": "步长，取值必须大于 0，并且可被 (max - min) 整除。", + "defaultValue": 1 + }, + { + "name": "marksPosition", + "title": { + "label": "Marks 位置", + "tip": "marksPosition|marks显示在上方('above')or下方('below')" + }, + "propType": { + "type": "oneOf", + "value": ["above", "below"] + }, + "description": "marks显示在上方('above')or下方('below')", + "defaultValue": "above" + }, + { + "name": "disabled", + "propType": "bool", + "description": "值为 `true` 时，滑块为禁用状态", + "defaultValue": false + }, + { + "name": "onChange", + "propType": "func", + "description": "当 Range 的值发生改变后，会触发 onChange 事件，并把改变后的值作为参数传入, 如果设置了value, 要配合此函数做受控使用\n@param {String/number} value" + }, + { + "name": "onProcess", + "propType": "func", + "description": "滑块拖动的时候触发的事件,不建议在这里setState, 一般情况下不需要用, 滑动时有特殊需求时使用\n@param {String/number} value" + }, + { + "name": "hasTip", + "title": { + "label": "是否显示 tip", + "tip": "hasTip" + }, + "propType": "bool", + "description": "是否显示 tip", + "defaultValue": true + }, + { + "name": "reverse", + "title": { + "label": "选中态反转", + "tip": "reverse" + }, + "propType": "bool", + "description": "选中态反转", + "defaultValue": false + }, + { + "name": "pure", + "propType": "bool", + "description": "是否pure render", + "defaultValue": false + }, + { + "name": "fixedWidth", + "propType": "bool", + "description": "是否为拖动线段类型,默认slider为double, defaultValue必传且指定区间", + "defaultValue": false + }, + { + "name": "tooltipVisible", + "propType": "bool", + "description": "tooltip是否默认展示", + "defaultValue": false + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态", + "defaultValue": false + } + ], + "configure": { + "props": [ + { + "name": "value", + "title": "当前值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "defaultValue", + "title": "默认值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "min", + "title": { + "label": "最小值" + }, + "setter": "NumberSetter", + "description": "最小值", + "defaultValue": 0 + }, + { + "name": "max", + "title": { + "label": "最大值" + }, + "setter": "NumberSetter", + "description": "最大值", + "defaultValue": 100 + }, + { + "name": "step", + "title": { + "label": "步长", + "tip": "步长，取值必须大于 0，并且可被 (max - min) 整除。" + }, + "setter": "NumberSetter", + "description": "步长，取值必须大于 0，并且可被 (max - min) 整除。", + "defaultValue": 1 + }, + { + "name": "slider", + "title": { + "label": "滑块个数", + "tip": "滑块个数: 单个, 两个" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["single", "double"] + } + }, + "description": "滑块个数\n@enumdesc 单个, 两个", + "defaultValue": "single" + }, + { + "name": "marksPosition", + "title": { + "label": "Marks 位置", + "tip": "marksPosition|marks显示在上方('above')or下方('below')" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["above", "below"] + } + }, + "description": "marks显示在上方('above')or下方('below')", + "defaultValue": "above" + }, + { + "name": "disabled", + "title": "是否禁用", + "setter": "BoolSetter", + "description": "值为 `true` 时，滑块为禁用状态", + "defaultValue": false + }, + { + "name": "hasTip", + "title": { + "label": "显示 Tip", + "tip": "hasTip" + }, + "setter": "BoolSetter", + "description": "是否显示 tip", + "defaultValue": true + }, + { + "name": "fixedWidth", + "title": "固定宽度", + "setter": "BoolSetter", + "description": "是否为拖动线段类型,默认slider为double, defaultValue必传且指定区间", + "defaultValue": false + }, + { + "name": "tooltipVisible", + "display": "block", + "setter": "BoolSetter", + "title": "tooltip是否默认展示", + "defaultValue": false + }, + { + "name": "reverse", + "display": "block", + "title": { + "label": "选中态反转", + "tip": "reverse" + }, + "setter": "BoolSetter", + "description": "选中态反转", + "defaultValue": false + }, + { + "name": "isPreview", + "display": "block", + "setter": "BoolSetter", + "title": "是否为预览态", + "defaultValue": false + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ] + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Rating", + "title": "评分", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Rating", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "name", + "propType": "string", + "description": "name" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "defaultValue", + "propType": "number", + "description": "默认值", + "defaultValue": 0 + }, + { + "name": "value", + "propType": "number", + "description": "值" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "尺寸", + "defaultValue": "medium" + }, + { + "name": "count", + "propType": "number", + "description": "评分的总数", + "defaultValue": 5 + }, + { + "name": "showGrade", + "propType": "bool", + "description": "是否显示 grade", + "defaultValue": false + }, + { + "name": "allowHalf", + "propType": "bool", + "description": "是否允许半星评分", + "defaultValue": false + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态", + "defaultValue": false + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容" + }, + { + "name": "readOnly", + "propType": "bool", + "description": "是否为只读态，效果上同 disabeld", + "defaultValue": false + }, + { + "name": "onChange", + "propType": "func", + "description": "用户点击评分时触发的回调\n@param {String} value 评分值" + }, + { + "name": "onHoverChange", + "propType": "func", + "description": "用户hover评分时触发的回调\n@param {String} value 评分值" + } + ], + "configure": { + "props": [ + { + "name": "value", + "title": "当前值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "defaultValue", + "title": "默认值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 尺寸\n@enumdesc 小, 中, 大", + "en_US": "prop: size | description: size" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "defaultValue": "medium" + }, + { + "name": "count", + "title": "评分总数", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "allowHalf", + "title": "半星评分", + "setter": ["BoolSetter", "ExpressionSetter"] + }, + { + "name": "showGrade", + "title": "显示分数", + "setter": ["BoolSetter", "ExpressionSetter"] + }, + { + "name": "readAs", + "title": "评分文案生成方法", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + } + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + }, + { + "name": "style", + "setter": { + "componentName": "StyleSetter" + } + } + ], + "supports": { + "events": ["onChange", "onHoverChange"] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "ResponsiveGrid.Cell", + "title": "布局容器 Cell", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "ResponsiveGrid", + "main": "", + "destructuring": true, + "subName": "Cell" + }, + "props": [ + { + "name": "colSpan", + "propType": "number", + "description": "横向，占据几列" + }, + { + "name": "rowSpan", + "propType": "number", + "description": "纵向，占据几行" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + } + }, + "experimental": { + "getResizingHandlers": { + "type": "JSFunction", + "value": "node => {\n const currentNodeIndex = node.getIndex();\n const parent = node.getParent();\n if (!parent) return [];\n let layout = parent.getPropValue(\"layout\");\n if (!layout) return [];\n layout = layout.split(\":\").map(item => parseInt(item, 10));\n \n if (currentNodeIndex >= layout.length - 1) {\n return [];\n }\n return [\"e\"];\n }" + }, + "callbacks": { + "onResizeStart": { + "type": "JSFunction", + "value": "(e, currentNode) => {\n const { trigger } = e;\n let nodeIndex = currentNode.getIndex();\n let startLayout = currentNode.getParent().getPropValue(\"layout\");\n startLayout = startLayout.split(\":\").map(item => parseInt(item, 10));\n let eachWidth = currentNode.getRect().width / startLayout[nodeIndex];\n \n currentNode.nodeIndex = nodeIndex;\n currentNode.startLayout = startLayout;\n currentNode.eachWidth = eachWidth;\n }" + }, + "onResize": { + "type": "JSFunction", + "value": "(e, currentNode) => {\n const { trigger, deltaX, deltaY } = e;\n const { nodeIndex, startLayout, eachWidth } = currentNode;\n let moveColumn = Math.round(deltaX / eachWidth);\n const layout = [...startLayout]; \n if (moveColumn > 0) {\n moveColumn = Math.min(moveColumn, layout[nodeIndex + 1] - 1);\n } else {\n moveColumn = -Math.min(-moveColumn, layout[nodeIndex] - 1);\n }\n layout[nodeIndex] += moveColumn;\n layout[nodeIndex + 1] -= moveColumn;\n \n let nextNode = currentNode\n .getParent()\n .getChildren()\n .filter((c, index) => {\n return index === nodeIndex + 1;\n });\n \n currentNode.setPropValue(\"colSpan\", layout[nodeIndex]);\n \n if (nextNode && nextNode[0]) {\n nextNode[0].setPropValue(\"colSpan\", layout[nodeIndex + 1]);\n }\n \n currentNode.getParent().setPropValue(\"layout\", layout.join(\":\"));\n }" + } + } + }, + "icon": "", + "category": "容器" + }, + { + "componentName": "ResponsiveGrid", + "title": "布局容器", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "ResponsiveGrid", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "any" + }, + { + "name": "device", + "propType": { + "type": "oneOf", + "value": ["phone", "tablet", "desktop"] + }, + "description": "设备，用来做自适应，默认为PC", + "defaultValue": "desktop" + }, + { + "name": "columns", + "propType": "number", + "description": "分为几列", + "defaultValue": 12 + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": [ + { + "name": "layout", + "title": "布局", + "defaultValue": "6:6", + "setter": { + "componentName": "StringSetter" + }, + "extraProps": { + "setValue": { + "type": "JSFunction", + "value": "setValue(target, value) {\n \n let arrValue = value.split(\":\");\n arrValue = arrValue.filter(item => {\n return item && item.trim(); \n });\n const flag = arrValue.find(item => {\n return isNaN(Number(item));\n });\n if (flag) {\n return;\n }\n const node = target.getNode();\n node.mergeChildren(\n (child, index) => {\n child.setPropValue(\"colSpan\", arrValue[index]);\n return index >= arrValue.length;\n },\n children => {\n let l = children.length;\n const items = [];\n while (l++ < arrValue.length) {\n items.push({\n componentName: \"ResponsiveGrid.Cell\",\n props: {\n colSpan: arrValue[l - 1] || 1\n }\n });\n }\n return items;\n },\n null\n );\n }" + } + } + }, + { + "name": "gap", + "title": "列间距", + "defaultValue": 0, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "NumberSetter", + "props": { + "defaultValue": 8 + } + }, + { + "componentName": "JsonSetter", + "props": { + "defaultValue": [8, 4] + } + }, + "ExpressionSetter" + ] + } + } + }, + { + "name": "dense", + "title": "紧密模式", + "defaultValue": false, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + } + }, + { + "name": "style", + "setter": { + "componentName": "StyleSetter" + } + } + ] + }, + "icon": "", + "category": "容器" + }, + { + "componentName": "RichText", + "title": "需求占位", + "npm": { + "package": "@alifd/ali-lowcode-components", + "version": "latest", + "exportName": "RichText", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "override": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "maxHeight", + "title": "最大高度", + "propType": "number", + "setter": "NumberSetter", + "description": "最大高度" + }, + { + "name": "content", + "title": "需求内容", + "display": "inline", + "supportVariable": true, + "setter": { + "componentName": "EditSetter", + "props": { + "title": "点击编辑需求内容" + } + } + } + ] + } + }, + "experimental": { + "getResizingHandlers": { + "type": "JSFunction", + "value": "() => {\n return [\"e\"];\n }" + }, + "callbacks": { + "onResizeStart": { + "type": "JSFunction", + "value": "(e, currentNode) => {\n const parent = currentNode.getParent();\n if (parent) {\n const parentNode = parent.getDOMNode();\n if (parentNode) {\n currentNode.parentRect = parentNode.getBoundingClientRect();\n }\n }\n currentNode.beforeSpan = currentNode.getPropValue(\"colSpan\") || 12;\n currentNode.startRect = currentNode.getRect();\n }" + }, + "onResize": { + "type": "JSFunction", + "value": "(e, currentNode) => {\n const { deltaX } = e;\n const startWidth = currentNode.startRect\n ? currentNode.startRect.width\n : currentNode.beforeSpan * (currentNode.parentRect.width / 12);\n let width = startWidth + deltaX;\n if (!currentNode.startRect) {\n currentNode.startRect = {\n width\n };\n }\n width = Math.max(0, width); \n width = Math.min(width, currentNode.parentRect.width); \n currentNode.getDOMNode().style[\"width\"] = `${Math.round(width)}px`;\n }" + }, + "onResizeEnd": { + "type": "JSFunction", + "value": "(e, currentNode) => {\n currentNode.setPropValue(\"style.width\", currentNode.getDOMNode().style[\"width\"]);\n }" + } + } + }, + "icon": "https://img.alicdn.com/imgextra/i3/O1CN01G7Lc8e1pZL7p4cdKc_!!6000000005374-2-tps-112-112.png", + "category": "常用" + }, + { + "componentName": "Search", + "title": "搜索", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Search", + "main": "", + "destructuring": true, + "subName": "" + }, + "configure": { + "supports": { + "style": true, + "events": ["onChange", "onSearch", "onFilterChange"] + }, + "props": [ + { + "name": "placeholder", + "title": "提示文字", + "setter": "StringSetter", + "description": "默认提示" + }, + { + "name": "defaultValue", + "title": "默认值", + "setter": "StringSetter", + "description": "搜索框默认值" + }, + { + "name": "searchText", + "title": "按钮文案", + "setter": "StringSetter", + "description": "button 的内容" + }, + { + "name": "size", + "title": { + "label": "尺寸", + "tip": "size|'大', '小'" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "large", + "value": "large" + }, + { + "title": "medium", + "value": "medium" + } + ] + } + }, + "description": "大小\n@enumdesc '大', '小'", + "defaultValue": "medium" + }, + { + "name": "shape", + "title": { + "label": "形状", + "tip": "shape|形状" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["normal", "simple"] + } + }, + "description": "形状", + "defaultValue": "normal" + }, + { + "name": "type", + "title": { + "label": "类型", + "tip": "type|类型 shape=normal: primary/secondary; shape=simple: normal/dark;" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["primary", "secondary", "normal", "dark"] + } + }, + "description": "类型 shape=normal: primary/secondary; shape=simple: normal/dark;", + "defaultValue": "normal" + }, + { + "name": "hasClear", + "title": "清除按钮", + "setter": "BoolSetter", + "description": "是否显示清除按钮", + "defaultValue": false + }, + { + "name": "hasIcon", + "title": "搜索图标", + "setter": "BoolSetter", + "description": "是否显示搜索按钮", + "defaultValue": true + }, + { + "name": "disabled", + "title": "是否禁用", + "setter": "BoolSetter", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "dataSource", + "display": "block", + "title": { + "label": "搜索框下拉联想列表", + "tip": "dataSource | 搜索框下拉联想列表" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["JsonSetter", "ExpressionSetter"] + } + } + }, + { + "name": "filter", + "display": "block", + "title": { + "label": "选择器数据", + "tip": "filter|选择器数据" + }, + "setter": { + "componentName": "JsonSetter" + } + }, + { + "name": "defaultFilterValue", + "display": "block", + "title": "选择器默认值", + "setter": "StringSetter", + "description": "选择器默认值" + } + ] + }, + "experimental": { + "initials": [ + { + "name": "dataSource", + "initial": { + "type": "JSFunction", + "value": "() => [\n {\n label: \"Recent\",\n value: \"Recent\"\n },\n {\n label: \"dress\",\n value: \"dress\"\n },\n {\n label: \"sunglasses\",\n value: \"sunglasses\"\n },\n {\n label: \"t-shirt\",\n value: \"t-shirt\"\n }\n ]" + } + } + ] + }, + "icon": "", + "category": "导航" + }, + { + "componentName": "Select.Option", + "title": "Select.Option", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Select", + "main": "", + "destructuring": true, + "subName": "Option" + }, + "props": [ + { + "name": "value", + "propType": "string", + "description": "选项值", + "defaultValue": "test" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + } + ], + "configure": { + "component": { + "isContainer": true + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Select", + "title": "选择器", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Select", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "placeholder", + "title": { + "label": "占位提示", + "tip": "属性: placeholder" + }, + "defaultValue": "请选择", + "propType": "string" + }, + { + "name": "mode", + "propType": { + "type": "oneOf", + "value": ["single", "multiple", "tag"] + }, + "description": "选择器模式" + }, + { + "name": "hasClear", + "title": { + "label": "清除按钮", + "tip": "属性: hasClear" + }, + "propType": "bool", + "defaultValue": false + }, + { + "name": "showSearch", + "title": { + "label": "可搜索", + "tip": "属性: showSearch" + }, + "propType": "bool", + "defaultValue": false + }, + { + "name": "dataSource" + }, + { + "type": "group", + "title": "其他配置", + "display": "block", + "items": [ + { + "name": "id", + "setter": "StringSetter", + "title": "ID" + }, + { + "name": "notFoundContent", + "title": { + "label": "空文案", + "tip": "notFoundContent|弹层内容为空的文案" + }, + "setter": "StringSetter", + "description": "弹层内容为空的文案" + }, + { + "name": "hasBorder", + "title": { + "label": "边框", + "tip": "是否有边框" + }, + "propType": "bool", + "setter": "BoolSetter", + "description": "是否有边框" + }, + { + "name": "autoWidth", + "title": "下拉等宽", + "propType": "bool", + "setter": "BoolSetter" + }, + { + "name": "hasArrow", + "title": "下拉箭头", + "propType": "bool", + "setter": "BoolSetter", + "description": "是否有下拉箭头", + "defaultValue": true + } + ] + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "dataSource", + "display": "block", + "title": "选项", + "tip": { + "title": "数据格式", + "url": "" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "label", + "title": "label", + "setter": "StringSetter" + }, + { + "name": "value", + "title": "value", + "setter": "StringSetter" + } + ] + } + }, + "initialValue": { + "title": "Title" + } + } + } + }, + "ExpressionSetter" + ] + } + } + }, + { + "name": "mode", + "title": { + "label": "模式", + "tip": "属性: mode" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "defaultValue": "single", + "options": [ + { + "value": "single", + "title": "单选" + }, + { + "value": "multiple", + "title": "多选" + }, + { + "value": "tag", + "title": "标签" + } + ] + } + } + } + ] + }, + "supports": { + "style": true, + "events": [ + { + "name": "onChange", + "propType": "func", + "description": "值发生变化" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层显示隐藏变化" + }, + { + "name": "onRemove", + "propType": "func", + "description": "Tag 被删除" + }, + { + "name": "onSearch", + "propType": "func", + "description": "搜索" + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Slider", + "title": "图片轮播", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Slider", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "className", + "propType": "any", + "description": "自定义传入的样式" + }, + { + "name": "slidesToShow", + "title": { + "label": "图片数量", + "tip": "slidesToShow|同时展示的图片数量" + }, + "propType": "number", + "description": "同时展示的图片数量", + "defaultValue": 1 + }, + { + "name": "slidesToScroll", + "title": { + "label": "同时滑动的图片数量", + "tip": "slidesToScroll" + }, + "propType": "number", + "description": "同时滑动的图片数量", + "defaultValue": 1 + }, + { + "name": "speed", + "title": { + "label": "轮播速度", + "tip": "speed" + }, + "propType": "number", + "description": "轮播速度", + "defaultValue": 600 + }, + { + "name": "activeIndex", + "title": { + "label": "指定轮播图", + "tip": "activeIndex|跳转到指定的轮播图（受控）" + }, + "propType": "number", + "description": "跳转到指定的轮播图（受控）" + }, + { + "name": "adaptiveHeight", + "title": { + "label": "自适应高度", + "tip": "adaptiveHeight" + }, + "propType": "bool", + "description": "是否使用自适应高度", + "defaultValue": false + }, + { + "name": "animation", + "title": { + "label": "动效类型", + "tip": "animation" + }, + "propType": { + "type": "oneOfType", + "value": ["string", "bool"] + }, + "description": "动效类型，默认是'slide'", + "defaultValue": "slide" + }, + { + "name": "arrows", + "title": { + "label": "箭头", + "tip": "arrows|是否显示箭头" + }, + "propType": "bool", + "description": "是否显示箭头", + "defaultValue": true + }, + { + "name": "arrowSize", + "title": { + "label": "箭头大小", + "tip": "arrowSize|导航箭头大小 可选值: 'medium', 'large'" + }, + "propType": { + "type": "oneOf", + "value": ["medium", "large"] + }, + "description": "导航箭头大小 可选值: 'medium', 'large'", + "defaultValue": "medium" + }, + { + "name": "arrowPosition", + "title": { + "label": "箭头位置", + "tip": "arrowPosition|导航箭头位置 可选值: 'inner', 'outer'" + }, + "propType": { + "type": "oneOf", + "value": ["inner", "outer"] + }, + "description": "导航箭头位置 可选值: 'inner', 'outer'", + "defaultValue": "inner" + }, + { + "name": "arrowDirection", + "title": { + "label": "箭头方向", + "tip": "arrowDirection|导航箭头的方向 可选值: 'hoz', 'ver'" + }, + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "导航箭头的方向 可选值: 'hoz', 'ver'", + "defaultValue": "hoz" + }, + { + "name": "autoplay", + "title": { + "label": "自动播放", + "tip": "autoplay" + }, + "propType": "bool", + "description": "是否自动播放", + "defaultValue": false + }, + { + "name": "autoplaySpeed", + "title": { + "label": "自动播放的速度", + "tip": "autoplaySpeed, 默认 3000 毫秒" + }, + "propType": "number", + "description": "自动播放的速度", + "defaultValue": 3000 + }, + { + "name": "nextArrow", + "propType": "node", + "description": "向后箭头", + "defaultValue": null + }, + { + "name": "prevArrow", + "propType": "node", + "description": "向前箭头", + "defaultValue": null + }, + { + "name": "centerMode", + "title": { + "label": "居中模式", + "tip": "centerMode" + }, + "propType": "bool", + "description": "是否启用居中模式", + "defaultValue": false + }, + { + "name": "dots", + "title": { + "label": "导航锚点", + "tip": "dots|是否显示导航锚点" + }, + "propType": "bool", + "description": "是否显示导航锚点", + "defaultValue": true + }, + { + "name": "dotsDirection", + "title": { + "label": "导航锚点位置", + "tip": "dotsDirection" + }, + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "导航锚点位置", + "defaultValue": "hoz" + }, + { + "name": "draggable", + "title": { + "label": "可拖拽", + "tip": "draggable" + }, + "propType": "bool", + "description": "是否可拖拽", + "defaultValue": true + }, + { + "name": "infinite", + "title": { + "label": "无穷循环", + "tip": "infinite" + }, + "propType": "bool", + "description": "是否使用无穷循环模式", + "defaultValue": true + }, + { + "name": "defaultActiveIndex", + "title": { + "label": "初始轮播图", + "tip": "defaultActiveIndex|初始被激活的轮播图" + }, + "propType": "number", + "description": "初始被激活的轮播图", + "defaultValue": 0 + }, + { + "name": "lazyLoad", + "title": { + "label": "懒加载", + "tip": "lazyLoad|是否启用懒加载" + }, + "propType": "bool", + "description": "是否启用懒加载", + "defaultValue": false + }, + { + "name": "slideDirection", + "title": { + "label": "轮播方向", + "tip": "slideDirection" + }, + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "轮播方向", + "defaultValue": "hoz" + }, + { + "name": "triggerType", + "title": { + "label": "触发方式", + "tip": "triggerType|锚点导航触发方式" + }, + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "锚点导航触发方式", + "defaultValue": "click" + }, + { + "name": "onChange", + "propType": "func", + "description": "轮播切换的回调函数\n@param {Number} index 幻灯片的索引" + }, + { + "name": "onBeforeChange", + "propType": "func" + }, + { + "name": "style", + "propType": "object", + "description": "自定义传入的class", + "defaultValue": null + }, + { + "name": "focusOnSelect", + "title": { + "label": "自动居中", + "tip": "focusOnSelect|多图轮播时，点击选中后自动居中" + }, + "propType": "bool", + "description": "多图轮播时，点击选中后自动居中", + "defaultValue": false + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "rtl", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "SplitButton", + "title": "分隔按钮", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "SplitButton", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "label", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "主按钮的文案" + }, + { + "name": "type", + "title": "按钮类型", + "propType": { + "type": "oneOf", + "value": ["normal", "primary", "secondary"] + }, + "description": "按钮的类型", + "defaultValue": "normal" + }, + { + "name": "size", + "title": "按钮尺寸", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "按钮组的尺寸", + "defaultValue": "medium" + }, + { + "name": "component", + "title": "标签类型", + "propType": { + "type": "oneOf", + "value": ["button", "a"] + }, + "defaultValue": "button", + "description": "设置标签类型" + }, + { + "name": "ghost", + "title": "幽灵按钮", + "propType": { + "type": "oneOf", + "value": ["light", "dark", false, true] + }, + "description": "是否为幽灵按钮" + }, + { + "name": "defaultSelectedKeys", + "propType": { + "type": "instanceOf", + "value": "array" + }, + "description": "默认激活的菜单项（用法同 Menu 非受控）", + "defaultValue": [] + }, + { + "name": "selectedKeys", + "propType": { + "type": "instanceOf", + "value": "array" + }, + "description": "激活的菜单项（用法同 Menu 受控）" + }, + { + "name": "selectMode", + "title": "单选多选", + "propType": { + "type": "oneOf", + "value": ["single", "multiple"] + }, + "defaultValue": "single", + "description": "菜单的选择模式" + }, + { + "name": "onSelect", + "propType": "func", + "description": "选择菜单项时的回调，参考 Menu" + }, + { + "name": "onItemClick", + "propType": "func", + "description": "点击菜单项时的回调，参考 Menu" + }, + { + "name": "triggerProps", + "propType": "object", + "description": "触发按钮的属性（支持 Button 的所有属性透传）" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层显示状态变化时的回调函数\n@param {Boolean} visible 弹层显示状态\n@param {String} type 触发弹层显示或隐藏的来源 menuSelect 表示由menu触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "popupTriggerType", + "title": "弹层触发", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "弹层的触发方式", + "defaultValue": "click" + }, + { + "name": "popupAlign", + "title": "弹层对齐", + "propType": "string", + "description": "弹层对齐方式, 详情见Overlay align" + }, + { + "name": "popupStyle", + "propType": "object", + "description": "弹层自定义样式" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹层自定义样式类" + }, + { + "name": "popupProps", + "propType": "object", + "description": "透传给弹层的属性" + }, + { + "name": "autoWidth", + "title": "自动宽度", + "propType": "bool", + "description": "弹层菜单的宽度是否与按钮组一致", + "defaultValue": true + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层是否显示" + }, + { + "name": "defaultVisible", + "title": "默认显示", + "defaultValue": true, + "propType": "bool", + "description": "弹层默认是否显示" + }, + { + "name": "followTrigger", + "title": "跟随滚动", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "menuProps", + "propType": "object", + "description": "透传给 Menu 的属性" + }, + { + "name": "leftButtonProps", + "propType": "object", + "description": "透传给 左侧按钮 的属性" + }, + { + "name": "className", + "propType": "string" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "defaultSelectedKeys", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "selectedKeys", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "triggerProps", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "leftButtonProps", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "menuProps", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupStyle", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupClassName", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupProps", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "visible", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "label", + "title": "按钮文案", + "setter": "StringSetter" + }, + { + "name": "ghost", + "title": "幽灵按钮", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["light", "dark", false, true] + } + }, + "defaultValue": false + } + ] + } + }, + "experimental": { + "initials": [ + { + "name": "label", + "initial": { + "type": "JSFunction", + "value": "() => \"分隔按钮\"" + } + } + ] + }, + "icon": "", + "category": "常用" + }, + { + "componentName": "Step.Item", + "title": "步骤项", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Step", + "main": "", + "destructuring": true, + "subName": "Item" + }, + "props": [ + { + "name": "icon", + "propType": "string", + "description": "图标" + }, + { + "name": "title", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "标题" + }, + { + "name": "content", + "title": { + "label": "内容", + "tip": "content|内容填充, shape为 arrow 时无效" + }, + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "内容填充, shape为 arrow 时无效" + }, + { + "name": "status", + "title": { + "label": "状态", + "tip": "status|步骤的状态，如不传，会根据外层的 Step 的 current 属性生成，可选值为 `wait`, `process`, `finish`" + }, + "propType": { + "type": "oneOf", + "value": ["wait", "process", "finish"] + }, + "description": "步骤的状态，如不传，会根据外层的 Step 的 current 属性生成，可选值为 `wait`, `process`, `finish`" + }, + { + "name": "percent", + "propType": "number", + "description": "百分比" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "onClick", + "propType": "func", + "description": "点击步骤时的回调\n@param {Number} index 节点索引" + }, + { + "name": "className", + "propType": "string", + "description": "自定义样式" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "icon", + "title": { + "label": "图标", + "tip": "icon|图标" + }, + "setter": { + "componentName": "IconSetter" + } + }, + { + "name": "content", + "title": { + "label": "内容", + "tip": "content|内容" + }, + "setter": { + "componentName": "TextAreaSetter" + } + }, + { + "name": "status", + "title": { + "label": "状态", + "tip": "status|状态" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "等待", + "value": "wait" + }, + { + "title": "进行中", + "value": "process" + }, + { + "title": "结束", + "value": "finish" + }, + { + "title": "默认", + "value": "" + } + ] + } + } + } + ] + } + }, + "category": "null", + "icon": "" + }, + { + "componentName": "Step", + "title": "步骤条", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Step", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "current", + "propType": "number", + "description": "当前步骤", + "defaultValue": 0 + }, + { + "name": "direction", + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "展示方向", + "defaultValue": "hoz" + }, + { + "name": "labelPlacement", + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "横向布局时( direction 为 hoz )的内容排列", + "defaultValue": "ver" + }, + { + "name": "shape", + "propType": { + "type": "oneOf", + "value": ["circle", "arrow", "dot"] + }, + "description": "类型", + "defaultValue": "circle" + }, + { + "name": "readOnly", + "propType": "bool", + "description": "是否只读模式" + }, + { + "name": "animation", + "propType": "bool", + "description": "是否开启动效", + "defaultValue": true + }, + { + "name": "className", + "propType": "string", + "description": "自定义样式名" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": [ + { + "name": "items", + "title": "步骤项", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "icon", + "title": "图标", + "setter": "IconSetter", + "description": "图标" + }, + { + "name": "title", + "title": "标题", + "setter": "StringSetter", + "description": "标题" + }, + { + "name": "status", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["wait", "process", "finish"] + } + }, + "description": "步骤的状态，如不传，会根据外层的 Step 的 current 属性生成，可选值为 `wait`, `process`, `finish`" + }, + { + "name": "content", + "title": { + "label": "内容", + "tip": "content|内容填充, shape为 arrow 时无效" + }, + "setter": "TextAreaSetter", + "description": "内容填充, shape为 arrow 时无效" + }, + { + "name": "percent", + "title": "百分比", + "setter": "NumberSetter", + "description": "百分比" + }, + { + "name": "disabled", + "title": "是否禁用", + "setter": "BoolSetter", + "description": "是否禁用" + } + ] + } + }, + "initialValue": { + "type": "JSFunction", + "value": "() => {\n return {\n primaryKey: String(Math.floor(Math.random() * 10000)),\n title: \"StepItem\"\n };\n }" + } + } + } + }, + "extraProps": { + "getValue": { + "type": "JSFunction", + "value": "getValue(target, fieldValue) {\n \n \n const map = target.getNode().children.map(child => {\n const primaryKey = child.getPropValue(\"primaryKey\")\n ? String(child.getPropValue(\"primaryKey\"))\n : child.id;\n return {\n primaryKey: primaryKey,\n icon: child.getPropValue(\"icon\"),\n title: child.getPropValue(\"title\"),\n status: child.getPropValue(\"status\"),\n content: child.getPropValue(\"content\"),\n percent: child.getPropValue(\"percent\"),\n disabled: child.getPropValue(\"disabled\"),\n };\n });\n return map;\n }" + }, + "setValue": { + "type": "JSFunction", + "value": "setValue(target, value) {\n const node = target.getNode();\n const map = {};\n if (!Array.isArray(value)) {\n value = [];\n }\n value.forEach(item => {\n const tabitem = Object.assign({}, item);\n map[item.primaryKey] = tabitem;\n });\n\n node.mergeChildren(\n child => {\n const primaryKey = String(child.getPropValue(\"primaryKey\"));\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n child.setPropValue(\"icon\", map[primaryKey].icon);\n child.setPropValue(\"title\", map[primaryKey].title);\n child.setPropValue(\"content\", map[primaryKey].content);\n child.setPropValue(\"status\", map[primaryKey].status);\n child.setPropValue(\"percent\", map[primaryKey].percent);\n child.setPropValue(\"disabled\", map[primaryKey].disabled);\n delete map[primaryKey];\n return false;\n }\n return true;\n },\n () => {\n const items = [];\n for (const primaryKey in map) {\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n items.push({\n componentName: \"Step.Item\",\n props: map[primaryKey]\n });\n }\n }\n return items;\n },\n (child1, child2) => {\n const a = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child1.getPropValue(\"primaryKey\"))\n );\n const b = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child2.getPropValue(\"primaryKey\"))\n );\n return a - b;\n }\n );\n }" + } + } + }, + { + "name": "current", + "setter": { + "type": "JSFunction", + "value": "() => {\n const items = this.props.getPropValue('items');\n return {\n componentName: \"MixedSetter\",\n props: {\n setters: [\n {\n componentName: \"NumberSetter\",\n props: {\n min: 0,\n max: items.length - 1,\n defaultValue: 0\n }\n }, \n \"ExpressionSetter\"\n ]\n }\n };\n }" + }, + "title": "当前步骤", + "defaultValue": 0 + }, + { + "name": "direction", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["hoz", "ver"] + } + }, + "title": "展示方向", + "defaultValue": "hoz" + }, + { + "name": "labelPlacement", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["hoz", "ver"] + } + }, + "title": "内容排列", + "defaultValue": "ver" + }, + { + "name": "shape", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["circle", "arrow", "dot"] + } + }, + "title": "类型", + "defaultValue": "circle" + }, + { + "name": "readOnly", + "setter": "BoolSetter", + "title": "是否只读" + }, + { + "name": "animation", + "setter": "BoolSetter", + "title": "开启动效", + "defaultValue": true + } + ] + }, + "icon": "", + "category": "导航" + }, + { + "componentName": "SubMenu", + "title": "子菜单", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Menu", + "main": "", + "destructuring": true, + "subName": "SubMenu" + }, + "props": [ + { + "name": "key", + "propType": "string", + "description": "子菜单标识符" + }, + { + "name": "label", + "propType": "node", + "description": "标签内容" + }, + { + "name": "selectable", + "propType": "bool", + "description": "是否可选，该属性仅在设置 Menu 组件 selectMode 属性后生效", + "defaultValue": false + }, + { + "name": "mode", + "propType": { + "type": "oneOf", + "value": ["inline", "popup"] + }, + "description": "子菜单打开方式，如果设置会覆盖 Menu 上的同名属性\n@default Menu 的 mode 属性值" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["Menu", "SubMenu", "Menu.Group", "MenuButton"] + } + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "SubNav", + "title": "SubNav", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Nav", + "main": "", + "destructuring": true, + "subName": "SubNav" + }, + "props": [ + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "icon", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "instanceOf", + "value": "node" + } + ] + }, + "description": "自定义图标，可以使用 Icon 的 type，也可以使用组件 ``" + }, + { + "name": "label", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "标签内容" + }, + { + "name": "selectable", + "propType": "bool", + "description": "是否可选", + "defaultValue": false + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "导航项和子导航" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "Switch", + "title": "开关", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Switch", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "name", + "propType": "string", + "description": "name" + }, + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "checked", + "propType": "bool", + "description": "当前状态" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["medium", "small"] + }, + "description": "尺寸", + "defaultValue": "medium" + }, + { + "name": "checkedChildren", + "propType": "string", + "description": "打开时的内容" + }, + { + "name": "unCheckedChildren", + "propType": "string", + "description": "关闭时的内容" + }, + { + "name": "onChange", + "propType": "func", + "description": "开关状态改变是触发此事件\n@param {Boolean} checked 是否为打开状态\n@param {Event} e DOM事件对象" + }, + { + "name": "onClick", + "propType": "func", + "description": "鼠标点击事件\n@param {Event} e DOM事件对象" + }, + { + "name": "onKeyDown", + "propType": "func", + "description": "键盘按键事件\n@param {Event} e DOM事件对象" + } + ], + "configure": { + "props": [ + { + "name": "checked", + "title": { + "label": { + "type": "i18n", + "zh_CN": "当前状态", + "en_US": "Checked" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: checked | 说明: 当前状态", + "en_US": "prop: checked | description: current status" + } + }, + "setter": "BoolSetter" + }, + { + "name": "disabled", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否禁用", + "en_US": "Disabled" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: disabled | 说明: 是否被禁用", + "en_US": "prop: disabled | description: disabled" + } + }, + "setter": "BoolSetter", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 尺寸", + "en_US": "prop: size | description: size" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["medium", "small"] + } + }, + "defaultValue": "medium" + }, + { + "name": "checkedChildren", + "title": { + "label": { + "type": "i18n", + "zh_CN": "开启内容", + "en_US": "Checked Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: checkedChildren | 说明: 打开时的内容", + "en_US": "prop: checkedChildren | description: checked content" + } + }, + "setter": "StringSetter", + "description": "打开时的内容" + }, + { + "name": "unCheckedChildren", + "title": { + "label": { + "type": "i18n", + "zh_CN": "关闭内容", + "en_US": "UnChecked Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: unCheckedChildren | 说明: 关闭时的内容", + "en_US": "prop: unCheckedChildren | description: unchecked content" + } + }, + "setter": "StringSetter" + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ], + "supports": { + "style": true, + "events": ["onChange", "onClick", "onKeyDown"] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Tab.Item", + "title": "选项卡Item", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Tab", + "main": "", + "destructuring": true, + "subName": "Item" + }, + "props": [ + { + "name": "isAutoContainer", + "initialValue": true, + "defaultValue": true, + "setter": "BoolSetter", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "title", + "propType": "string", + "description": "选项卡标题" + }, + { + "name": "closeable", + "propType": "bool", + "description": "单个选项卡是否可关闭", + "defaultValue": false + }, + { + "name": "disabled", + "propType": "bool", + "description": "选项卡是否被禁用" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["Tab"] + } + } + }, + "icon": "", + "category": "null" + }, + { + "componentName": "Tab.TabPane", + "title": "Tab.TabPane", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Tab", + "main": "", + "destructuring": true, + "subName": "TabPane" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "title", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "选项卡标题" + }, + { + "name": "closeable", + "propType": "bool", + "description": "单个选项卡是否可关闭", + "defaultValue": false + }, + { + "name": "disabled", + "propType": "bool", + "description": "选项卡是否被禁用" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + } + }, + "category": "基础" + }, + { + "componentName": "Tab", + "title": "选项卡", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Tab", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "device", + "propType": { + "type": "oneOf", + "value": ["tablet", "desktop", "phone"] + } + }, + { + "name": "shape", + "propType": { + "type": "oneOf", + "value": ["pure", "wrapped", "text", "capsule"] + }, + "description": "外观形态", + "defaultValue": "pure" + }, + { + "name": "animation", + "propType": "bool", + "description": "是否开启动效", + "defaultValue": true + }, + { + "name": "excessMode", + "propType": { + "type": "oneOf", + "value": ["slide", "dropdown"] + }, + "description": "选项卡过多时的滑动模式", + "defaultValue": "slide" + }, + { + "name": "tabPosition", + "propType": { + "type": "oneOf", + "value": ["top", "bottom", "left", "right"] + }, + "description": "导航选项卡的位置，只适用于包裹型（wrapped）选项卡", + "defaultValue": "top" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium"] + }, + "description": "尺寸", + "defaultValue": "medium" + }, + { + "name": "triggerType", + "propType": { + "type": "oneOf", + "value": ["hover", "click"] + }, + "description": "激活选项卡的触发方式", + "defaultValue": "click" + }, + { + "name": "lazyLoad", + "propType": "bool", + "description": "是否延迟加载 TabPane 的内容, 默认开启, 即不提前渲染", + "defaultValue": true + }, + { + "name": "unmountInactiveTabs", + "propType": "bool", + "description": "是否自动卸载未处于激活状态的选项卡", + "defaultValue": false + }, + { + "name": "navClassName", + "propType": "string", + "description": "导航条的自定义样式类" + }, + { + "name": "contentClassName", + "propType": "string", + "description": "内容区容器的自定义样式类" + }, + { + "name": "extra", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "导航栏附加内容" + }, + { + "name": "onClick", + "propType": "func", + "description": "点击单个选项卡时触发的回调" + }, + { + "name": "onChange", + "propType": "func", + "description": "选项卡发生切换时的事件回调\n@param {String|Number} key 改变后的 key" + }, + { + "name": "onClose", + "propType": "func", + "description": "选项卡被关闭时的事件回调\n@param {String|Number} key 关闭的选项卡的 key" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": [ + { + "name": "items", + "title": "标签项", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "title", + "title": "名称", + "initialValue": "标签项", + "setter": "StringSetter" + }, + { + "name": "primaryKey", + "title": "项目编号", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "initialValue": { + "type": "JSFunction", + "value": "val => {\n if (val) return val;\n return String(Math.floor(Math.random() * 10000));\n }" + }, + "setter": "StringSetter" + }, + { + "name": "closeable", + "title": "可关闭", + "initialValue": false, + "setter": "BoolSetter" + }, + { + "name": "disabled", + "title": "是否禁用", + "initialValue": false, + "setter": "BoolSetter" + } + ] + } + }, + "initialValue": { + "type": "JSFunction", + "value": "() => {\n return {\n primaryKey: String(Math.floor(Math.random() * 10000)),\n title: \"标签项\",\n closeable: false,\n disabled: false\n };\n }" + } + } + } + }, + "extraProps": { + "getValue": { + "type": "JSFunction", + "value": "getValue(target, fieldValue) {\n \n \n const map = target.getNode().children.map(child => {\n const primaryKey = child.getPropValue(\"primaryKey\")\n ? String(child.getPropValue(\"primaryKey\"))\n : child.id;\n return {\n primaryKey: primaryKey,\n title: child.getPropValue(\"title\"),\n closeable: child.getPropValue(\"closeable\"),\n disabled: child.getPropValue(\"disabled\")\n };\n });\n return map;\n }" + }, + "setValue": { + "type": "JSFunction", + "value": "setValue(target, value) {\n const node = target.getNode();\n const map = {};\n if (!Array.isArray(value)) {\n value = [];\n }\n value.forEach(item => {\n const tabitem = Object.assign({}, item);\n map[item.primaryKey] = tabitem;\n });\n\n node.mergeChildren(\n child => {\n const primaryKey = String(child.getPropValue(\"primaryKey\"));\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n child.setPropValue(\"title\", map[primaryKey].title);\n child.setPropValue(\"closeable\", map[primaryKey].closeable);\n child.setPropValue(\"disabled\", map[primaryKey].disabled);\n delete map[primaryKey];\n return false;\n }\n return true;\n },\n () => {\n const items = [];\n for (const primaryKey in map) {\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n items.push({\n componentName: \"Tab.Item\",\n props: map[primaryKey]\n });\n }\n }\n return items;\n },\n (child1, child2) => {\n const a = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child1.getPropValue(\"primaryKey\"))\n );\n const b = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child2.getPropValue(\"primaryKey\"))\n );\n return a - b;\n }\n );\n }" + } + } + }, + { + "name": "shape", + "title": "形态", + "defaultValue": "pure", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "普通型", + "value": "pure" + }, + { + "title": "包裹型", + "value": "wrapped" + }, + { + "title": "文本型", + "value": "text" + }, + { + "title": "胶囊型", + "value": "capsule" + } + ] + } + } + }, + { + "name": "size", + "title": "尺寸", + "defaultValue": "medium", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "小", + "value": "small" + }, + { + "title": "中", + "value": "medium" + } + ] + } + } + }, + { + "name": "excessMode", + "title": "选项卡过多时的滑动模式", + "defaultValue": "slide", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "小", + "value": "slide" + }, + { + "title": "中", + "value": "dropdown" + } + ] + } + } + }, + { + "name": "advance", + "title": "高级", + "type": "group", + "extraProps": { + "display": "accordion" + }, + "items": [ + { + "name": "unmountInactiveTabs", + "title": "切换销毁", + "defaultValue": false, + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "needBadge", + "title": "开启徽标", + "defaultValue": false, + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "renderBadge", + "title": "徽标渲染", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + }, + "condition": { + "type": "JSFunction", + "value": "condition(target) {\n return target.getProps().getPropValue(\"needBadge\") || false;\n }" + } + }, + { + "name": "tabRender", + "title": "自定义渲染选项卡", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + } + }, + { + "name": "extraRender", + "title": "渲染导航栏附加内容", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + } + } + ] + }, + { + "name": "style", + "setter": { + "componentName": "StyleSetter" + } + } + ], + "supports": { + "events": ["onClick", "onChange", "onClose"] + } + }, + "experimental": { + "initialChildren": [ + { + "componentName": "Tab.Item", + "props": { + "primaryKey": "item1" + } + }, + { + "componentName": "Tab.Item", + "props": { + "primaryKey": "item2" + } + } + ] + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Table.Column", + "title": "Table.Column", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Table", + "main": "", + "destructuring": true, + "subName": "Column" + }, + "props": [ + { + "name": "title", + "propType": "string" + }, + { + "name": "dataIndex", + "propType": "string" + }, + { + "name": "cell", + "propType": "func" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "cell", + "setter": { + "componentName": "SlotSetter", + "props": { + "supportParams": true + } + }, + "extraProps": { + "display": "block" + } + } + ] + } + }, + "category": "基础" + }, + { + "componentName": "Table", + "title": "Table", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Table", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string" + }, + { + "name": "children", + "propType": "string" + }, + { + "name": "pure", + "propType": "bool" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "tableLayout", + "propType": { + "type": "oneOf", + "value": ["fixed", "auto"] + } + }, + { + "name": "tableWidth", + "propType": "number" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium"] + } + }, + { + "name": "dataSource", + "propType": { + "type": "arrayOf", + "value": "object" + } + }, + { + "name": "entireDataSource", + "propType": "array" + }, + { + "name": "onRowClick", + "propType": "func" + }, + { + "name": "onRowMouseEnter", + "propType": "func" + }, + { + "name": "rowProps", + "propType": "func" + }, + { + "name": "cellProps", + "propType": "func" + }, + { + "name": "hasBorder", + "propType": "bool" + }, + { + "name": "hasHeader", + "propType": "bool" + }, + { + "name": "isZebra", + "propType": "bool" + }, + { + "name": "loading", + "propType": "bool" + }, + { + "name": "filterParams", + "propType": "object" + }, + { + "name": "sort", + "propType": "object" + }, + { + "name": "sortIcons", + "propType": "object" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "components", + "propType": "object" + }, + { + "name": "columns", + "propType": { + "type": "arrayOf", + "value": { + "type": "shape", + "value": [ + { + "name": "title", + "description": "列标题", + "propType": "string" + }, + { + "name": "dataIndex", + "description": "列名称", + "propType": "string" + } + ] + } + } + }, + { + "name": "emptyContent", + "propType": "node" + }, + { + "name": "primaryKey", + "propType": "string" + }, + { + "name": "lockType", + "propType": { + "type": "oneOf", + "value": ["left", "right"] + } + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "wrapperContent", + "propType": "any" + }, + { + "name": "refs", + "propType": "object" + }, + { + "name": "expandedRowRender", + "propType": "func" + }, + { + "name": "expandedRowIndent", + "propType": "array" + }, + { + "name": "hasExpandedRowCtrl", + "propType": "bool" + }, + { + "name": "getExpandedColProps", + "propType": "func" + }, + { + "name": "openRowKeys", + "propType": "array" + }, + { + "name": "onRowOpen", + "propType": "func" + }, + { + "name": "onExpandedRowClick", + "propType": "func" + }, + { + "name": "fixedHeader", + "propType": "bool" + }, + { + "name": "rowSelection", + "propType": "object" + }, + { + "name": "stickyHeader", + "propType": "bool" + }, + { + "name": "offsetTop", + "propType": "number" + }, + { + "name": "affixProps", + "propType": "object" + }, + { + "name": "indent", + "propType": "number" + }, + { + "name": "isTree", + "propType": "bool" + }, + { + "name": "useVirtual", + "propType": "bool" + }, + { + "name": "onBodyScroll", + "propType": "func" + }, + { + "name": "expandedIndexSimulate", + "propType": "bool" + }, + { + "name": "crossline", + "propType": "bool" + }, + { + "name": "lengths", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "dataSource", + "setter": "JsonSetter" + }, + { + "name": "children", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "componentName", + "title": "子组件", + "defaultValue": "Table.Column", + "setter": { + "componentName": "StringSetter" + } + }, + { + "name": "props", + "title": "props", + "setter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "title", + "setter": { + "componentName": "StringSetter" + } + }, + { + "name": "dataIndex", + "setter": { + "componentName": "StringSetter" + } + } + ] + } + } + } + } + ] + } + } + } + } + }, + "extraProps": { + "defaultValue": "", + "onChange": { + "type": "JSFunction", + "value": "(val, field, editor) => {\n debugger;\n console.log('val', val);//field.nodes[0].children.import(val && {\"componentName\": \"Table.Column\", \"props\": {\"type\": val, \"style\": {\"marginRight\": 5}}}, true); //field.top.setPropValue('children', [{\"componentName\": \"Icon\", \"props\": {\"type\": val}}, (field.top.getPropValue('children') || []).slice(-1)]);\n}" + } + } + } + ] + } + }, + "category": "基础" + }, + { + "componentName": "Tag.Closeable", + "title": "可关闭标签", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Tag", + "main": "", + "destructuring": true, + "subName": "Closeable" + }, + "props": [ + { + "name": "closeArea", + "title": { + "label": { + "type": "i18n", + "zh_CN": "关闭区域", + "en_US": "Close Area" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: closeArea | 说明: closeable 标签的 onClose 响应区域, tag: 标签体, tail(默认): 关闭按钮", + "en_US": "prop: closeArea | description: close area" + } + }, + "propType": { + "type": "oneOf", + "value": ["tag", "tail"] + }, + "description": "closeable 标签的 onClose 响应区域, tag: 标签体, tail(默认): 关闭按钮" + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签尺寸", + "en_US": "Tag Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 标签的尺寸（large 尺寸为兼容表单场景 large = medium）", + "en_US": "prop: size | description: tag size" + } + }, + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "标签的尺寸（large 尺寸为兼容表单场景 large = medium）" + }, + { + "name": "onClose", + "propType": "func", + "description": "点击关闭按钮时的回调，返回值 true 则关闭, false 阻止关闭" + }, + { + "name": "onClick", + "propType": "func", + "description": "点击回调" + }, + { + "name": "afterClose", + "propType": "func", + "description": "标签关闭后执行的回调" + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签文本", + "en_US": "Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: children | 说明: 标签文本内容", + "en_US": "prop: children | description: tag content" + } + }, + "propType": "string", + "description": "内容" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": {}, + "icon": "", + "category": "内容" + }, + { + "componentName": "Tag.Selectable", + "title": "可选中标签", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Tag", + "main": "", + "destructuring": true, + "subName": "Selectable" + }, + "props": [ + { + "name": "checked", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否选中", + "en_US": "Checked" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: checked | 说明: 标签是否被选中，受控用法", + "en_US": "prop: checked | description: tag checked" + } + }, + "propType": "bool", + "description": "标签是否被选中，受控用法" + }, + { + "name": "defaultChecked", + "title": { + "label": { + "type": "i18n", + "zh_CN": "默认选中", + "en_US": "Default Checked" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: defaultChecked | 说明: 标签是否默认被选中，非受控用法", + "en_US": "prop: defaultChecked | description: tag default checked" + } + }, + "propType": "bool", + "description": "标签是否默认被选中，非受控用法" + }, + { + "name": "disabled", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否禁用", + "en_US": "Disabled" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: disabled | 说明: 标签是否被禁用", + "en_US": "prop: disabled | description: tag disabled" + } + }, + "propType": "bool", + "description": "标签是否被禁用" + }, + { + "name": "onChange", + "propType": "func", + "description": "选中状态变化时触发的事件 Function(checked: Boolean, e: Event) => void" + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签文本", + "en_US": "Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: children | 说明: 标签文本内容", + "en_US": "prop: children | description: tag content" + } + }, + "propType": "string", + "description": "内容" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": {}, + "icon": "", + "category": "内容" + }, + { + "componentName": "Tag", + "title": "标签", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Tag", + "main": "", + "destructuring": true + }, + "props": [ + { + "name": "type", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签类型", + "en_US": "Tag Type" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: type | 说明: 标签的类型", + "en_US": "prop: type | description: tag type" + } + }, + "propType": { + "type": "oneOf", + "value": ["normal", "primary"] + }, + "description": "标签的类型" + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签尺寸", + "en_US": "Tag Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 标签的尺寸（large 尺寸为兼容表单场景 large = medium）", + "en_US": "prop: size | description: tag size" + } + }, + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "标签的尺寸（large 尺寸为兼容表单场景 large = medium）" + }, + { + "name": "color", + "propType": "string", + "description": "标签颜色, 目前支持：blue、 green、 orange、red、 turquoise、 yellow 和 hex 颜色值 （`color keywords`作为 Tag 组件的保留字，请勿直接使用 ）, `1.19.0` 以上版本生效" + }, + { + "name": "animation", + "title": { + "label": { + "type": "i18n", + "zh_CN": "开启动效", + "en_US": "Animation" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: animation | 说明: 是否开启动效", + "en_US": "prop: animation | description: enable animation" + } + }, + "propType": "bool", + "description": "是否开启动效" + }, + { + "name": "afterAppear", + "propType": "func", + "description": "标签出现动画结束后执行的回调" + }, + { + "name": "onClick", + "propType": "func", + "description": "点击回调" + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签文本", + "en_US": "Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: children | 说明: 标签文本内容", + "en_US": "prop: children | description: tag content" + } + }, + "propType": "string", + "description": "内容" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "color", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签颜色", + "en_US": "Tag Color" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: color | 说明: 是否开启动效", + "en_US": "prop: color | description: 目前支持：blue、 green、 orange、red、 turquoise、 yellow 和 hex 颜色值 （`color keywords`作为 Tag 组件的保留字，请勿直接使用 ）, `1.19.0` 以上版本生效" + } + }, + "setter": { + "componentName": "ColorSetter" + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "TimePicker", + "title": "时间选择框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "TimePicker", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "name", + "title": { + "label": "名称", + "tip": "name|表单相关" + }, + "propType": "string", + "description": "name|表单相关" + }, + { + "name": "label", + "propType": "string", + "description": "按钮的文案" + }, + { + "name": "state", + "propType": { + "type": "oneOf", + "value": ["error", "success"] + }, + "description": "输入框状态" + }, + { + "name": "placeholder", + "propType": "string", + "description": "输入框提示" + }, + { + "name": "value", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "时间值（moment 对象或时间字符串，受控状态使用）" + }, + { + "name": "defaultValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "时间初值（moment 对象或时间字符串，非受控状态使用）" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "时间选择框的尺寸", + "defaultValue": "medium" + }, + { + "name": "hasClear", + "propType": "bool", + "description": "是否允许清空时间", + "defaultValue": true + }, + { + "name": "format", + "propType": "string", + "description": "时间的格式\nhttps://momentjs.com/docs/#/parsing/string-format/", + "defaultValue": "HH:mm:ss" + }, + { + "name": "hourStep", + "propType": "number", + "description": "小时选项步长" + }, + { + "name": "minuteStep", + "propType": "number", + "description": "分钟选项步长" + }, + { + "name": "secondStep", + "propType": "number", + "description": "秒钟选项步长" + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层是否显示（受控）" + }, + { + "name": "defaultVisible", + "propType": "bool", + "description": "弹层默认是否显示（非受控）" + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态" + }, + { + "name": "onChange", + "propType": "func", + "description": "时间值改变时的回调\n@param {Object|String} value 时间对象或时间字符串" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + } + ], + "configure": { + "props": [ + { + "name": "defaultValue", + "title": "默认值", + "setter": ["TimePicker", "ExpressionSetter"] + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 尺寸\n@enumdesc 小, 中, 大", + "en_US": "prop: size | description: size" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "defaultValue": "medium" + }, + { + "name": "format", + "title": "时间格式", + "defaultValue": "HH:mm:ss", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "HH:mm:ss", + "value": "HH:mm:ss" + }, + { + "title": "HH:mm", + "value": "HH:mm" + }, + { + "title": "mm:ss", + "value": "mm:ss" + } + ] + } + }, + "ExpressionSetter" + ] + } + } + }, + { + "name": "hourStep", + "title": "小时步长", + "defaultValue": 1, + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "minuteStep", + "title": "分钟步长", + "defaultValue": 1, + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "secondStep", + "title": "秒钟步长", + "defaultValue": 1, + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "hasClear", + "title": "清除按钮", + "defaultValue": true, + "setter": ["BoolSetter", "ExpressionSetter"] + }, + { + "name": "disabledHours", + "title": "禁用小时函数", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + } + }, + { + "name": "disabledMinutes", + "title": "禁用分钟函数", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + } + }, + { + "name": "disabledSeconds", + "title": "禁用秒钟函数", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + } + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + }, + { + "name": "style", + "setter": { + "componentName": "StyleSetter" + } + } + ], + "supports": { + "events": ["onChange", "onVisibleChange"] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Timeline.Item", + "title": "时间轴项", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Timeline", + "main": "", + "destructuring": true, + "subName": "Item" + }, + "props": [ + { + "name": "state", + "propType": { + "type": "oneOf", + "value": ["done", "process", "error", "success"] + }, + "description": "节点状态", + "defaultValue": "done" + }, + { + "name": "icon", + "propType": "string", + "description": "图标" + }, + { + "name": "dot", + "propType": "node", + "description": "自定义时间轴节点" + }, + { + "name": "time", + "propType": "string", + "description": "格式化后的时间" + }, + { + "name": "title", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "description": "标题" + }, + { + "name": "timeLeft", + "propType": "string", + "description": "左侧时间" + }, + { + "name": "content", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "description": "右侧内容" + }, + { + "name": "animation", + "propType": "bool", + "description": "动画", + "defaultValue": true + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": false, + "nestingRule": { + "parentWhitelist": ["Timeline"] + } + }, + "props": [ + { + "name": "title", + "setter": "StringSetter", + "title": "标题" + }, + { + "name": "icon", + "title": "图标", + "setter": "IconSetter", + "description": "图标" + }, + { + "name": "state", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["done", "process", "error", "success"] + } + }, + "title": "节点状态", + "defaultValue": "done" + }, + { + "name": "time", + "setter": "DateSetter", + "title": "右侧时间" + }, + { + "name": "timeLeft", + "setter": "DateSetter", + "title": "左侧时间" + }, + { + "name": "content", + "setter": "TextAreaSetter", + "title": "右侧内容" + }, + { + "name": "animation", + "setter": "BoolSetter", + "title": "启用动画", + "defaultValue": true + } + ] + }, + "icon": "", + "category": "null" + }, + { + "componentName": "Timeline", + "title": "时间轴", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Timeline", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "fold", + "propType": { + "type": "arrayOf", + "value": { + "type": "exact", + "value": [ + { + "name": "foldArea", + "propType": { + "type": "arrayOf", + "value": "number" + } + }, + { + "name": "foldShow", + "propType": "bool" + } + ] + } + }, + "description": "自定义折叠选项 示例`[{foldArea: [startIndex, endIndex], foldShow: boolean}]`", + "defaultValue": [] + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "childWhitelist": ["Timeline.Item"] + } + }, + "props": [ + { + "name": "items", + "title": "时间轴数据", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "title", + "setter": "StringSetter", + "title": "标题" + }, + { + "name": "icon", + "title": "图标", + "setter": "IconSetter", + "description": "图标" + }, + { + "name": "state", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["done", "process", "error", "success"] + } + }, + "title": "节点状态", + "defaultValue": "done" + }, + { + "name": "time", + "setter": "DateSetter", + "title": "右侧时间" + }, + { + "name": "timeLeft", + "setter": "DateSetter", + "title": "左侧时间" + }, + { + "name": "content", + "setter": "TextAreaSetter", + "title": "右侧内容" + }, + { + "name": "animation", + "setter": "BoolSetter", + "title": "启用动画", + "defaultValue": true + } + ] + } + }, + "initialValue": { + "type": "JSFunction", + "value": "() => {\n return {\n primaryKey: String(Math.floor(Math.random() * 10000)),\n title: \"TimelineItem\"\n };\n }" + } + } + } + }, + "extraProps": { + "getValue": { + "type": "JSFunction", + "value": "getValue(target, fieldValue) {\n \n \n const map = target.getNode().children.map(child => {\n const primaryKey = child.getPropValue(\"primaryKey\")\n ? String(child.getPropValue(\"primaryKey\"))\n : child.id;\n return {\n primaryKey: primaryKey,\n icon: child.getPropValue(\"icon\"),\n title: child.getPropValue(\"title\"),\n state: child.getPropValue(\"state\"),\n time: child.getPropValue(\"time\"),\n timeLeft: child.getPropValue(\"timeLeft\"),\n content: child.getPropValue(\"content\"),\n animation: child.getPropValue(\"animation\"),\n };\n });\n return map;\n }" + }, + "setValue": { + "type": "JSFunction", + "value": "setValue(target, value) {\n const node = target.getNode();\n const map = {};\n if (!Array.isArray(value)) {\n value = [];\n }\n value.forEach(item => {\n const tabitem = Object.assign({}, item);\n map[item.primaryKey] = tabitem;\n });\n\n node.mergeChildren(\n child => {\n const primaryKey = String(child.getPropValue(\"primaryKey\"));\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n child.setPropValue(\"icon\", map[primaryKey].icon);\n child.setPropValue(\"title\", map[primaryKey].title);\n child.setPropValue(\"content\", map[primaryKey].content);\n child.setPropValue(\"state\", map[primaryKey].state);\n child.setPropValue(\"time\", map[primaryKey].time);\n child.setPropValue(\"timeLeft\", map[primaryKey].timeLeft);\n child.setPropValue(\"animation\", map[primaryKey].animation);\n delete map[primaryKey];\n return false;\n }\n return true;\n },\n () => {\n const items = [];\n for (const primaryKey in map) {\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n items.push({\n componentName: \"Timeline.Item\",\n props: map[primaryKey]\n });\n }\n }\n return items;\n },\n (child1, child2) => {\n const a = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child1.getPropValue(\"primaryKey\"))\n );\n const b = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child2.getPropValue(\"primaryKey\"))\n );\n return a - b;\n }\n );\n }" + } + } + } + ] + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Message", + "title": "面包片", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Message", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "title", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标题", + "en_US": "Title" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: title | 说明: 标题", + "en_US": "prop: title | description: Title" + } + }, + "propType": "string", + "description": "标题", + "defaultValue": "标题" + }, + { + "name": "type", + "title": { + "label": { + "type": "i18n", + "zh_CN": "类型", + "en_US": "Type" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: type | 说明: 反馈类型", + "en_US": "prop: type | description: message type" + } + }, + "propType": { + "type": "oneOf", + "value": ["success", "warning", "error", "notice", "help", "loading"] + }, + "description": "反馈类型", + "defaultValue": "success" + }, + { + "name": "shape", + "title": { + "label": { + "type": "i18n", + "zh_CN": "形状", + "en_US": "Shape" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: shape | 说明: 外观", + "en_US": "prop: shape | description: message shape" + } + }, + "propType": { + "type": "oneOf", + "value": ["inline", "addon", "toast"] + }, + "description": "外观", + "defaultValue": "inline" + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 尺寸", + "en_US": "prop: size | description: message size" + } + }, + "propType": { + "type": "oneOf", + "value": ["medium", "large"] + }, + "description": "尺寸", + "defaultValue": "medium" + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文本", + "en_US": "Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: children | 说明: 文本内容", + "en_US": "prop: children | description: message content" + } + }, + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "description": "内容" + }, + { + "name": "visible", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否显示", + "en_US": "Visible" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: visible | 说明: 当前是否显示", + "en_US": "prop: visible | description: visible" + } + }, + "propType": "bool", + "description": "当前是否显示" + }, + { + "name": "iconType", + "propType": "string", + "description": "显示的图标类型，会覆盖内部设置的IconType" + }, + { + "name": "closeable", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示 Close", + "en_US": "Show Close" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: closeable | 说明: 显示关闭按钮", + "en_US": "prop: closeable | description: show close button" + } + }, + "propType": "bool", + "description": "显示关闭按钮", + "defaultValue": false + }, + { + "name": "onClose", + "propType": "func", + "description": "关闭按钮的回调" + }, + { + "name": "afterClose", + "propType": "func", + "description": "关闭之后调用的函数" + }, + { + "name": "animation", + "title": { + "label": { + "type": "i18n", + "zh_CN": "开启动效", + "en_US": "Animation" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: animation | 说明: 是否开启动效", + "en_US": "prop: animation | description: enable animation" + } + }, + "propType": "bool", + "description": "收起动画", + "defaultValue": true + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "iconType", + "title": { + "label": { + "type": "i18n", + "zh_CN": "图标", + "en_US": "Icon" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: iconType | 说明: 显示的图标类型", + "en_US": "prop: iconType | description: icon type" + } + }, + "setter": { + "componentName": "IconSetter" + } + } + ] + } + }, + "icon": "", + "category": "反馈" + }, + { + "componentName": "Tooltip", + "title": "Tooltip", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Balloon", + "main": "", + "destructuring": true, + "subName": "Tooltip" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "description": "样式类名的品牌前缀", + "defaultValue": "next-" + }, + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + }, + { + "name": "children", + "propType": "node", + "description": "tooltip的内容" + }, + { + "name": "align", + "propType": { + "type": "oneOf", + "value": ["t", "r", "b", "l", "tl", "tr", "bl", "br", "lt", "lb", "rt", "rb"] + }, + "description": "弹出层位置\n@enumdesc 上, 右, 下, 左, 上左, 上右, 下左, 下右, 左上, 左下, 右上, 右下 及其 两两组合", + "defaultValue": "b" + }, + { + "name": "trigger", + "propType": "node", + "description": "触发元素" + }, + { + "name": "triggerType", + "propType": { + "type": "oneOf", + "value": ["hover", "click"] + }, + "description": "触发行为\n鼠标悬浮, 鼠标点击('hover', 'click')或者它们组成的数组，如 ['hover', 'click'], 强烈不建议使用'focus'，若有复杂交互，推荐使用triggerType为click的Balloon组件", + "defaultValue": "hover" + }, + { + "name": "popupStyle", + "propType": "object", + "description": "弹层组件style，透传给Popup" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹层组件className，透传给Popup" + }, + { + "name": "popupProps", + "propType": "object", + "description": "弹层组件属性，透传给Popup" + }, + { + "name": "pure", + "propType": "bool", + "description": "是否pure render" + }, + { + "name": "popupContainer", + "propType": "string", + "description": "指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数。" + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "id", + "propType": "string", + "description": "弹层id, 传入值才会支持无障碍" + }, + { + "name": "delay", + "propType": "number", + "description": "如果需要让 Tooltip 内容可被点击，可以设置这个参数，例如 100", + "defaultValue": 0 + } + ], + "category": "基础" + }, + { + "componentName": "Transfer", + "title": "穿梭框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Transfer", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "id", + "propType": "string", + "description": "请设置 id 以保证transfer的可访问性" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "mode", + "propType": { + "type": "oneOf", + "value": ["normal", "simple"] + }, + "description": "移动选项模式", + "defaultValue": "normal" + }, + { + "name": "dataSource", + "propType": "array", + "description": "数据源" + }, + { + "name": "value", + "propType": "array", + "description": "当前值" + }, + { + "name": "defaultValue", + "propType": "array", + "description": "默认值" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "leftDisabled", + "propType": "bool", + "description": "是否禁用左侧面板", + "defaultValue": false + }, + { + "name": "rightDisabled", + "propType": "bool", + "description": "是否禁用右侧面板", + "defaultValue": false + }, + { + "name": "itemRender", + "propType": "func", + "description": "列表项渲染函数" + }, + { + "name": "showSearch", + "propType": "bool", + "description": "是否显示搜索框", + "defaultValue": false + }, + { + "name": "filter", + "propType": "func", + "description": "自定义搜索函数" + }, + { + "name": "searchPlaceholder", + "propType": "string", + "description": "搜索框占位符" + }, + { + "name": "notFoundContent", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "列表为空显示内容", + "defaultValue": "Not Found" + }, + { + "name": "titles", + "propType": "array", + "description": "左右面板标题" + }, + { + "name": "operations", + "propType": "array", + "description": "向右向左移动按钮显示内容" + }, + { + "name": "defaultLeftChecked", + "propType": "array", + "description": "左面板默认选中值" + }, + { + "name": "defaultRightChecked", + "propType": "array", + "description": "右面板默认选中值" + }, + { + "name": "listClassName", + "propType": "string", + "description": "左右面板列表自定义样式类名" + }, + { + "name": "listStyle", + "propType": "object", + "description": "左右面板列表自定义样式对象" + }, + { + "name": "sortable", + "propType": "bool", + "description": "是否允许拖拽排序", + "defaultValue": false + }, + { + "name": "children", + "propType": "func", + "description": "接收 children 自定义渲染列表" + }, + { + "name": "onChange", + "propType": "func", + "description": "值发生改变的时候触发的回调函数" + }, + { + "name": "onSearch", + "propType": "func", + "description": "搜索框输入时触发的回调函数" + }, + { + "name": "onSort", + "propType": "func", + "description": "拖拽排序时触发的回调函数" + } + ], + "configure": { + "props": [ + { + "name": "value", + "title": "当前值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "defaultValue", + "title": "默认值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "mode", + "title": "模式", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "normal", + "value": "normal" + }, + { + "title": "simple", + "value": "simple" + } + ] + } + }, + "ExpressionSetter" + ] + } + }, + "defaultValue": "simple" + }, + { + "name": "showCheckAll", + "title": "显示全选", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + }, + "defaultValue": true + }, + { + "name": "showSearch", + "title": "搜索框", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + }, + "defaultValue": false + }, + { + "name": "searchPlaceholder", + "title": "搜索框占位符", + "display": "block", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + }, + "condition": { + "type": "JSFunction", + "value": "condition(target) {\n return target.getProps().getPropValue(\"showSearch\") || false;\n }" + } + }, + { + "name": "filter", + "title": "自定义搜索函数", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + }, + "condition": { + "type": "JSFunction", + "value": "condition(target) {\n return target.getProps().getPropValue(\"showSearch\") || false;\n }" + } + }, + { + "name": "sortable", + "title": "拖拽排序", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + }, + "defaultValue": false + }, + { + "name": "dataSource", + "title": "数据源", + "display": "block", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "JsonSetter" + }, + "ExpressionSetter" + ] + } + }, + "defaultValue": [ + { + "label": "item0", + "value": "0", + "disabled": false + }, + { + "label": "item1", + "value": "1", + "disabled": false + }, + { + "label": "item2", + "value": "2", + "disabled": true + } + ] + }, + { + "name": "defaultLeftChecked", + "title": "左侧面板默认选中值", + "display": "block", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "JsonSetter" + }, + "ExpressionSetter" + ] + } + }, + "defaultValue": ["1"] + }, + { + "name": "defaultRightChecked", + "title": "右侧面板默认选中值", + "display": "block", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "JsonSetter" + }, + "ExpressionSetter" + ] + } + }, + "defaultValue": ["1"] + }, + { + "name": "titles", + "title": "面板标题", + "display": "block", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "JsonSetter" + }, + "ExpressionSetter" + ] + } + }, + "defaultValue": ["TitleLeft", "TitleRight"] + }, + { + "name": "notFountContent", + "title": "无数据时显示内容", + "display": "block", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "StringSetter" + }, + "ExpressionSetter" + ] + } + }, + "defaultValue": ["无数据"] + }, + { + "name": "itemRender", + "title": "列表项渲染函数", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + } + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + }, + { + "name": "style", + "setter": { + "componentName": "StyleSetter" + } + } + ], + "supports": { + "events": ["onChange", "onSearch", "onSort"] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "TreeNode", + "title": "树形控件节点", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Tree", + "main": "", + "destructuring": true, + "subName": "Node" + }, + "props": [ + { + "name": "className", + "propType": "string" + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "树节点" + }, + { + "name": "label", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "description": "节点文本内容", + "defaultValue": "---" + }, + { + "name": "selectable", + "propType": "bool", + "description": "单独设置是否支持选中，覆盖 Tree 的 selectable" + }, + { + "name": "checkable", + "propType": "bool", + "description": "单独设置是否出现复选框，覆盖 Tree 的 checkable" + }, + { + "name": "editable", + "propType": "bool", + "description": "单独设置是否支持编辑，覆盖 Tree 的 editable" + }, + { + "name": "draggable", + "propType": "bool", + "description": "单独设置是否支持拖拽，覆盖 Tree 的 draggable" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁止节点响应", + "defaultValue": false + }, + { + "name": "checkboxDisabled", + "propType": "bool", + "description": "是否禁止勾选节点复选框", + "defaultValue": false + }, + { + "name": "isLeaf", + "propType": "bool", + "description": "是否是叶子节点", + "defaultValue": false + } + ], + "icon": "", + "category": "内容" + }, + { + "componentName": "TreeSelect", + "title": "树型选择控件", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "TreeSelect", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "string" + }, + { + "name": "dataSource", + "propType": { + "type": "Json" + }, + "description": "数据源" + }, + { + "name": "size", + "title": "尺寸", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "选择框大小", + "defaultValue": "medium" + }, + { + "name": "placeholder", + "title": "占位提示", + "propType": "string", + "description": "选择框占位符" + }, + { + "name": "label", + "title": "内联文案", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "自定义内联label" + }, + { + "name": "notFoundContent", + "title": "空提示", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "无数据时显示内容", + "defaultValue": "Not Found" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "hasArrow", + "title": "下拉箭头", + "propType": "bool", + "description": "是否有下拉箭头", + "defaultValue": true + }, + { + "name": "hasBorder", + "title": "边框", + "propType": "bool", + "description": "是否有边框", + "defaultValue": true + }, + { + "name": "hasClear", + "title": "清空按钮", + "propType": "bool", + "description": "是否有清空按钮", + "defaultValue": false + }, + { + "name": "readOnly", + "propType": "bool", + "description": "是否只读" + }, + { + "name": "autoWidth", + "propType": "bool", + "description": "下拉框是否与选择器对齐", + "defaultValue": true + }, + { + "name": "onChange", + "propType": "func", + "description": "选中值改变时触发的回调函数\n@param {String|Array} value 选中的值，单选时返回单个值，多选时返回数组\n@param {Object|Array} data 选中的数据，包括 value, label, pos, key属性，单选时返回单个值，多选时返回数组，父子节点选中关联时，同时选中，只返回父节点" + }, + { + "name": "showSearch", + "propType": "bool", + "description": "搜索框", + "defaultValue": false + }, + { + "name": "onSearch", + "propType": "func", + "description": "在搜索框中输入时触发的回调函数\n@param {String} keyword 输入的关键字" + }, + { + "name": "onSearchClear", + "propType": "func" + }, + { + "name": "multiple", + "propType": "bool", + "description": "支持多选", + "defaultValue": false + }, + { + "name": "treeCheckable", + "propType": "bool", + "description": "下拉框中的树是否支持勾选节点的复选框", + "defaultValue": false + }, + { + "name": "treeCheckStrictly", + "propType": "bool", + "description": "下拉框中的树勾选节点复选框是否完全受控（父子节点选中状态不再关联）", + "defaultValue": false + }, + { + "name": "treeCheckedStrategy", + "propType": { + "type": "oneOf", + "value": ["all", "parent", "child"] + }, + "description": "定义选中时回填的方式\n@enumdesc 返回所有选中的节点, 父子节点都选中时只返回父节点, 父子节点都选中时只返回子节点", + "defaultValue": "parent" + }, + { + "name": "treeDefaultExpandAll", + "propType": "bool", + "description": "下拉框中的树是否默认展开所有节点", + "defaultValue": false + }, + { + "name": "treeLoadData", + "propType": "func", + "description": "下拉框中的树异步加载数据的函数，使用请参考[Tree的异步加载数据Demo](https://fusion.design/component/tree)\n@param {ReactElement} node 被点击展开的节点" + }, + { + "name": "treeProps", + "propType": { + "type": "Json" + }, + "description": "透传到 Tree 的属性对象" + }, + { + "name": "defaultVisible", + "title": "初始显示", + "propType": "bool", + "description": "初始下拉框是否显示", + "defaultValue": false + }, + { + "name": "visible", + "propType": "bool", + "description": "当前下拉框是否显示" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "下拉框显示或关闭时触发事件的回调函数\n@param {Boolean} visible 是否显示\n@param {String} type 触发显示关闭的操作类型" + }, + { + "name": "popupStyle", + "propType": { + "type": "object" + }, + "description": "下拉框自定义样式对象" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "下拉框样式自定义类名" + }, + { + "name": "popupContainer", + "propType": "any", + "description": "下拉框挂载的容器节点" + }, + { + "name": "popupProps", + "propType": { + "type": "object" + }, + "description": "透传到 Popup 的属性对象" + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "预览态" + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {Array} value 选择值 { label: , value:}" + }, + { + "name": "useVirtual", + "propType": "bool", + "description": "是否开启虚拟滚动" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "visible", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "autoWidth", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "useVirtual", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "renderPreview", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "followTrigger", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupStyle", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupClassName", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupContainer", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupProps", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "treeCheckable", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "treeCheckStrictly", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "treeCheckedStrategy", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "treeDefaultExpandAll", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "treeLoadData", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "treeProps", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "label", + "title": "内联文案", + "setter": { + "componentName": "StringSetter" + } + }, + { + "name": "dataSource", + "title": { + "label": "节点数据", + "tip": "数据源" + }, + "setter": "JsonSetter" + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Tree", + "title": "树形控件", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Tree", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "string" + }, + { + "name": "dataSource", + "propType": { + "type": "object" + }, + "description": "数据源，该属性优先级高于 children" + }, + { + "name": "showLine", + "propType": "bool", + "description": "是否显示树的线", + "defaultValue": false + }, + { + "name": "selectable", + "propType": "bool", + "description": "是否支持选中节点", + "defaultValue": true + }, + { + "name": "onSelect", + "propType": "func", + "description": "选中或取消选中节点时触发的回调函数\n@param {Array} selectedKeys 选中节点key的数组\n@param {Object} extra 额外参数\n@param {Array} extra.selectedNodes 选中节点的数组\n@param {Object} extra.node 当前操作的节点\n@param {Boolean} extra.selected 当前操作是否是选中" + }, + { + "name": "multiple", + "propType": "bool", + "description": "是否支持多选", + "defaultValue": false + }, + { + "name": "checkable", + "propType": "bool", + "description": "是否支持勾选节点的复选框", + "defaultValue": false + }, + { + "name": "checkStrictly", + "propType": "bool", + "description": "勾选节点复选框是否完全受控（父子节点选中状态不再关联）", + "defaultValue": false + }, + { + "name": "checkedStrategy", + "propType": { + "type": "oneOf", + "value": ["all", "parent", "child"] + }, + "description": "定义选中时回填的方式\n@enumdesc 返回所有选中的节点, 父子节点都选中时只返回父节点, 父子节点都选中时只返回子节点", + "defaultValue": "all" + }, + { + "name": "onCheck", + "propType": "func", + "description": "勾选或取消勾选复选框时触发的回调函数\n@param {Array} checkedKeys 勾选复选框节点key的数组\n@param {Object} extra 额外参数\n@param {Array} extra.checkedNodes 勾选复选框节点的数组\n@param {Array} extra.checkedNodesPositions 包含有勾选复选框节点和其位置的对象的数组\n@param {Array} extra.indeterminateKeys 半选复选框节点 key 的数组\n@param {Object} extra.node 当前操作的节点\n@param {Boolean} extra.checked 当前操作是否是勾选" + }, + { + "name": "defaultExpandAll", + "propType": "bool", + "description": "是否默认展开所有节点", + "defaultValue": false + }, + { + "name": "autoExpandParent", + "propType": "bool", + "description": "是否自动展开父节点，建议受控时设置为false", + "defaultValue": true + }, + { + "name": "onExpand", + "propType": "func", + "description": "展开或收起节点时触发的回调函数\n@param {Array} expandedKeys 展开的节点key的数组\n@param {Object} extra 额外参数\n@param {Object} extra.node 当前操作的节点\n@param {Boolean} extra.expanded 当前操作是否是展开" + }, + { + "name": "editable", + "propType": "bool", + "description": "是否支持编辑节点内容", + "defaultValue": false + }, + { + "name": "onEditFinish", + "propType": "func", + "description": "编辑节点内容完成时触发的回调函数\n@param {String} key 编辑节点的 key\n@param {String} label 编辑节点完成时节点的文本\n@param {Object} node 当前编辑的节点" + }, + { + "name": "draggable", + "propType": "bool", + "description": "是否支持拖拽节点", + "defaultValue": false + }, + { + "name": "onDragStart", + "propType": "func", + "description": "开始拖拽节点时触发的回调函数\n@param {Object} info 拖拽信息\n@param {Object} info.event 事件对象\n@param {Object} info.node 拖拽的节点" + }, + { + "name": "onDragEnter", + "propType": "func", + "description": "拖拽节点进入目标节点时触发的回调函数\n@param {Object} info 拖拽信息\n@param {Object} info.event 事件对象\n@param {Object} info.node 目标节点\n@param {Array} info.expandedKeys 当前展开的节点key的数组" + }, + { + "name": "onDragOver", + "propType": "func", + "description": "拖拽节点在目标节点上移动的时候触发的回调函数\n@param {Object} info 拖拽信息\n@param {Object} info.event 事件对象\n@param {Object} info.node 目标节点" + }, + { + "name": "onDragLeave", + "propType": "func", + "description": "拖拽节点离开目标节点时触发的回调函数\n@param {Object} info 拖拽信息\n@param {Object} info.event 事件对象\n@param {Object} info.node 目标节点" + }, + { + "name": "onDragEnd", + "propType": "func", + "description": "拖拽节点拖拽结束时触发的回调函数\n@param {Object} info 拖拽信息\n@param {Object} info.event 事件对象\n@param {Object} info.node 目标节点" + }, + { + "name": "onDrop", + "propType": "func", + "description": "拖拽节点放入目标节点内或前后触发的回调函数\n@param {Object} info 拖拽信息\n@param {Object} info.event 事件对象\n@param {Object} info.node 目标节点\n@param {Object} info.dragNode 拖拽的节点\n@param {Array} info.dragNodesKeys 拖拽的节点和其子节点 key 的数组\n@param {Number} info.dropPosition 放置位置，-1代表当前节点前，0代表当前节点里，1代表当前节点后" + }, + { + "name": "canDrop", + "propType": "func", + "description": "节点是否可被作为拖拽的目标节点" + }, + { + "name": "loadData", + "propType": "func", + "description": "异步加载数据的函数" + }, + { + "name": "filterTreeNode", + "propType": "func", + "description": "按需筛选高亮节点" + }, + { + "name": "onRightClick", + "propType": "func", + "description": "右键点击节点时触发的回调函数" + }, + { + "name": "isLabelBlock", + "propType": "bool", + "description": "设置节点是否占满剩余空间，一般用于统一在各节点右侧添加元素(借助 flex 实现，暂时只支持 ie10+)", + "defaultValue": false + }, + { + "name": "isNodeBlock", + "propType": "bool", + "description": "设置节点是否占满一行", + "defaultValue": false + }, + { + "name": "animation", + "propType": "bool", + "description": "是否开启展开收起动画", + "defaultValue": true + }, + { + "name": "focusedKey", + "propType": "string", + "description": "当前获得焦点的子菜单或菜单项 key 值" + }, + { + "name": "renderChildNodes", + "propType": "func", + "description": "渲染子节点" + }, + { + "name": "useVirtual", + "propType": "bool", + "description": "是否开启虚拟滚动" + }, + { + "name": "onItemFocus", + "propType": "func" + }, + { + "name": "onBlur", + "propType": "func" + }, + { + "name": "onItemKeyDown", + "propType": "func" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": [ + { + "name": "dataSource", + "title": "节点数据", + "setter": "JsonSetter" + }, + { + "name": "showLine", + "title": "显示线", + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "multiple", + "title": "支持多选", + "setter": { + "componentName": "BoolSetter" + }, + "description": "是否支持多选", + "defaultValue": false + }, + { + "name": "checkable", + "title": "复选框", + "setter": { + "componentName": "BoolSetter" + }, + "description": "是否支持勾选节点的复选框", + "defaultValue": false + }, + { + "name": "editable", + "title": "支持编辑", + "setter": { + "componentName": "BoolSetter" + }, + "defaultValue": false + }, + { + "name": "draggable", + "title": "支持拖拽", + "setter": { + "componentName": "BoolSetter" + }, + "defaultValue": false + }, + { + "name": "selectable", + "title": "支持选中", + "setter": { + "componentName": "BoolSetter" + }, + "defaultValue": false + }, + { + "name": "defaultExpandedKeys", + "display": "block", + "title": "默认展开的节点", + "setter": "JsonSetter" + }, + { + "name": "defaultSelectedKeys", + "display": "block", + "title": "默认选中的节点", + "setter": "JsonSetter" + } + ], + "supports": { + "style": true, + "events": ["onSelect", "onCheck", "onExpand"] + } + }, + "experimental": { + "initials": [ + { + "name": "showLine", + "initial": { + "type": "JSFunction", + "value": "()=> true" + } + }, + { + "name": "defaultExpandAll", + "initial": { + "type": "JSFunction", + "value": "()=> true" + } + }, + { + "name": "defaultExpandedKeys", + "initial": { + "type": "JSFunction", + "value": "()=> [\"1\"]" + } + }, + { + "name": "defaultSelectedKeys", + "initial": { + "type": "JSFunction", + "value": "()=> [\"2\"]" + } + }, + { + "name": "dataSource", + "initial": { + "type": "JSFunction", + "value": "() => [\n {\n label: \"Component\",\n key: \"1\",\n children: [\n {\n label: \"Form\",\n key: \"2\",\n selectable: false,\n children: [\n {\n label: \"Input\",\n key: \"4\"\n },\n {\n label: \"Select\",\n key: \"5\"\n }\n ]\n },\n {\n label: \"Display\",\n key: \"3\",\n children: [\n {\n label: \"Table\",\n key: \"6\"\n }\n ]\n }\n ]\n }\n ]" + } + } + ] + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Typography.Text", + "title": "Text", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Typography", + "main": "", + "destructuring": true, + "subName": "Text" + }, + "props": [ + { + "name": "children", + "propType": "string" + }, + { + "name": "delete", + "propType": "bool", + "description": "添加删除线样式", + "defaultValue": false + }, + { + "name": "mark", + "propType": "bool", + "description": "添加标记样式", + "defaultValue": false + }, + { + "name": "underline", + "propType": "bool", + "description": "添加下划线样式", + "defaultValue": false + }, + { + "name": "strong", + "propType": "bool", + "description": "是否加粗", + "defaultValue": false + }, + { + "name": "code", + "propType": "bool", + "description": "添加代码样式", + "defaultValue": false + }, + { + "name": "component", + "propType": { + "type": "oneOf", + "value": ["span", "h1", "h2", "h3", "h4"] + }, + "description": "设置标签类型", + "defaultValue": "span" + }, + { + "name": "onClick", + "propType": "func", + "description": "鼠标点击" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "children", + "setter": "TextAreaSetter" + } + ] + } + }, + "category": "基础" + }, + { + "componentName": "Typography", + "title": "Text", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Typography", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "component", + "propType": { + "type": "instanceOf", + "value": "elementType" + }, + "description": "设置标签类型", + "defaultValue": "article" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "children", + "title": "内容", + "propType": "string" + } + ], + "configure": { + "component": { + "isContainer": true + } + }, + "icon": "", + "category": "常用" + }, + { + "componentName": "Upload.Dragger", + "title": "Upload.Dragger", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Upload", + "main": "", + "destructuring": true, + "subName": "DragUpload" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "description": "样式前缀", + "defaultValue": "next-" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "shape", + "propType": "string" + }, + { + "name": "onDragOver", + "propType": "func" + }, + { + "name": "onDragLeave", + "propType": "func" + }, + { + "name": "onDrop", + "propType": "func" + }, + { + "name": "limit", + "propType": "number" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "defaultValue", + "propType": { + "type": "instanceOf", + "value": "array" + } + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "listType", + "propType": "string" + }, + { + "name": "timeout", + "propType": "number" + } + ], + "category": "基础" + }, + { + "componentName": "Upload.List", + "title": "Upload.List", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Upload", + "main": "", + "destructuring": true, + "subName": "List" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "locale", + "propType": "object", + "description": "多语言" + }, + { + "name": "listType", + "propType": { + "type": "oneOf", + "value": ["text", "image", "card"] + }, + "description": "文件列表，数据格式请参考 文件对象", + "defaultValue": "text" + }, + { + "name": "value", + "propType": { + "type": "instanceOf", + "value": "array" + }, + "description": "文件列表", + "defaultValue": [] + }, + { + "name": "closable", + "propType": "bool", + "defaultValue": false + }, + { + "name": "onRemove", + "propType": "func", + "description": "删除文件回调(支持Promise)" + }, + { + "name": "onCancel", + "propType": "func", + "description": "取消上传回调(支持Promise)" + }, + { + "name": "onImageError", + "propType": "func", + "description": "头像加载出错回调" + }, + { + "name": "onPreview", + "propType": "func", + "description": "listType=card时点击图片回调" + }, + { + "name": "extraRender", + "propType": "func", + "description": "自定义额外渲染" + }, + { + "name": "progressProps", + "propType": "object", + "description": "透传给Progress props" + }, + { + "name": "children", + "propType": "node" + }, + { + "name": "uploader", + "propType": "any" + }, + { + "name": "useDataURL", + "propType": "bool", + "description": "可选参数，是否本地预览" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "isPreview", + "propType": "bool" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "Upload.Selecter", + "title": "Upload.Selecter", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Upload", + "main": "", + "destructuring": true, + "subName": "Selecter" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用上传功能" + }, + { + "name": "multiple", + "propType": "bool", + "description": "是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件", + "defaultValue": false + }, + { + "name": "dragable", + "propType": "bool", + "description": "是否支持拖拽上传，`ie10+` 支持。" + }, + { + "name": "accept", + "propType": "string", + "description": "接受上传的文件类型 (image/png, image/jpg, .doc, .ppt) 详见 [input accept attribute](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input#attr-accept)" + }, + { + "name": "onSelect", + "propType": "func", + "description": "文件选择回调" + }, + { + "name": "onDragOver", + "propType": "func", + "description": "拖拽经过回调" + }, + { + "name": "onDragLeave", + "propType": "func", + "description": "拖拽离开回调" + }, + { + "name": "onDrop", + "propType": "func", + "description": "拖拽完成回调" + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "name", + "propType": "string", + "defaultValue": "file" + } + ], + "category": "基础" + }, + { + "componentName": "Upload", + "title": "上传", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Upload", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "action", + "propType": "string", + "description": "上传的地址" + }, + { + "name": "value", + "propType": { + "type": "Json" + }, + "description": "文件列表" + }, + { + "name": "defaultValue", + "propType": "object", + "description": "默认文件列表" + }, + { + "name": "shape", + "propType": { + "type": "oneOf", + "value": ["card"] + }, + "description": "上传按钮形状" + }, + { + "name": "listType", + "propType": { + "type": "oneOf", + "value": ["text", "image", "card"] + }, + "description": "上传列表的样式" + }, + { + "name": "name", + "propType": "string", + "description": "文件名字段" + }, + { + "name": "data", + "propType": { + "type": "oneOfType", + "value": ["object", "func"] + }, + "description": "上传额外传参" + }, + { + "name": "formatter", + "propType": "func", + "title": { + "label": "数据格式化函数", + "tip": "数据格式化函数，配合自定义 action 使用，参数为服务器的响应数据，详见 [formatter](#formater)\n@param {Object} response 返回\n@param {File} file 文件对象" + } + }, + { + "name": "limit", + "propType": "number", + "description": "最大文件上传个数", + "defaultValue": null + }, + { + "name": "timeout", + "propType": "number", + "description": "设置上传超时,单位ms" + }, + { + "name": "dragable", + "propType": "bool", + "description": "可选参数，是否支持拖拽上传，`ie10+` 支持。" + }, + { + "name": "useDataURL", + "propType": "bool", + "description": "可选参数，是否本地预览" + }, + { + "name": "disabled", + "propType": "bool", + "description": "可选参数，是否禁用上传功能" + }, + { + "name": "onSelect", + "propType": "func", + "description": "选择文件回调" + }, + { + "name": "onProgress", + "propType": "func", + "description": "上传中" + }, + { + "name": "onChange", + "propType": "func", + "description": "上传文件改变时的状态\n@param {Object} info 文件事件对象" + }, + { + "name": "onSuccess", + "propType": "func", + "description": "可选参数，上传成功回调函数，参数为请求下响应信息以及文件\n@param {Object} file 文件\n@param {Array} value 值" + }, + { + "name": "afterSelect", + "propType": "func", + "description": "可选参数, 用于校验文件,afterSelect仅在 autoUpload=false 的时候生效,autoUpload=true时,可以使用beforeUpload完全可以替代该功能.\n@param {Object} file\n@returns {Boolean} 返回false会阻止上传,其他则表示正常" + }, + { + "name": "onRemove", + "propType": "func", + "description": "移除文件回调函数\n@param {Object} file 文件\n@returns {Boolean|Promise} 返回 false、Promise.resolve(false)、 Promise.reject() 将阻止文件删除" + }, + { + "name": "onError", + "propType": "func", + "description": "可选参数，上传失败回调函数，参数为上传失败的信息、响应信息以及文件\n@param {Object} file 出错的文件\n@param {Array} value 当前值" + }, + { + "name": "beforeUpload", + "propType": "func", + "title": { + "label": "开始上传时回调", + "tip": "可选参数, 详见 [beforeUpload](#beforeUpload)\n@param {Object} file 所有文件\n@param {Object} options 参数\n@returns {Boolean|Object|Promise} 返回值作用见demo" + } + }, + { + "name": "onDrop", + "propType": "func", + "description": "放文件" + }, + { + "name": "className", + "propType": "string", + "description": "自定义class" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + }, + { + "name": "autoUpload", + "propType": "bool", + "description": "自动上传", + "defaultValue": true + }, + { + "name": "request", + "propType": "func", + "description": "自定义上传方法\n@param {Object} option\n@return {Object} object with abort method" + }, + { + "name": "progressProps", + "propType": "object", + "description": "透传给Progress props" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态" + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {number} value 评分值" + } + ], + "configure": { + "props": [ + { + "name": "title", + "title": "标题", + "setter": "StringSetter" + }, + { + "name": "title", + "title": "标题位置", + "setter": "StringSetter" + }, + { + "name": "defaultValue", + "title": "默认值", + "setter": { + "componentName": "JsonSetter" + } + }, + { + "name": "shape", + "title": "按钮形状", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "默认", + "value": "" + }, + { + "title": "卡片", + "value": "card" + } + ] + } + }, + "description": "上传按钮形状" + }, + { + "name": "listType", + "title": "列表样式", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["text", "image", "card"] + } + }, + "defaultValue": "text", + "description": "上传列表的样式" + }, + { + "name": "limit", + "title": "数量限制", + "setter": "NumberSetter" + }, + { + "name": "disabled", + "title": "是否禁用", + "setter": "BoolSetter" + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ] + }, + "experimental": { + "initials": [ + { + "name": "shape", + "initial": { + "type": "JSFunction", + "value": "() => \"card\"" + } + }, + { + "name": "defaultValue", + "initial": { + "type": "JSFunction", + "value": "() => []" + } + } + ] + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Video", + "title": "视频", + "npm": { + "package": "@alifd/ali-lowcode-components", + "version": "latest", + "exportName": "Video", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "src", + "title": { + "label": { + "type": "i18n", + "zh_CN": "视频链接", + "en_US": "Video Address" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: src | 说明: 视频链接", + "en_US": "prop: src | description: Video address" + } + }, + "propType": "string", + "defaultValue": "https://fusion.alicdn.com/fusion-site-2.0/fusion.mp4" + }, + { + "name": "autoPlay", + "title": { + "label": { + "type": "i18n", + "zh_CN": "自动播放", + "en_US": "autoPlay" + } + }, + "propType": "bool", + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "loop", + "title": { + "label": { + "type": "i18n", + "zh_CN": "循环播放", + "en_US": "loop" + } + }, + "propType": "bool" + }, + { + "name": "muted", + "title": { + "label": { + "type": "i18n", + "zh_CN": "静音", + "en_US": "muted" + } + }, + "propType": "bool" + }, + { + "name": "controls", + "title": { + "label": { + "type": "i18n", + "zh_CN": "控制条", + "en_US": "controls" + } + }, + "propType": "bool" + }, + { + "name": "poster", + "title": { + "label": { + "type": "i18n", + "zh_CN": "默认图URL", + "en_US": "poster" + } + }, + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "autoPlay", + "title": "自动播放", + "setter": { + "componentName": "BoolSetter" + }, + "extraProps": { + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n if (value) {\n target.getNode().setPropValue(\"muted\", true);\n }\n }" + } + } + }, + { + "name": "muted", + "title": "静音", + "setter": { + "componentName": "BoolSetter" + }, + "condition": { + "type": "JSFunction", + "value": "target => {\n return !target.getProps().getPropValue(\"autoPlay\");\n }" + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "WeekPicker", + "title": "WeekPicker", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "DatePicker", + "main": "", + "destructuring": true, + "subName": "WeekPicker" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "label", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "输入框内置标签" + }, + { + "name": "state", + "propType": { + "type": "oneOf", + "value": ["success", "loading", "error"] + }, + "description": "输入框状态" + }, + { + "name": "placeholder", + "propType": "string", + "description": "输入提示" + }, + { + "name": "defaultVisibleMonth", + "propType": "func", + "description": "默认展现的月\n@return {MomentObject} 返回包含指定月份的 moment 对象实例" + }, + { + "name": "onVisibleMonthChange", + "propType": "func" + }, + { + "name": "value", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "日期值（受控）moment 对象" + }, + { + "name": "defaultValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "初始日期值，moment 对象" + }, + { + "name": "format", + "propType": "string", + "description": "日期值的格式（用于限定用户输入和展示）", + "defaultValue": "YYYY-wo" + }, + { + "name": "disabledDate", + "propType": "func", + "description": "禁用日期函数\n@param {MomentObject} 日期值\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\n@return {Boolean} 是否禁用" + }, + { + "name": "footerRender", + "propType": "func", + "description": "自定义面板页脚\n@return {Node} 自定义的面板页脚组件" + }, + { + "name": "onChange", + "propType": "func", + "description": "日期值改变时的回调\n@param {MomentObject|String} value 日期值" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "输入框尺寸", + "defaultValue": "medium" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "hasClear", + "propType": "bool", + "description": "是否显示清空按钮", + "defaultValue": true + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层显示状态" + }, + { + "name": "defaultVisible", + "propType": "bool", + "description": "弹层默认是否显示", + "defaultValue": false + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层展示状态变化时的回调\n@param {Boolean} visible 弹层是否显示\n@param {String} type 触发弹层显示和隐藏的来源 calendarSelect 表示由日期表盘的选择触发； okBtnClick 表示由确认按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "popupTriggerType", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "弹层触发方式", + "defaultValue": "click" + }, + { + "name": "popupAlign", + "propType": "string", + "description": "弹层对齐方式,具体含义见 OverLay文档", + "defaultValue": "tl tl" + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + }, + { + "name": "popupStyle", + "propType": "object", + "description": "弹层自定义样式" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹层自定义样式类" + }, + { + "name": "popupProps", + "propType": "object", + "description": "弹层其他属性" + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "inputProps", + "propType": "object", + "description": "输入框其他属性" + }, + { + "name": "dateCellRender", + "propType": "func", + "description": "自定义日期渲染函数\n@param {Object} value 日期值（moment对象）\n@returns {ReactNode}" + }, + { + "name": "monthCellRender", + "propType": "func", + "description": "自定义月份渲染函数\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@returns {ReactNode}" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态" + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {MomentObject} value 年份" + }, + { + "name": "yearCellRender", + "propType": "func" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "name", + "propType": "string" + }, + { + "name": "popupComponent", + "propType": { + "type": "instanceOf", + "value": "elementType" + } + }, + { + "name": "popupContent", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "YearPicker", + "title": "YearPicker", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "DatePicker", + "main": "", + "destructuring": true, + "subName": "YearPicker" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "label", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "输入框内置标签" + }, + { + "name": "state", + "propType": { + "type": "oneOf", + "value": ["success", "loading", "error"] + }, + "description": "输入框状态" + }, + { + "name": "placeholder", + "propType": "string", + "description": "输入提示" + }, + { + "name": "value", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "日期值（受控）moment 对象" + }, + { + "name": "defaultValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "初始日期值，moment 对象" + }, + { + "name": "format", + "propType": "string", + "description": "日期值的格式（用于限定用户输入和展示）", + "defaultValue": "YYYY" + }, + { + "name": "disabledDate", + "propType": "func", + "description": "禁用日期函数\n@param {MomentObject} 日期值\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\n@return {Boolean} 是否禁用" + }, + { + "name": "footerRender", + "propType": "func", + "description": "自定义面板页脚\n@return {Node} 自定义的面板页脚组件" + }, + { + "name": "onChange", + "propType": "func", + "description": "日期值改变时的回调\n@param {MomentObject|String} value 日期值" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "输入框尺寸", + "defaultValue": "medium" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "hasClear", + "propType": "bool", + "description": "是否显示清空按钮", + "defaultValue": true + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层显示状态" + }, + { + "name": "defaultVisible", + "propType": "bool", + "description": "弹层默认是否显示" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层展示状态变化时的回调\n@param {Boolean} visible 弹层是否显示\n@param {String} reason 触发弹层显示和隐藏的来源 calendarSelect 表示由日期表盘的选择触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "popupTriggerType", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "弹层触发方式", + "defaultValue": "click" + }, + { + "name": "popupAlign", + "propType": "string", + "description": "弹层对齐方式, 具体含义见 OverLay文档", + "defaultValue": "tl tl" + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + }, + { + "name": "popupStyle", + "propType": "object", + "description": "弹层自定义样式" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹层自定义样式类" + }, + { + "name": "popupProps", + "propType": "object", + "description": "弹层其他属性" + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "inputProps", + "propType": "object", + "description": "输入框其他属性" + }, + { + "name": "yearCellRender", + "propType": "func" + }, + { + "name": "dateInputAriaLabel", + "propType": "string", + "description": "日期输入框的 aria-label 属性" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态" + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {MomentObject} value 年份" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "name", + "propType": "string" + }, + { + "name": "popupComponent", + "propType": { + "type": "instanceOf", + "value": "elementType" + } + }, + { + "name": "popupContent", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + } + ], + "componentList": [ + { + "componentName": "M220318", + "title": "自定义组件" + }, + { + "title": "常用", + "icon": "", + "children": [ + { + "componentName": "Link", + "library": "Next", + "title": "链接", + "icon": "", + "snippets": [ + { + "title": "链接", + "screenshot": "https://img.alicdn.com/tfs/TB15DZVReL2gK0jSZFmXXc7iXXa-200-200.svg", + "schema": { + "componentName": "Link", + "title": "链接", + "props": { + "href": "https://fusion.design", + "target": "_blank", + "children": "这是一个超链接" + } + } + } + ] + }, + { + "componentName": "Button", + "library": "Next", + "title": "按钮", + "icon": "", + "snippets": [ + { + "title": "主要", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_button.png", + "schema": { + "componentName": "Button", + "props": { + "prefix": "next-", + "type": "primary", + "size": "medium", + "htmlType": "button", + "component": "button", + "children": "取消" + } + } + }, + { + "title": "次要", + "screenshot": "https://img.alicdn.com/tfs/TB1a.N1uVT7gK0jSZFpXXaTkpXa-112-64.png", + "schema": { + "componentName": "Button", + "props": { + "type": "secondary", + "size": "medium", + "htmlType": "button", + "component": "button", + "children": "提交" + } + } + }, + { + "title": "分隔按钮", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_split-button.png", + "schema": { + "componentName": "SplitButton", + "props": { + "prefix": "next-", + "type": "normal", + "size": "medium", + "defaultSelectedKeys": [], + "autoWidth": true, + "popupTriggerType": "click" + } + } + }, + { + "title": "按钮组", + "screenshot": "https://img.alicdn.com/tfs/TB1t6dhvV67gK0jSZPfXXahhFXa-310-122.png", + "schema": { + "componentName": "Button.Group", + "props": {}, + "children": [ + { + "componentName": "Button", + "props": { + "type": "primary", + "style": { + "margin": "0 5px 0 5px" + }, + "htmlType": "submit", + "children": "提交" + }, + "children": [ + { + "componentName": "Icon", + "props": { + "type": "success" + } + } + ] + }, + { + "componentName": "Button", + "props": { + "type": "normal", + "style": { + "margin": "0 5px 0 5px" + }, + "htmlType": "reset", + "children": "重置" + } + } + ] + } + } + ] + }, + { + "componentName": "Image", + "library": "Next", + "title": "图片", + "icon": "", + "snippets": [ + { + "title": "图片", + "screenshot": "https://img.alicdn.com/tfs/TB10nEur.Y1gK0jSZFCXXcwqXXa-234-230.png", + "schema": { + "title": "图片", + "componentName": "Image", + "props": { + "src": "https://img.alicdn.com/tps/TB16TQvOXXXXXbiaFXXXXXXXXXX-120-120.svg" + } + } + } + ] + }, + { + "componentName": "NextText", + "library": "Next", + "title": "文本", + "icon": "", + "snippets": [ + { + "title": "标题", + "screenshot": "https://img.alicdn.com/imgextra/i4/O1CN01E2PcPW1bKJV5QUVMg_!!6000000003446-55-tps-50-50.svg", + "schema": { + "componentName": "NextText", + "props": { + "type": "h5", + "children": "标题标题" + } + } + }, + { + "title": "正文", + "screenshot": "https://img.alicdn.com/imgextra/i3/O1CN01n5wpxc1bi862KuXFz_!!6000000003498-55-tps-50-50.svg", + "schema": { + "componentName": "NextText", + "props": { + "type": "inherit", + "children": "基于 Ali-Lowcode-Engine 快速打造高生产力的低代码研发平台, 基于自然布局体系快速搭建页面" + } + } + } + ] + }, + { + "componentName": "RichText", + "library": "Next", + "title": "需求占位", + "icon": "", + "snippets": [ + { + "title": "需求占位", + "screenshot": "https://img.alicdn.com/tfs/TB160cKkP39YK4jSZPcXXXrUFXa-112-64.png", + "schema": { + "title": "需求占位", + "componentName": "RichText", + "props": { + "title": "需求占位描述", + "content": "

需求标题

你可以在这里描述需求
或者粘贴需求截图

" + } + } + } + ] + } + ] + }, + { + "title": "容器", + "icon": "", + "children": [ + { + "componentName": "Balloon", + "library": "Next", + "title": "气泡框", + "icon": "", + "snippets": [ + { + "title": "气泡框", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_balloon.png", + "schema": { + "componentName": "Balloon", + "props": { + "defaultVisible": true, + "prefix": "next-", + "size": "medium", + "type": "normal", + "closable": true, + "align": "b", + "offset": [0, 0], + "triggerType": "hover", + "autoFocus": true, + "trigger": { + "type": "JSSlot", + "props": { + "title": "触发元素" + } + } + } + } + } + ] + }, + { + "componentName": "Dialog", + "library": "Next", + "title": "对话框", + "icon": "", + "snippets": [ + { + "title": "对话框", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_dialog.png", + "schema": { + "componentName": "Dialog", + "props": { + "prefix": "next-", + "footerAlign": "right", + "title": "Title", + "footer": true, + "footerActions": ["ok", "cancel"], + "closeable": "esc,close", + "hasMask": true, + "align": "cc cc", + "minMargin": 40, + "isAutoContainer": true, + "visible": true + } + } + }, + { + "title": "隐藏底部", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_dialog.png", + "schema": { + "componentName": "Dialog", + "props": { + "prefix": "next-", + "footerAlign": "right", + "title": "Title", + "footer": false, + "closeable": "esc,close", + "hasMask": true, + "align": "cc cc", + "minMargin": 40, + "isAutoContainer": true, + "visible": true + } + } + } + ] + }, + { + "componentName": "Drawer", + "library": "Next", + "title": "抽屉", + "icon": "", + "snippets": [ + { + "title": "侧抽屉", + "screenshot": "https://img.alicdn.com/tfs/TB1o0t4u9f2gK0jSZFPXXXsopXa-112-64.png", + "schema": { + "componentName": "Drawer", + "props": { + "prefix": "next-", + "triggerType": "click", + "closeable": true, + "placement": "right", + "hasMask": true, + "isAutoContainer": true, + "visible": true + } + } + }, + { + "title": "底部抽屉", + "screenshot": "https://img.alicdn.com/tfs/TB1YOd2u2b2gK0jSZK9XXaEgFXa-112-64.png", + "schema": { + "componentName": "Drawer", + "props": { + "prefix": "next-", + "triggerType": "click", + "closeable": true, + "placement": "bottom", + "hasMask": true, + "isAutoContainer": true, + "visible": true + } + } + } + ] + }, + { + "componentName": "NextBlock", + "library": "Next", + "title": "区块", + "icon": "", + "snippets": [ + { + "screenshot": "https://img.alicdn.com/imgextra/i4/O1CN018GSQoS1NfvZqx8kox_!!6000000001598-2-tps-504-244.png", + "title": "标准单列", + "schema": { + "componentName": "NextBlock", + "props": { + "childTotalColumns": 12, + "layoutmode": "O", + "mode": "inset" + }, + "children": [ + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 12, + "rowSpan": 1, + "isAutoContainer": true + } + } + ] + } + }, + { + "screenshot": "https://img.alicdn.com/imgextra/i2/O1CN01pGG2VZ1GM34oELm0S_!!6000000000607-2-tps-504-244.png", + "title": "标准模式", + "schema": { + "componentName": "NextBlock", + "props": { + "childTotalColumns": 12, + "layoutmode": "OOO", + "mode": "inset" + }, + "children": [ + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + }, + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + }, + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + } + ] + } + }, + { + "screenshot": "https://img.alicdn.com/imgextra/i4/O1CN01Vpmd151yx07vfE7Eh_!!6000000006644-55-tps-500-240.svg", + "title": "卡片模式", + "schema": { + "componentName": "NextBlock", + "props": { + "childTotalColumns": 12, + "layoutmode": "OOO", + "mode": "card" + }, + "children": [ + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + }, + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + }, + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + } + ] + } + }, + { + "screenshot": "https://img.alicdn.com/imgextra/i4/O1CN01jq8RX81fQVKA5wvjz_!!6000000004001-2-tps-1000-480.png", + "title": "透明模式", + "schema": { + "componentName": "NextBlock", + "props": { + "childTotalColumns": 12, + "layoutmode": "OOO", + "mode": "transparent" + }, + "children": [ + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + }, + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + }, + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + } + ] + } + } + ] + }, + { + "componentName": "NextP", + "library": "Next", + "title": "段落模板", + "icon": "", + "snippets": [ + { + "title": "左右布局", + "screenshot": "https://img.alicdn.com/imgextra/i2/O1CN01xhBoCx26lZ9kasMLa_!!6000000007702-2-tps-140-61.png", + "schema": { + "componentName": "NextP", + "title": "段落", + "props": { + "align": "space-between", + "flex": true, + "verAlign": "middle", + "textSpacing": true + }, + "children": [ + { + "componentName": "NextPCell", + "props": { + "primaryKey": "4903", + "direction": "hoz", + "align": "inherit", + "verAlign": "inherit" + } + }, + { + "componentName": "NextPCell", + "props": { + "primaryKey": "5240", + "direction": "hoz", + "align": "inherit", + "verAlign": "inherit" + } + } + ] + } + }, + { + "title": "行撑满", + "screenshot": "https://img.alicdn.com/imgextra/i1/O1CN01A0tcpZ1YY6ZrVtvtQ_!!6000000003070-2-tps-138-96.png", + "schema": { + "componentName": "NextP", + "title": "段落", + "props": { + "full": true, + "textSpacing": true + }, + "children": [ + { + "componentName": "NextPCell", + "props": { + "primaryKey": "4092", + "direction": "hoz", + "align": "inherit", + "verAlign": "inherit" + } + }, + { + "componentName": "NextPCell", + "props": { + "primaryKey": "1095", + "direction": "hoz", + "align": "inherit", + "verAlign": "inherit" + } + } + ] + } + }, + { + "title": "组", + "screenshot": "https://img.alicdn.com/imgextra/i3/O1CN01NMDPaR1pzu5MxtVGF_!!6000000005432-2-tps-576-180.png", + "schema": { + "componentName": "NextPCell", + "title": "组", + "props": { + "direction": "hoz", + "align": "inherit", + "verAlign": "inherit" + } + } + } + ] + }, + { + "componentName": "NextPage", + "library": "Next", + "title": "页面", + "icon": "", + "snippets": [ + { + "title": "页面", + "screenshot": "https://tianshu.alicdn.com/429f9a1d-3856-4e5c-8a9c-3013860c9708.png", + "schema": { + "componentName": "NextPage", + "title": "页面", + "props": { + "columns": 12, + "headerDivider": true, + "placeholderStyle": { + "gridRowEnd": "span 1", + "gridColumnEnd": "span 12" + }, + "placeholder": "页面主体内容：拖拽Block布局组件到这里", + "header": { + "type": "JSSlot", + "title": "header", + "value": [] + }, + "headerProps": { + "background": "surface" + }, + "footer": { + "type": "JSSlot", + "title": "footer", + "value": [] + } + }, + "children": [ + { + "componentName": "NextBlock", + "title": "区块", + "props": { + "prefix": "next-", + "placeholderStyle": { + "height": "100%" + }, + "noPadding": false, + "noBorder": false, + "background": "surface", + "layoutmode": "O", + "colSpan": 12, + "rowSpan": 1, + "childTotalColumns": 12 + } + } + ] + } + } + ] + } + ] + }, + { + "title": "导航", + "icon": "", + "children": [ + { + "componentName": "Breadcrumb", + "library": "Next", + "title": "面包屑", + "icon": "", + "snippets": [ + { + "title": "面包屑", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_breadcrumb.png", + "schema": { + "componentName": "Breadcrumb", + "props": { + "maxNode": 100, + "component": "nav" + }, + "children": [ + { + "componentName": "Breadcrumb.Item", + "props": { + "children": "一级", + "primaryKey": "breadcrumb-item-1", + "target": "_self" + } + }, + { + "componentName": "Breadcrumb.Item", + "props": { + "children": "二级", + "primaryKey": "breadcrumb-item-2", + "target": "_self" + } + }, + { + "componentName": "Breadcrumb.Item", + "props": { + "children": "三级", + "primaryKey": "breadcrumb-item-3", + "target": "_self" + } + } + ] + } + } + ] + }, + { + "componentName": "Pagination", + "library": "Next", + "title": "翻页器", + "icon": "", + "snippets": [ + { + "title": "翻页器", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_pagination.png", + "schema": { + "componentName": "Pagination", + "props": { + "prefix": "next-", + "type": "normal", + "shape": "normal", + "size": "medium", + "defaultCurrent": 1, + "total": 100, + "pageShowCount": 5, + "pageSize": 10, + "pageSizePosition": "start", + "showJump": true + } + } + } + ] + }, + { + "componentName": "Search", + "library": "Next", + "title": "搜索", + "icon": "", + "snippets": [ + { + "title": "搜索", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_search.png", + "schema": { + "componentName": "Search", + "props": { + "followTrigger": true, + "searchText": "搜索", + "prefix": "next-", + "shape": "normal", + "type": "normal", + "size": "medium", + "hasIcon": true + } + } + }, + { + "title": "带分类", + "screenshot": "https://img.alicdn.com/tfs/TB1rRaLu5_1gK0jSZFqXXcpaXXa-112-64.png", + "schema": { + "componentName": "Search", + "props": { + "followTrigger": true, + "defaultFilterValue": "Products", + "filter": [ + { + "label": "Products", + "value": "Products" + }, + { + "label": "Products1", + "value": "Products1" + } + ], + "searchText": "搜索", + "prefix": "next-", + "shape": "normal", + "type": "normal", + "size": "medium", + "hasIcon": true + } + } + } + ] + }, + { + "componentName": "Step", + "library": "Next", + "title": "步骤条", + "icon": "", + "snippets": [ + { + "title": "步骤", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_step.png", + "schema": { + "componentName": "Step", + "props": { + "prefix": "next-", + "direction": "hoz", + "labelPlacement": "ver", + "shape": "circle", + "animation": true + }, + "children": [ + { + "componentName": "Step.Item", + "props": { + "title": "步骤1", + "icon": "smile", + "content": "内容1", + "status": "" + } + }, + { + "componentName": "Step.Item", + "props": { + "title": "步骤2", + "icon": "smile", + "content": "内容2", + "status": "" + } + }, + { + "componentName": "Step.Item", + "props": { + "title": "步骤3", + "icon": "smile", + "content": "内容3", + "status": "" + } + } + ] + } + } + ] + } + ] + }, + { + "title": "内容", + "icon": "", + "children": [ + { + "componentName": "Avatar", + "library": "Next", + "title": "头像", + "icon": "", + "snippets": [ + { + "title": "头像", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_avatar.png", + "schema": { + "componentName": "Avatar", + "props": { + "prefix": "next-", + "size": "medium", + "shape": "circle", + "icon": "smile" + } + } + } + ] + }, + { + "componentName": "Badge", + "library": "Next", + "title": "徽标数", + "icon": "", + "snippets": [ + { + "title": "徽标数", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_badge.png", + "schema": { + "componentName": "Badge", + "props": { + "prefix": "next-", + "showZero": true + } + } + } + ] + }, + { + "componentName": "Balloon.Tooltip", + "library": "Next", + "title": "文字提示", + "icon": "", + "snippets": [ + { + "title": "文字提示", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_balloon.png", + "schema": { + "componentName": "Balloon.Tooltip", + "props": { + "defaultVisible": true, + "prefix": "next-", + "size": "medium", + "type": "normal", + "closable": true, + "align": "b", + "offset": [0, 0], + "triggerType": "hover", + "autoFocus": true, + "trigger": { + "type": "JSSlot", + "props": { + "title": "触发元素" + } + }, + "children": "文字提示信息" + } + } + } + ] + }, + { + "componentName": "Calendar", + "library": "Next", + "title": "日历", + "icon": "", + "snippets": [ + { + "screenshot": "https://img.alicdn.com/tfs/TB158yMu4v1gK0jSZFFXXb0sXXa-112-64.png", + "title": "卡片型", + "schema": { + "componentName": "Calendar", + "props": { + "shape": "card" + } + } + }, + { + "screenshot": "https://img.alicdn.com/tfs/TB1PRmJu7P2gK0jSZPxXXacQpXa-112-64.png", + "title": "面板型", + "schema": { + "componentName": "Calendar", + "props": { + "shape": "panel" + } + } + }, + { + "screenshot": "https://img.alicdn.com/tfs/TB10JuKu.T1gK0jSZFhXXaAtVXa-112-64.png", + "title": "全屏型", + "schema": { + "componentName": "Calendar", + "props": { + "shape": "fullscreen" + } + } + } + ] + }, + { + "componentName": "Card", + "library": "Next", + "title": "卡片", + "icon": "", + "snippets": [ + { + "screenshot": "https://img.alicdn.com/tfs/TB1CHN3u4z1gK0jSZSgXXavwpXa-112-64.png", + "title": "普通型", + "schema": { + "componentName": "Card", + "props": { + "title": "普通型卡片" + }, + "children": [] + } + }, + { + "screenshot": "https://img.alicdn.com/tfs/TB1.Ut6u4D1gK0jSZFKXXcJrVXa-112-64.png", + "title": "自定义", + "schema": { + "componentName": "Card", + "props": { + "title": "自定义卡片", + "extra": { + "type": "JSSlot" + } + }, + "children": [] + } + } + ] + }, + { + "componentName": "CascaderSelect", + "library": "Next", + "title": "级联选择器", + "icon": "", + "snippets": [ + { + "title": "收起模式", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_cascader-select.png", + "schema": { + "componentName": "CascaderSelect", + "props": { + "prefix": "next-", + "size": "medium", + "hasArrow": true, + "hasBorder": true, + "expandTriggerType": "click", + "resultAutoWidth": true, + "notFoundContent": "Not Found", + "dataSource": [ + { + "value": "2974", + "label": "西安", + "children": [ + { + "value": "2975", + "label": "西安市" + }, + { + "value": "2976", + "label": "高陵县" + }, + { + "value": "2977", + "label": "蓝田县" + } + ] + } + ] + } + } + }, + { + "title": "展开模式", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_cascader.png", + "schema": { + "componentName": "Cascader", + "props": { + "prefix": "next-", + "expandTriggerType": "click", + "dataSource": [ + { + "value": "2974", + "label": "西安", + "children": [ + { + "value": "2975", + "label": "西安市" + }, + { + "value": "2976", + "label": "高陵县" + }, + { + "value": "2977", + "label": "蓝田县" + } + ] + } + ] + } + } + } + ] + }, + { + "componentName": "Checkbox", + "library": "Next", + "title": "复选按钮", + "icon": "", + "snippets": [ + { + "title": "复选按钮", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_menu.png", + "schema": { + "componentName": "Checkbox", + "props": { + "label": "Check Option" + } + } + }, + { + "title": "复选按钮组", + "screenshot": "https://img.alicdn.com/tfs/TB1EJN7uYY1gK0jSZTEXXXDQVXa-112-64.png", + "schema": { + "componentName": "CheckboxGroup", + "props": { + "prefix": "next-", + "dataSource": [ + { + "label": "选项一", + "value": "1" + }, + { + "label": "选项二", + "value": "2" + }, + { + "label": "选项三", + "value": "3" + } + ] + } + } + } + ] + }, + { + "componentName": "DatePicker", + "library": "Next", + "title": "日期选择框", + "icon": "", + "snippets": [ + { + "title": "日期选择框", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_date-picker.png", + "schema": { + "componentName": "DatePicker", + "props": { + "prefix": "next-", + "format": "YYYY-MM-DD", + "size": "medium", + "hasClear": false, + "popupTriggerType": "click", + "popupAlign": "tl tl", + "followTrigger": true + } + } + }, + { + "title": "日期区间", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_date-picker.png", + "schema": { + "componentName": "RangePicker", + "props": { + "prefix": "next-", + "format": "YYYY-MM-DD", + "size": "medium", + "type": "date", + "hasClear": false, + "popupTriggerType": "click", + "popupAlign": "tl tl", + "followTrigger": true + } + } + } + ] + }, + { + "componentName": "Divider", + "library": "Next", + "title": "分隔符", + "icon": "", + "snippets": [ + { + "title": "分隔线", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_divider.png", + "schema": { + "componentName": "Divider", + "props": { + "prefix": "next-", + "direction": "hoz", + "orientation": "center", + "children": "分隔符" + } + } + } + ] + }, + { + "componentName": "Form", + "library": "Next", + "title": "表单容器", + "icon": "", + "snippets": [ + { + "title": "表单容器", + "screenshot": "https://img.alicdn.com/tfs/TB1oH02u2b2gK0jSZK9XXaEgFXa-112-64.png", + "schema": { + "componentName": "Form", + "props": { + "labelCol": { + "span": 2, + "labelAlign": "left" + }, + "role": "grid" + }, + "children": [ + { + "componentName": "Form.Item", + "props": { + "label": "Email: ", + "required": true + }, + "children": [ + { + "componentName": "Input", + "props": { + "name": "email", + "size": "medium", + "placeholder": "用户名" + } + } + ] + }, + { + "componentName": "Form.Item", + "props": { + "label": "Password: ", + "required": true + }, + "children": [ + { + "componentName": "Input.Password", + "props": { + "name": "password", + "placeholder": "请输入密码", + "size": "medium" + } + } + ] + }, + { + "componentName": "Form.Item", + "props": { + "wrapperCol": { + "offset": 7 + } + }, + "children": [ + { + "componentName": "Form.Submit", + "props": { + "type": "primary", + "validate": true, + "onClick": { + "type": "JSFunction", + "value": "(v, e) => { console.log(v, e) }" + }, + "children": "Submit" + } + }, + { + "componentName": "Form.Reset", + "props": { + "style": { + "marginLeft": 10 + }, + "children": "Reset" + } + } + ] + } + ] + } + } + ] + }, + { + "componentName": "Icon", + "library": "Next", + "title": "图标", + "icon": "", + "snippets": [ + { + "title": "图标", + "screenshot": "", + "schema": { + "componentName": "Icon", + "props": { + "type": "smile" + } + } + } + ] + }, + { + "componentName": "Input", + "library": "Next", + "title": "输入框", + "icon": "", + "snippets": [ + { + "title": "输入框", + "screenshot": "https://img.alicdn.com/tfs/TB1ysp3u8v0gK0jSZKbXXbK2FXa-112-64.png", + "schema": { + "componentName": "Input", + "props": { + "hasBorder": true, + "size": "medium", + "autoComplete": "off" + } + } + }, + { + "title": "密码框", + "screenshot": "https://img.alicdn.com/tfs/TB1ikF3u7P2gK0jSZPxXXacQpXa-112-64.png", + "schema": { + "componentName": "Input.Password", + "props": { + "hasBorder": true, + "size": "medium", + "autoComplete": "off" + } + } + }, + { + "title": "TextArea", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_input.png", + "schema": { + "componentName": "Input.TextArea", + "props": { + "hasBorder": true, + "size": "medium", + "autoComplete": "off" + } + } + } + ] + }, + { + "componentName": "NextTable", + "library": "Next", + "title": "表格", + "icon": "", + "snippets": [ + { + "title": "NextTable", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png", + "schema": { + "componentName": "NextTable", + "title": "表格", + "props": { + "setEmptyContent": true, + "emptyContent": { + "type": "JSSlot", + "title": "EmptyContent", + "value": [ + { + "componentName": "Typography.Text", + "props": { + "children": "No Data" + } + } + ] + }, + "showMiniPager": true, + "showActionBar": true, + "actionBar": [ + { + "title": "新增", + "type": "primary" + }, + { + "title": "编辑" + } + ], + "columns": [ + { + "dataKey": "name", + "width": 200, + "align": "center", + "title": "姓名", + "editType": "text" + }, + { + "dataKey": "age", + "width": 200, + "align": "center", + "title": "年龄" + }, + { + "dataKey": "role", + "width": 200, + "align": "center", + "title": "职责" + } + ], + "data": [ + { + "name": "王小", + "id": "1", + "age": 15000, + "role": "开发" + }, + { + "name": "王中", + "id": "2", + "age": 25000, + "role": "产品" + }, + { + "name": "王大", + "id": "3", + "age": 35000, + "role": "设计" + } + ], + "actionTitle": "操作", + "actionWidth": 180, + "actionType": "link", + "actionFixed": "right", + "actionHidden": false, + "maxWebShownActionCount": 2, + "actionColumn": [ + { + "title": "编辑", + "callback": { + "type": "JSFunction", + "value": "(rowData, action, table) => {\n return table.editRow(rowData).then((row) => {\n console.log(row);\n });\n }" + } + }, + { + "title": "保存", + "callback": { + "type": "JSFunction", + "value": "(rowData, action, table) => { \nreturn table.saveRow(rowData).then((row) => { \nconsole.log(row); \n}); \n}" + }, + "mode": "EDIT" + } + ] + } + } + } + ] + }, + { + "componentName": "NumberPicker", + "library": "Next", + "title": "数字输入框", + "icon": "", + "snippets": [ + { + "title": "数字输入框", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_number-picker.png", + "schema": { + "componentName": "NumberPicker", + "props": { + "prefix": "next-", + "type": "normal", + "size": "medium", + "step": 1, + "editable": true + } + } + } + ] + }, + { + "componentName": "Radio", + "library": "Next", + "title": "单选框", + "icon": "", + "snippets": [ + { + "title": "单选按钮", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_radio.png", + "schema": { + "componentName": "Radio", + "props": { + "label": "选项一", + "value": "1" + } + } + }, + { + "title": "单选按钮组", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_radio.png", + "schema": { + "componentName": "Radio.Group", + "props": { + "dataSource": [ + { + "label": "选项一", + "value": "1" + }, + { + "label": "选项二", + "value": "2" + }, + { + "label": "选项三", + "value": "3" + } + ] + } + } + } + ] + }, + { + "componentName": "Range", + "library": "Next", + "title": "区段选择器", + "icon": "", + "snippets": [ + { + "title": "区段选择器", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_range.png", + "schema": { + "componentName": "Range", + "props": { + "prefix": "next-", + "slider": "single", + "max": 100, + "step": 1, + "marksPosition": "above", + "hasTip": true + } + } + } + ] + }, + { + "componentName": "Rating", + "library": "Next", + "title": "评分", + "icon": "", + "snippets": [ + { + "title": "评分", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_rating.png", + "schema": { + "componentName": "Rating", + "props": { + "prefix": "next-", + "count": 5, + "size": "medium" + } + } + } + ] + }, + { + "componentName": "Select", + "library": "Next", + "title": "选择器", + "icon": "", + "snippets": [ + { + "title": "选择器", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_select.png", + "schema": { + "componentName": "Select", + "props": { + "mode": "single", + "hasArrow": true, + "cacheValue": true, + "dataSource": [ + { + "value": "1", + "label": "选项1" + }, + { + "value": "2", + "label": "选项2" + }, + { + "value": "3", + "label": "选项3" + } + ] + } + } + } + ] + }, + { + "componentName": "Slider", + "library": "Next", + "title": "图片轮播", + "icon": "", + "snippets": [ + { + "title": "图片轮播", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_slider.png", + "schema": { + "componentName": "Slider", + "props": { + "prefix": "next-", + "animation": "slide", + "arrows": true, + "arrowSize": "medium", + "arrowPosition": "inner", + "arrowDirection": "hoz", + "autoplaySpeed": 3000, + "dots": true, + "dotsDirection": "hoz", + "draggable": true, + "infinite": true, + "slide": "div", + "slideDirection": "hoz", + "slidesToShow": 1, + "slidesToScroll": 1, + "speed": 600, + "triggerType": "click", + "centerPadding": "50px", + "cssEase": "ease", + "edgeFriction": 0.35, + "swipe": true, + "touchMove": true, + "touchThreshold": 5, + "useCSS": true, + "waitForAnimate": true + }, + "children": [ + { + "componentName": "Image", + "props": { + "src": "https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png" + } + }, + { + "componentName": "Image", + "props": { + "src": "https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg" + } + }, + { + "componentName": "Image", + "props": { + "src": "https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg" + } + }, + { + "componentName": "Image", + "props": { + "src": "https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg" + } + } + ] + } + } + ] + }, + { + "componentName": "Switch", + "library": "Next", + "title": "开关", + "icon": "", + "snippets": [ + { + "title": "开关组件", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_switch.png", + "schema": { + "componentName": "Switch", + "props": { + "prefix": "next-", + "size": "medium" + } + } + } + ] + }, + { + "componentName": "Tab", + "library": "Next", + "title": "选项卡", + "icon": "", + "snippets": [ + { + "title": "普通型", + "screenshot": "https://img.alicdn.com/tfs/TB1D0p2u.z1gK0jSZLeXXb9kVXa-112-64.png", + "schema": { + "componentName": "Tab", + "props": { + "shape": "pure", + "size": "medium", + "excessMode": "slide" + }, + "children": [ + { + "componentName": "Tab.Item", + "props": { + "title": "标签项1", + "primaryKey": "tab-item-1", + "isAutoContainer": true + } + }, + { + "componentName": "Tab.Item", + "props": { + "title": "标签项2", + "primaryKey": "tab-item-2", + "isAutoContainer": true + } + } + ] + } + }, + { + "title": "胶囊型", + "screenshot": "https://img.alicdn.com/tfs/TB1C0pZuWL7gK0jSZFBXXXZZpXa-112-64.png", + "schema": { + "componentName": "Tab", + "props": { + "shape": "capsule", + "size": "medium", + "excessMode": "slide" + }, + "children": [ + { + "componentName": "Tab.Item", + "props": { + "title": "标签项1", + "primaryKey": "tab-item-1", + "isAutoContainer": true + } + }, + { + "componentName": "Tab.Item", + "props": { + "title": "标签项2", + "primaryKey": "tab-item-2", + "isAutoContainer": true + } + } + ] + } + } + ] + }, + { + "componentName": "Tag", + "library": "Next", + "title": "标签", + "icon": "", + "snippets": [ + { + "title": "标签", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_tag.png", + "schema": { + "componentName": "Tag", + "props": { + "prefix": "next-", + "type": "normal", + "size": "medium", + "animation": false, + "children": "Tag" + } + } + }, + { + "title": "可关闭标签", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_tag.png", + "schema": { + "componentName": "Tag.Closeable", + "props": { + "prefix": "next-", + "closeArea": "tail", + "size": "medium", + "children": "Tag" + } + } + }, + { + "title": "可选中标签", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_tag.png", + "schema": { + "componentName": "Tag.Selectable", + "props": { + "prefix": "next-", + "children": "Tag" + } + } + } + ] + }, + { + "componentName": "TimePicker", + "library": "Next", + "title": "时间选择框", + "icon": "", + "snippets": [ + { + "title": "时间选择框", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_time-picker.png", + "schema": { + "componentName": "TimePicker", + "props": { + "prefix": "next-", + "size": "medium", + "hasClear": true, + "format": "HH:mm:ss", + "popupAlign": "tl tl", + "popupTriggerType": "click" + } + } + } + ] + }, + { + "componentName": "Timeline", + "library": "Next", + "title": "时间轴", + "icon": "", + "snippets": [ + { + "title": "时间轴", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_timeline.png", + "schema": { + "componentName": "Timeline", + "props": { + "prefix": "next-", + "fold": [], + "animation": true + }, + "children": [ + { + "componentName": "Timeline.Item", + "props": { + "state": "process", + "title": "12344" + } + }, + { + "componentName": "Timeline.Item", + "props": { + "title": "Ship" + } + }, + { + "componentName": "Timeline.Item", + "props": { + "title": "Order" + } + } + ] + } + } + ] + }, + { + "componentName": "Transfer", + "library": "Next", + "title": "穿梭框", + "icon": "", + "snippets": [ + { + "title": "穿梭框", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_transfer.png", + "schema": { + "componentName": "Transfer", + "props": { + "prefix": "next-", + "mode": "normal", + "notFoundContent": "Not Found" + } + } + } + ] + }, + { + "componentName": "TreeSelect", + "library": "Next", + "title": "树型选择控件", + "icon": "", + "snippets": [ + { + "title": "树型选择控件", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_tree-select.png", + "schema": { + "componentName": "TreeSelect", + "props": { + "prefix": "next-", + "size": "medium", + "hasArrow": true, + "hasBorder": true, + "autoWidth": true, + "notFoundContent": "Not Found", + "treeCheckedStrategy": "parent" + } + } + }, + { + "title": "树形控件", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_tree.png", + "schema": { + "componentName": "Tree", + "props": { + "prefix": "next-", + "selectable": true, + "checkedStrategy": "all", + "autoExpandParent": true, + "animation": true, + "focusable": true + } + } + } + ] + }, + { + "componentName": "Upload", + "library": "Next", + "title": "上传", + "icon": "", + "snippets": [ + { + "title": "上传组件", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_upload.png", + "schema": { + "componentName": "Upload", + "props": { + "prefix": "next-", + "closable": true, + "autoUpload": true + } + } + } + ] + }, + { + "componentName": "Video", + "library": "Next", + "title": "视频", + "icon": "", + "snippets": [ + { + "title": "视频", + "screenshot": "https://img.alicdn.com/imgextra/i3/O1CN01KPVpSS1FaPsvoag2F_!!6000000000503-55-tps-200-200.svg", + "schema": { + "title": "视频", + "componentName": "Video", + "props": { + "src": "https://fusion.alicdn.com/images/page-1.mp4", + "controls": true, + "style": { + "width": "600px" + } + } + } + } + ] + } + ] + }, + { + "title": "Feedback 反馈", + "icon": "", + "children": [] + }, + { + "title": "反馈", + "icon": "", + "children": [ + { + "componentName": "Message", + "library": "Next", + "title": "提示", + "icon": "", + "snippets": [ + { + "title": "提示", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_message.png", + "schema": { + "componentName": "Message", + "props": { + "title": "Alert", + "type": "warning", + "shape": "inline", + "size": "medium", + "visible": true, + "animation": true + } + } + } + ] + }, + { + "componentName": "Loading", + "library": "Next", + "title": "加载", + "icon": "", + "snippets": [ + { + "title": "加载", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_loading.png", + "schema": { + "componentName": "Loading", + "props": { + "color": "red", + "prefix": "next-", + "tipAlign": "bottom", + "visible": true, + "size": "large", + "inline": true + } + } + } + ] + }, + { + "componentName": "Progress", + "library": "Next", + "title": "进度指示器", + "icon": "", + "snippets": [ + { + "title": "进度指示器", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_progress.png", + "schema": { + "componentName": "Progress", + "props": { + "prefix": "next-", + "shape": "line", + "size": "medium", + "state": "normal", + "color": "blue", + "percent": 30 + } + } + } + ] + }, + { + "componentName": "Message", + "library": "Next", + "title": "面包片", + "icon": "", + "snippets": [ + { + "title": "面包片", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_message.png", + "schema": { + "componentName": "Message", + "props": { + "title": "Toast", + "type": "success", + "shape": "toast", + "size": "medium", + "visible": true, + "animation": true + } + } + } + ] + } + ] + }, + { + "title": "基础", + "icon": "", + "children": [] + }, + { + "title": "常用图表(试验)", + "icon": "", + "children": [ + { + "componentName": "ColumnChart", + "library": "Next", + "title": "柱状图", + "icon": "", + "snippets": [ + { + "title": "柱状图", + "componentName": "ColumnChart", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*C554SqAGfuMAAAAAAAAAAABkARQnAQ", + "schema": { + "title": "柱状图", + "componentName": "ColumnChart", + "props": { + "title": "基础柱状图", + "isMaterial": true, + "autoFit": true, + "padding": "auto", + "xField": "type", + "yField": "sales", + "meta": { + "type": { + "alias": "类别" + }, + "sales": { + "alias": "销售额(万)" + } + }, + "data": [ + { + "type": "家具家电", + "sales": 38 + }, + { + "type": "粮油副食", + "sales": 52 + }, + { + "type": "生鲜水果", + "sales": 61 + }, + { + "type": "美容洗护", + "sales": 145 + }, + { + "type": "母婴用品", + "sales": 48 + }, + { + "type": "进口食品", + "sales": 38 + }, + { + "type": "食品饮料", + "sales": 38 + }, + { + "type": "家庭清洁", + "sales": 38 + } + ] + } + } + } + ] + }, + { + "componentName": "LineChart", + "library": "Next", + "title": "折线图", + "icon": "", + "snippets": [ + { + "title": "折线图", + "componentName": "LineChart", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*YMGnQoh_jSAAAAAAAAAAAABkARQnAQ", + "schema": { + "title": "折线图", + "componentName": "LineChart", + "props": { + "title": "折线图标题", + "isMaterial": true, + "description": "折线图描述", + "xField": "year", + "yField": "value", + "renderer": "svg", + "data": [ + { + "year": "1991", + "value": 3 + }, + { + "year": "1992", + "value": 4 + }, + { + "year": "1993", + "value": 3.5 + }, + { + "year": "1994", + "value": 5 + }, + { + "year": "1995", + "value": 4.9 + }, + { + "year": "1996", + "value": 6 + }, + { + "year": "1997", + "value": 7 + }, + { + "year": "1998", + "value": 9 + }, + { + "year": "1999", + "value": 13 + } + ] + } + } + } + ] + }, + { + "componentName": "LiquidChart", + "library": "Next", + "title": "水位图", + "icon": "", + "snippets": [ + { + "title": "水位图", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*DKvMTrrWdAQAAAAAAAAAAABkARQnAQ", + "schema": { + "title": "水位图", + "category": "常用图表(试验)", + "componentName": "LiquidChart", + "props": { + "title": "水位图标题", + "description": "水位图描述", + "isMaterial": true, + "outline": { + "border": 2, + "distance": 6 + }, + "min": 0, + "max": 100, + "value": 49 + } + } + } + ] + }, + { + "componentName": "PieChart", + "library": "Next", + "title": "饼图", + "icon": "", + "snippets": [ + { + "title": "饼图", + "componentName": "PieChart", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*93XzToUe1OQAAAAAAAAAAABkARQnAQ", + "schema": { + "title": "饼图", + "componentName": "PieChart", + "props": { + "isMaterial": true, + "title": { + "visible": true, + "text": "基础饼图" + }, + "description": { + "visible": true, + "text": "基础饼图描述" + }, + "meta": { + "type": { + "alias": "类别" + }, + "sales": { + "alias": "销售额(万)" + } + }, + "angleField": "value", + "colorField": "type", + "data": [ + { + "type": "分类一", + "value": 27 + }, + { + "type": "分类二", + "value": 25 + }, + { + "type": "分类三", + "value": 18 + }, + { + "type": "分类四", + "value": 15 + }, + { + "type": "分类五", + "value": 10 + }, + { + "type": "其它", + "value": 5 + } + ] + } + } + } + ] + } + ] + }, + { + "title": "Others", + "icon": "", + "children": [] + }, + { + "title": "null", + "icon": "", + "children": [] + } + ] +} diff --git a/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion-with-single-component/index.ts b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion-with-single-component/index.ts new file mode 100644 index 0000000..798cbee --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion-with-single-component/index.ts @@ -0,0 +1,45 @@ +import { init, plugins } from '@alilc/lowcode-engine'; +import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler'; +import registerPlugins from './plugin'; +import { scenarioSwitcher } from '../../sample-plugins/scenario-switcher'; +import '../../universal/global.scss'; + +const preference = new Map(); +preference.set('DataSourcePane', { + importPlugins: [], + dataSourceTypes: [ + { + type: 'fetch', + }, + { + type: 'jsonp', + }, + ], +}); + +(async function main() { + await plugins.register(scenarioSwitcher); + await registerPlugins(); + + init( + document.getElementById('lce-container')!, + { + // designMode: 'live', + // locale: 'zh-CN', + enableCondition: true, + enableCanvasLock: true, + // 默认绑定变量 + supportVariableGlobally: true, + // simulatorUrl 在当 engine-core.js 同一个父路径下时是不需要配置的！！！ + // 这里因为用的是 alifd cdn，在不同 npm 包，engine-core.js 和 react-simulator-renderer.js 是不同路径 + simulatorUrl: [ + 'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/css/react-simulator-renderer.css', + 'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/js/react-simulator-renderer.js', + ], + requestHandlersMap: { + fetch: createFetchHandler(), + }, + } as any, + preference + ); +})(); diff --git a/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion-with-single-component/plugin.tsx b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion-with-single-component/plugin.tsx new file mode 100644 index 0000000..ca06e11 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion-with-single-component/plugin.tsx @@ -0,0 +1,275 @@ +import React from 'react'; +import { + plugins, + skeleton, + project, + setters, +} from '@alilc/lowcode-engine'; +import AliLowCodeEngineExt from '@alilc/lowcode-engine-ext'; +import { Button } from '@alifd/next'; +// import UndoRedoPlugin from '@alilc/lowcode-plugin-undo-redo'; +import ComponentsPane from '@alilc/lowcode-plugin-components-pane'; +import ZhEnPlugin from '@alilc/lowcode-plugin-zh-en'; +// import DataSourcePanePlugin from '@alilc/lowcode-plugin-datasource-pane'; +import SchemaPlugin from '@alilc/lowcode-plugin-schema'; +// import CodeEditor from '@alilc/lowcode-plugin-code-editor'; +import ManualPlugin from '@alilc/lowcode-plugin-manual'; +import Inject, { injectAssets } from '@alilc/lowcode-plugin-inject'; +import SimulatorResizer from '@alilc/lowcode-plugin-simulator-select'; + +// 注册到引擎 +import TitleSetter from '@alilc/lowcode-setter-title'; +import BehaviorSetter from '../../setters/behavior-setter'; +import CustomSetter from '../../setters/custom-setter'; +import Logo from '../../sample-plugins/logo'; + +import { + loadIncrementalAssets, + getPageSchema, + saveSchema, + resetSchema, + preview, + getProjectSchemaFromLocalStorage, +} from '../../universal/utils'; +import assets from './assets.json'; +import schema from './schema.json'; + +export default async function registerPlugins() { + await plugins.register(ManualPlugin); + + await plugins.register(Inject); + + // plugin API 见 https://yuque.antfin.com/ali-lowcode/docs/cdukce + SchemaPlugin.pluginName = 'SchemaPlugin'; + await plugins.register(SchemaPlugin); + + (SimulatorResizer as any).pluginName = 'SimulatorResizer'; + plugins.register(SimulatorResizer); + + const editorInit = (ctx: any) => { + return { + name: 'editor-init', + async init() { + // 修改面包屑组件的分隔符属性setter + // const assets = await ( + // await fetch( + // `https://alifd.alicdn.com/npm/@alilc/lowcode-materials/build/lowcode/assets-prod.json` + // ) + // ).json(); + // 设置物料描述 + const { material, project } = ctx; + + material.setAssets(await injectAssets(assets)); + + // 加载 schema + project.openDocument( + getProjectSchemaFromLocalStorage('basic-fusion-with-single-component') + .componentsTree?.[0] || schema + ); + }, + }; + }; + editorInit.pluginName = 'editorInit'; + await plugins.register(editorInit); + + const builtinPluginRegistry = (ctx: any) => { + return { + name: 'builtin-plugin-registry', + async init() { + const { skeleton } = ctx; + // 注册 logo 面板 + skeleton.add({ + area: 'topArea', + type: 'Widget', + name: 'logo', + content: Logo, + contentProps: { + logo: 'https://img.alicdn.com/imgextra/i4/O1CN013w2bmQ25WAIha4Hx9_!!6000000007533-55-tps-137-26.svg', + href: 'https://lowcode-engine.cn', + }, + props: { + align: 'left', + }, + }); + + // 注册组件面板 + const componentsPane = skeleton.add({ + area: 'leftArea', + type: 'PanelDock', + name: 'componentsPane', + content: ComponentsPane, + contentProps: {}, + props: { + align: 'top', + icon: 'zujianku', + description: '组件库', + }, + }); + componentsPane?.disable?.(); + project.onSimulatorRendererReady(() => { + componentsPane?.enable?.(); + }); + }, + }; + }; + builtinPluginRegistry.pluginName = 'builtinPluginRegistry'; + await plugins.register(builtinPluginRegistry); + + // 设置内置 setter 和事件绑定、插件绑定面板 + const setterRegistry = (ctx: any) => { + const { setterMap, pluginMap } = AliLowCodeEngineExt; + return { + name: 'ext-setters-registry', + async init() { + const { setters, skeleton } = ctx; + // 注册setterMap + setters.registerSetter(setterMap as any); + // 注册插件 + // 注册事件绑定面板 + skeleton.add({ + area: 'centerArea', + type: 'Widget', + content: pluginMap.EventBindDialog, + name: 'eventBindDialog', + props: {}, + }); + + // 注册变量绑定面板 + skeleton.add({ + area: 'centerArea', + type: 'Widget', + content: pluginMap.VariableBindDialog, + name: 'variableBindDialog', + props: {}, + }); + }, + }; + }; + setterRegistry.pluginName = 'setterRegistry'; + await plugins.register(setterRegistry); + + // 注册回退/前进 + // await plugins.register(UndoRedoPlugin); + + // 注册中英文切换 + await plugins.register(ZhEnPlugin); + + const loadAssetsSample = (ctx: any) => { + return { + name: 'loadAssetsSample', + async init() { + const { skeleton } = ctx; + + skeleton.add({ + name: 'loadAssetsSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + width: 80, + }, + content: ( + + ), + }); + }, + }; + }; + loadAssetsSample.pluginName = 'loadAssetsSample'; + await plugins.register(loadAssetsSample); + + // 注册保存面板 + const saveSample = (ctx: any) => { + return { + name: 'saveSample', + async init() { + const { skeleton, hotkey } = ctx; + + skeleton.add({ + name: 'saveSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + skeleton.add({ + name: 'resetSchema', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + hotkey.bind('command+s', (e) => { + e.preventDefault(); + saveSchema('basic-fusion-with-single-component'); + }); + }, + }; + }; + saveSample.pluginName = 'saveSample'; + await plugins.register(saveSample); + + // DataSourcePanePlugin.pluginName = 'DataSourcePane'; + // await plugins.register(DataSourcePanePlugin); + + // CodeEditor.pluginName = 'CodeEditor'; + // await plugins.register(CodeEditor); + + const previewSample = (ctx: any) => { + return { + name: 'previewSample', + async init() { + const { skeleton } = ctx; + skeleton.add({ + name: 'previewSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + }, + }; + }; + previewSample.pluginName = 'previewSample'; + await plugins.register(previewSample); + + const customSetter = (ctx: any) => { + return { + name: '___registerCustomSetter___', + async init() { + const { setters } = ctx; + + setters.registerSetter('TitleSetter', TitleSetter); + setters.registerSetter('BehaviorSetter', BehaviorSetter); + setters.registerSetter('CustomSetter', CustomSetter); + }, + }; + }; + customSetter.pluginName = 'customSetter'; + await plugins.register(customSetter); +} diff --git a/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion-with-single-component/schema.json b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion-with-single-component/schema.json new file mode 100644 index 0000000..96d6820 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion-with-single-component/schema.json @@ -0,0 +1,73 @@ +{ + "componentName": "Page", + "id": "node_dockcviv8fo1", + "props": { + "ref": "outerView", + "style": { + "height": "100%" + } + }, + "fileName": "/", + "dataSource": { + "list": [ + { + "type": "fetch", + "isInit": true, + "options": { + "params": {}, + "method": "GET", + "isCors": true, + "timeout": 5000, + "headers": {}, + "uri": "mock/info.json" + }, + "id": "info", + "shouldFetch": { + "type": "JSFunction", + "value": "function() { \n console.log('should fetch.....');\n return true; \n}" + } + } + ] + }, + "state": { + "text": { + "type": "JSExpression", + "value": "\"outer\"" + }, + "isShowDialog": { + "type": "JSExpression", + "value": "false" + } + }, + "css": "body {\n font-size: 12px;\n}\n\n.button {\n width: 100px;\n color: #ff00ff\n}", + "lifeCycles": { + "componentDidMount": { + "type": "JSFunction", + "value": "function componentDidMount() {\n console.log('did mount');\n}" + }, + "componentWillUnmount": { + "type": "JSFunction", + "value": "function componentWillUnmount() {\n console.log('will unmount');\n}" + } + }, + "methods": { + "testFunc": { + "type": "JSFunction", + "value": "function testFunc() {\n console.log('test func');\n}" + }, + "onClick": { + "type": "JSFunction", + "value": "function onClick() {\n this.setState({\n isShowDialog: true\n });\n}" + }, + "closeDialog": { + "type": "JSFunction", + "value": "function closeDialog() {\n this.setState({\n isShowDialog: false\n });\n}" + } + }, + "originCode": "class LowcodeComponent extends Component {\n state = {\n \"text\": \"outer\",\n \"isShowDialog\": false\n }\n componentDidMount() {\n console.log('did mount');\n }\n componentWillUnmount() {\n console.log('will unmount');\n }\n testFunc() {\n console.log('test func');\n }\n onClick() {\n this.setState({\n isShowDialog: true\n })\n }\n closeDialog() {\n this.setState({\n isShowDialog: false\n })\n }\n}", + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "" +} \ No newline at end of file diff --git a/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion/assets.json b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion/assets.json new file mode 100644 index 0000000..0bb5ae5 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion/assets.json @@ -0,0 +1,23601 @@ +{ + "version": "1.1.13", + "packages": [ + { + "package": "moment", + "version": "2.24.0", + "urls": ["https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"], + "library": "moment" + }, + { + "package": "lodash", + "urls": ["https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js"], + "library": "lodash" + }, + { + "title": "fusion组件库", + "package": "@alifd/next", + "version": "1.23.0", + "urls": [ + "https://g.alicdn.com/code/lib/alifd__next/1.23.18/next.min.css", + "https://g.alicdn.com/code/lib/alifd__next/1.23.18/next-with-locales.min.js" + ], + "library": "Next" + }, + { + "title": "NextTable", + "package": "NextTable", + "version": "1.0.1", + "urls": [ + "https://g.alicdn.com/fusion-platform/pro-table/1.0.1/next-table.js", + "https://g.alicdn.com/fusion-platform/pro-table/1.0.1/next-table.css" + ], + "library": "NextTable" + }, + { + "title": "AliLowCodeComponents", + "package": "@alifd/ali-lowcode-components", + "version": "latest", + "urls": [ + "https://gw.alipayobjects.com/os/lib/alifd/ali-lowcode-components/0.1.4/dist/ali-lowcode-components.js", + "https://gw.alipayobjects.com/os/lib/alifd/ali-lowcode-components/0.1.4/dist/ali-lowcode-components.css" + ], + "library": "AliLowCodeComponents" + }, + { + "title": "BizCharts", + "package": "bizcharts", + "version": "4.1.11", + "urls": ["https://g.alicdn.com/code/lib/bizcharts/4.1.11/BizCharts.min.js"], + "library": "BizCharts" + }, + { + "title": "Container", + "package": "@alife/container", + "version": "0.3.7", + "urls": [ + "https://g.alicdn.com/fusion-design/auto-layout/0.3.7/dist/container.css", + "https://g.alicdn.com/fusion-design/auto-layout/0.3.7/dist/container.js" + ], + "library": "Container" + } + ], + "components": [ + { + "componentName": "Link", + "title": "链接", + "npm": { + "package": "@alifd/ali-lowcode-components", + "version": "latest", + "exportName": "Link", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "href", + "title": { + "label": { + "type": "i18n", + "zh_CN": "超链接", + "en_US": "Link" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性：href | 说明：超链接地址", + "en_US": "prop: href | description: link address" + } + }, + "propType": "string", + "defaultValue": "https://fusion.design" + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "链接文案", + "en_US": "Text" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性：children | 说明：超链接文案", + "en_US": "prop: children | description: text of the link" + } + }, + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "defaultValue": "这是一个超链接" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "target", + "title": { + "label": { + "type": "i18n", + "zh_CN": "页面目标", + "en_US": "Target" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性：target | 说明：跳转页面目标", + "en_US": "prop: target | description: target of new page" + } + }, + "propType": { + "type": "oneOf", + "value": ["_blank", "_self"] + } + } + ], + "configure": { + "supports": { + "style": true, + "events": ["onClick"] + }, + "component": { + "isContainer": true + }, + "props": [ + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "链接文案", + "en_US": "Text" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性：children | 说明：超链接文案", + "en_US": "prop: children | description: text of the link" + } + }, + "setter": "StringSetter", + "defaultValue": "这是一个超链接" + }, + { + "name": "linkType", + "title": "跳转类型", + "condition": { + "type": "JSFunction", + "value": "condition(target) {\n const _pages_ = target.getProps().getPropValue(\"_pages_\");\n console.log('_pages_: ', _pages_);\n return !!_pages_;\n }" + }, + "defaultValue": "page", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "value": "page", + "title": "内部页面" + }, + { + "value": "link", + "title": "外部链接" + } + ] + } + } + }, + { + "name": "_redirect_url", + "title": "跳转页面", + "extraProps": { + "getValue": { + "type": "JSFunction", + "value": "(target, value) => {\n return target.getProps().getPropValue('href');\n }" + }, + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n return target.getProps().setPropValue('href', value);\n }" + } + }, + "setter": { + "type": "JSFunction", + "value": "(target) => {\n const data = ((target.getProps().getPropValue('_pages_') || {}).content || []).map(item => {\n return {\n title: item.title.zh_CN,\n value: `#/${item.relateUuid}`,\n };\n });\n return {\n componentName: 'SelectSetter',\n props: {\n options: data\n },\n };\n }" + }, + "condition": { + "type": "JSFunction", + "value": "condition(target) {\n return target.getProps().getPropValue(\"linkType\") === 'page';\n }" + } + }, + { + "name": "href", + "title": { + "label": { + "type": "i18n", + "zh_CN": "跳转链接", + "en_US": "Link" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性：href | 说明：超链接地址", + "en_US": "prop: href | description: link address" + } + }, + "setter": "StringSetter", + "condition": { + "type": "JSFunction", + "value": "condition(target) {\n return target.getProps().getPropValue(\"linkType\") === 'link';\n }" + } + }, + { + "name": "target", + "title": { + "label": { + "type": "i18n", + "zh_CN": "页面目标", + "en_US": "Target" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性：target | 说明：跳转页面目标", + "en_US": "prop: target | description: target of new page" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "value": "_self", + "title": "当前页面" + }, + { + "value": "_blank", + "title": "新开页面" + } + ] + } + } + }, + { + "name": "_pages_", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + } + ] + }, + "experimental": { + "initials": [ + { + "name": "linkType", + "initial": { + "type": "JSFunction", + "value": "() => 'link'" + } + }, + { + "name": "_pages_", + "initial": { + "type": "JSFunction", + "value": "(target) => {\n let url = `/uipass/query/formnav/getFormNavigationListByOrder.json${window.location.search}`\n if (['localhost', '127.0.0.1', 'a7343369-3834-4e55-9f69-e071f489f979-3333.cloud-ide-router.alibaba-inc.com'].includes(window.location.hostname)) {\n url = 'mock-pages.json';\n }\n (AliLowCodeEngine || VisualEngine).editor.utils.get(url)\n .then((response) => {\n target.getProps().setPropValue('_pages_', response);\n });\n }" + } + } + ], + "filters": [], + "autoruns": [] + }, + "icon": "", + "category": "常用" + }, + { + "componentName": "Message", + "title": "提示", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Message", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "title", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标题", + "en_US": "Title" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: title | 说明: 标题", + "en_US": "prop: title | description: Title" + } + }, + "propType": "string", + "description": "标题", + "defaultValue": "标题" + }, + { + "name": "type", + "title": { + "label": { + "type": "i18n", + "zh_CN": "类型", + "en_US": "Type" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: type | 说明: 反馈类型", + "en_US": "prop: type | description: message type" + } + }, + "propType": { + "type": "oneOf", + "value": ["success", "warning", "error", "notice", "help", "loading"] + }, + "description": "反馈类型", + "defaultValue": "success" + }, + { + "name": "shape", + "title": { + "label": { + "type": "i18n", + "zh_CN": "形状", + "en_US": "Shape" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: shape | 说明: 外观", + "en_US": "prop: shape | description: message shape" + } + }, + "propType": { + "type": "oneOf", + "value": ["inline", "addon", "toast"] + }, + "description": "外观", + "defaultValue": "inline" + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 尺寸", + "en_US": "prop: size | description: message size" + } + }, + "propType": { + "type": "oneOf", + "value": ["medium", "large"] + }, + "description": "尺寸", + "defaultValue": "medium" + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文本", + "en_US": "Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: children | 说明: 文本内容", + "en_US": "prop: children | description: message content" + } + }, + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "description": "内容" + }, + { + "name": "visible", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否显示", + "en_US": "Visible" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: visible | 说明: 当前是否显示", + "en_US": "prop: visible | description: visible" + } + }, + "propType": "bool", + "description": "当前是否显示" + }, + { + "name": "iconType", + "propType": "string", + "description": "显示的图标类型，会覆盖内部设置的IconType" + }, + { + "name": "closeable", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示 Close", + "en_US": "Show Close" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: closeable | 说明: 显示关闭按钮", + "en_US": "prop: closeable | description: show close button" + } + }, + "propType": "bool", + "description": "显示关闭按钮", + "defaultValue": false + }, + { + "name": "onClose", + "propType": "func", + "description": "关闭按钮的回调" + }, + { + "name": "afterClose", + "propType": "func", + "description": "关闭之后调用的函数" + }, + { + "name": "animation", + "title": { + "label": { + "type": "i18n", + "zh_CN": "开启动效", + "en_US": "Animation" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: animation | 说明: 是否开启动效", + "en_US": "prop: animation | description: enable animation" + } + }, + "propType": "bool", + "description": "收起动画", + "defaultValue": true + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "iconType", + "title": { + "label": { + "type": "i18n", + "zh_CN": "图标", + "en_US": "Icon" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: iconType | 说明: 显示的图标类型", + "en_US": "prop: iconType | description: icon type" + } + }, + "setter": { + "componentName": "IconSetter" + } + } + ] + } + }, + "icon": "", + "category": "反馈" + }, + { + "componentName": "Avatar", + "title": "头像", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Avatar", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文本内容", + "en_US": "Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: children | 说明: 文本内容", + "en_US": "prop: children | description: avatar content" + } + }, + "propType": "string" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "头像尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 头像的大小", + "en_US": "prop: size | description: avatar size" + } + }, + "propType": { + "type": "oneOfType", + "value": [ + { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "number" + ] + }, + "description": "头像的大小", + "defaultValue": "medium" + }, + { + "name": "shape", + "title": { + "label": { + "type": "i18n", + "zh_CN": "头像形状", + "en_US": "Shape" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: shape | 说明: 头像的形状", + "en_US": "prop: shape | description: avatar shape" + } + }, + "propType": { + "type": "oneOf", + "value": ["circle", "square"] + }, + "description": "头像的形状", + "defaultValue": "circle" + }, + { + "name": "icon", + "title": "icon", + "propType": "string", + "description": "icon 类头像的图标类型，可设为 Icon 的 `type` 或 `ReactNode`" + }, + { + "name": "src", + "title": { + "label": { + "type": "i18n", + "zh_CN": "头像地址", + "en_US": "Src" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: src | 说明: 图片类头像的资源地址", + "en_US": "prop: src | description: resource address" + } + }, + "propType": "string", + "description": "图片类头像的资源地址" + }, + { + "name": "onError", + "propType": "func", + "description": "图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "icon", + "title": { + "label": { + "type": "i18n", + "zh_CN": "图标", + "en_US": "Icon" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: icon | 说明: 图标类型", + "en_US": "prop: icon | description: icon type" + } + }, + "setter": { + "componentName": "IconSetter" + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Badge", + "title": "徽标数", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Badge", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "count", + "title": "count", + "propType": "string", + "description": "展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为 0 时默认隐藏", + "defaultValue": 0 + }, + { + "name": "content", + "title": "内容", + "propType": "node", + "description": "自定义节点内容" + }, + { + "name": "overflowCount", + "title": "封顶数字", + "propType": { + "type": "oneOfType", + "value": ["number", "string"] + }, + "description": "展示的封顶的数字", + "defaultValue": 99 + }, + { + "name": "showZero", + "title": { + "label": "展示零", + "tip": "showZero|当count为 0 时，是否显示 count" + }, + "propType": "bool", + "description": "当count为 0 时，是否显示 count", + "defaultValue": true + }, + { + "name": "dot", + "title": { + "label": "红点", + "tip": "dot|不展示数字，只展示一个小红点" + }, + "propType": "bool", + "description": "不展示数字，只展示一个小红点", + "defaultValue": false + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "count", + "title": { + "label": "展示的数字", + "tip": "count|大于 overflowCount 时显示为 ${overflowCount}+，为 0 时默认隐藏", + "docUrl": "https://fusion.alibaba-inc.com/pc/component/basic/badge" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "BalloonInner", + "title": "BalloonInner", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Balloon", + "main": "", + "destructuring": true, + "subName": "Inner" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "closable", + "propType": "bool", + "defaultValue": true + }, + { + "name": "children", + "propType": "any" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "alignEdge", + "propType": "bool", + "defaultValue": false + }, + { + "name": "onClose", + "propType": "func" + }, + { + "name": "style", + "propType": "any" + }, + { + "name": "align", + "propType": "string", + "defaultValue": "b" + }, + { + "name": "type", + "propType": "string", + "defaultValue": "normal" + }, + { + "name": "isTooltip", + "propType": "bool" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "pure", + "propType": "bool", + "defaultValue": false + } + ], + "configure": { + "component": { + "isContainer": true + } + }, + "category": "基础" + }, + { + "componentName": "Balloon.Tooltip", + "title": "文字提示", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Balloon", + "main": "", + "destructuring": true, + "subName": "Tooltip" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "pure", + "propType": "bool", + "defaultValue": false + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "children", + "title": "提示文案", + "propType": "string" + }, + { + "name": "type", + "propType": { + "type": "oneOf", + "value": ["normal", "primary"] + }, + "description": "样式类型", + "defaultValue": "normal" + }, + { + "name": "triggerType", + "title": "触发行为", + "propType": { + "type": "oneOf", + "value": ["hover", "click"] + }, + "description": "触发行为\n鼠标悬浮, 鼠标点击('hover','click')或者它们组成的数组，如 ['hover', 'click'], 强烈不建议使用'focus'，若弹窗内容有复杂交互请使用click", + "defaultValue": "hover" + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层当前显示的状态" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层在显示和隐藏触发的事件\n@param {Boolean} visible 弹层是否隐藏和显示\n@param {String} type 触发弹层显示或隐藏的来源， closeClick 表示由自带的关闭按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "align", + "title": "弹出位置", + "propType": { + "type": "oneOf", + "value": ["t", "r", "b", "l", "tl", "tr", "bl", "br", "lt", "lb", "rt", "rb"] + }, + "description": "弹出层位置\n@enumdesc 上, 右, 下, 左, 上左, 上右, 下左, 下右, 左上, 左下, 右上, 右下 及其 两两组合", + "defaultValue": "b" + }, + { + "name": "offset", + "propType": { + "type": "arrayOf", + "value": "number" + }, + "description": "弹层相对于trigger的定位的微调, 接收数组[hoz, ver], 表示弹层在 left / top 上的增量\ne.g. [100, 100] 表示往右(RTL 模式下是往左) 、下分布偏移100px", + "defaultValue": [0, 0] + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + }, + { + "name": "delay", + "title": "延迟显示", + "propType": "number", + "description": "弹层在触发以后的延时显示, 单位毫秒 ms" + }, + { + "name": "trigger", + "propType": "node", + "description": "触发元素" + }, + { + "name": "onClick", + "propType": "func" + }, + { + "name": "onClose", + "propType": "func", + "description": "任何visible为false时会触发的事件" + }, + { + "name": "onHover", + "propType": "func" + }, + { + "name": "defaultVisible", + "title": "默认显示", + "propType": "bool", + "description": "弹层默认显示的状态", + "defaultValue": false + }, + { + "name": "alignEdge", + "title": "边缘对齐", + "propType": "bool", + "description": "弹出层对齐方式, 是否为边缘对齐", + "defaultValue": false + }, + { + "name": "closable", + "title": "关闭按钮", + "propType": "bool", + "description": "是否显示关闭按钮", + "defaultValue": true + }, + { + "name": "needAdjust", + "title": "自动调整", + "propType": "bool", + "description": "是否进行自动位置调整", + "defaultValue": false + }, + { + "name": "afterClose", + "propType": "func", + "description": "浮层关闭后触发的事件, 如果有动画，则在动画结束后触发" + }, + { + "name": "shouldUpdatePosition", + "propType": "bool", + "description": "强制更新定位信息" + }, + { + "name": "autoFocus", + "title": "自动聚焦", + "propType": "bool", + "description": "弹层出现后是否自动focus到内部第一个元素", + "defaultValue": true + }, + { + "name": "followTrigger", + "title": "跟随滚动", + "propType": "bool", + "description": "是否跟随滚动" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "rtl", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "pure", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "visible", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "offset", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "shouldUpdatePosition", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupContainer", + "title": { + "docUrl": "https://fusion.alibaba-inc.com/pc/component/basic/balloon#demo-api", + "label": "弹层容器", + "tip": "指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数()。" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "FunctionSetter"] + } + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Balloon", + "title": "气泡框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Balloon", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "pure", + "propType": "bool", + "defaultValue": false + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "type", + "propType": { + "type": "oneOf", + "value": ["normal", "primary"] + }, + "description": "样式类型", + "defaultValue": "normal" + }, + { + "name": "triggerType", + "title": "触发行为", + "propType": { + "type": "oneOf", + "value": ["hover", "click"] + }, + "description": "触发行为\n鼠标悬浮, 鼠标点击('hover','click')或者它们组成的数组，如 ['hover', 'click'], 强烈不建议使用'focus'，若弹窗内容有复杂交互请使用click", + "defaultValue": "hover" + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层当前显示的状态" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层在显示和隐藏触发的事件\n@param {Boolean} visible 弹层是否隐藏和显示\n@param {String} type 触发弹层显示或隐藏的来源， closeClick 表示由自带的关闭按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "align", + "title": "弹出位置", + "propType": { + "type": "oneOf", + "value": ["t", "r", "b", "l", "tl", "tr", "bl", "br", "lt", "lb", "rt", "rb"] + }, + "description": "弹出层位置\n@enumdesc 上, 右, 下, 左, 上左, 上右, 下左, 下右, 左上, 左下, 右上, 右下 及其 两两组合", + "defaultValue": "b" + }, + { + "name": "offset", + "propType": { + "type": "arrayOf", + "value": "number" + }, + "description": "弹层相对于trigger的定位的微调, 接收数组[hoz, ver], 表示弹层在 left / top 上的增量\ne.g. [100, 100] 表示往右(RTL 模式下是往左) 、下分布偏移100px", + "defaultValue": [0, 0] + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + }, + { + "name": "delay", + "title": "延迟显示", + "propType": "number", + "description": "弹层在触发以后的延时显示, 单位毫秒 ms" + }, + { + "name": "trigger", + "propType": "node", + "description": "触发元素" + }, + { + "name": "onClick", + "propType": "func" + }, + { + "name": "onClose", + "propType": "func", + "description": "任何visible为false时会触发的事件" + }, + { + "name": "onHover", + "propType": "func" + }, + { + "name": "defaultVisible", + "title": "默认显示", + "propType": "bool", + "description": "弹层默认显示的状态", + "defaultValue": false + }, + { + "name": "alignEdge", + "title": "边缘对齐", + "propType": "bool", + "description": "弹出层对齐方式, 是否为边缘对齐", + "defaultValue": false + }, + { + "name": "closable", + "title": "关闭按钮", + "propType": "bool", + "description": "是否显示关闭按钮", + "defaultValue": true + }, + { + "name": "needAdjust", + "title": "自动调整", + "propType": "bool", + "description": "是否进行自动位置调整", + "defaultValue": false + }, + { + "name": "afterClose", + "propType": "func", + "description": "浮层关闭后触发的事件, 如果有动画，则在动画结束后触发" + }, + { + "name": "shouldUpdatePosition", + "propType": "bool", + "description": "强制更新定位信息" + }, + { + "name": "autoFocus", + "title": "自动聚焦", + "propType": "bool", + "description": "弹层出现后是否自动focus到内部第一个元素", + "defaultValue": true + }, + { + "name": "followTrigger", + "title": "跟随滚动", + "propType": "bool", + "description": "是否跟随滚动" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "rtl", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "pure", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "visible", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "offset", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "shouldUpdatePosition", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupContainer", + "title": { + "docUrl": "https://fusion.alibaba-inc.com/pc/component/basic/balloon#demo-api", + "label": "弹层容器", + "tip": "指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数()。" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "FunctionSetter"] + } + } + } + ] + } + }, + "icon": "", + "category": "容器" + }, + { + "componentName": "Box", + "title": "容器", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Box", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "direction", + "title": { + "label": "布局方向", + "tip": "布局方向，默认为 column ，一个元素占据一整行，默认为column" + }, + "propType": { + "type": "oneOf", + "value": ["row", "column"] + }, + "defaultValue": "column" + }, + { + "name": "wrap", + "title": "是否折行", + "propType": "bool", + "description": "是否折行", + "defaultValue": false + }, + { + "name": "justify", + "title": { + "label": "沿主轴排布关系", + "tip": "justify | 沿着主轴方向，子元素们的排布关系 （兼容性同 justify-content ）" + }, + "propType": { + "type": "oneOf", + "value": ["flex-start", "center", "flex-end", "space-between", "space-around"] + } + }, + { + "name": "align", + "title": { + "label": "垂直主轴排布关系", + "tip": "align | 垂直主轴方向，子元素们的排布关系 （兼容性同 align-items ）" + }, + "propType": { + "type": "oneOf", + "value": ["flex-start", "center", "flex-end", "baseline", "stretch"] + } + }, + { + "name": "spacing", + "title": { + "label": "元素间距", + "tip": "元素之间的间距 [bottom&top, right&left]" + }, + "propType": { + "type": "oneOfType", + "value": [ + "number", + { + "type": "arrayOf", + "value": "number" + } + ] + } + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "id", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + } + ] + } + }, + "icon": "", + "category": "容器" + }, + { + "componentName": "Breadcrumb.Item", + "title": "面包屑 Item", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Breadcrumb", + "main": "", + "destructuring": true, + "subName": "Item" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "children", + "description": "内容", + "propType": "string" + }, + { + "name": "link", + "propType": "string", + "description": "面包屑节点链接，如果设置这个属性，则该节点为`` ，否则是``" + }, + { + "name": "activated", + "propType": "bool" + }, + { + "name": "separator", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "className", + "propType": "any" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": [ + { + "name": "children", + "title": "文本内容", + "setter": "StringSetter" + } + ] + }, + "icon": "", + "category": "导航" + }, + { + "componentName": "Breadcrumb", + "title": "面包屑", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Breadcrumb", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "description": "样式类名的品牌前缀", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "面包屑子节点，需传入 Breadcrumb.Item" + }, + { + "name": "maxNode", + "propType": { + "type": "oneOfType", + "value": [ + "number", + { + "type": "oneOf", + "value": ["auto"] + } + ] + }, + "description": "面包屑最多显示个数，超出部分会被隐藏, 设置为 auto 会自动根据父元素的宽度适配。", + "defaultValue": 100 + }, + { + "name": "separator", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "分隔符，可以是文本或 Icon" + }, + { + "name": "component", + "propType": { + "type": "oneOfType", + "value": ["string", "func"] + }, + "description": "设置标签类型", + "defaultValue": "nav" + }, + { + "name": "className", + "propType": "any" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "childWhitelist": ["Breadcrumb.Item"] + } + }, + "props": [ + { + "name": "maxNode", + "title": { + "label": "最大节点数", + "tip": "默认 100" + }, + "setter": "NumberSetter" + }, + { + "name": "separator", + "title": "分隔符", + "setter": "StringSetter" + }, + { + "name": "Breadcrumb.Item", + "title": "面包屑项", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "primaryKey", + "title": "面包屑项编号", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "initialValue": { + "type": "JSFunction", + "value": "val => {\n if (val) return val;\n return String(Math.floor(Math.random() * 10000));\n }" + }, + "setter": "StringSetter" + }, + { + "name": "children", + "title": "标题", + "initialValue": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "setter": "StringSetter" + }, + { + "name": "link", + "title": "链接", + "initialValue": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "setter": "StringSetter" + }, + { + "name": "target", + "title": "打开方式", + "initialValue": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "_self", + "props": { + "options": [ + { + "title": "新开页面", + "value": "_blank" + }, + { + "title": "当前页面", + "value": "_self" + } + ] + } + } + } + ] + } + }, + "initialValue": { + "type": "JSFunction", + "value": "() => {\n return {\n primaryKey: String(Math.floor(Math.random() * 10000)),\n children: \"Title\",\n target: \"_self\"\n };\n }" + } + } + } + }, + "extraProps": { + "virtual": { + "type": "JSFunction", + "value": "() => true" + }, + "getValue": { + "type": "JSFunction", + "value": "(target, value) => {\n console.log(\"getValue: \", target, value);\n return target.getNode().children.map(child => {\n return {\n primaryKey: String(child.getPropValue(\"primaryKey\")),\n children: child.getPropValue(\"children\"),\n link: child.getPropValue(\"link\"),\n target: child.getPropValue(\"target\")\n };\n });\n }" + }, + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n console.log(\"setValue: \", target, value);\n const node = target.getNode();\n const map = {};\n if (!Array.isArray(value)) {\n value = [];\n }\n value.forEach(item => {\n const BreadcrumbItem = Object.assign({}, item);\n map[item.primaryKey] = BreadcrumbItem;\n });\n node.children.mergeChildren(\n child => {\n const primaryKey = String(child.getPropValue(\"primaryKey\"));\n console.log(child.id + \"----\" + primaryKey);\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n child.setPropValue(\"children\", map[primaryKey].children);\n child.setPropValue(\"link\", map[primaryKey].link);\n child.setPropValue(\"target\", map[primaryKey].target);\n delete map[primaryKey];\n return false;\n }\n return true;\n },\n () => {\n const items = [];\n for (const primaryKey in map) {\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n items.push({\n componentName: \"Breadcrumb.Item\",\n props: map[primaryKey]\n });\n }\n }\n console.log(\"adder: \", items);\n return items;\n },\n (child1, child2) => {\n const a = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child1.getPropValue(\"primaryKey\"))\n );\n const b = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child2.getPropValue(\"primaryKey\"))\n );\n console.log(\"a: \", a);\n console.log(\"b: \", b);\n return a - b;\n }\n );\n }" + }, + "onChange": { + "type": "JSFunction", + "value": "() => {\n console.log(\"onChange: \", arguments);\n }" + } + } + } + ], + "supports": { + "style": true + } + }, + "icon": "", + "category": "导航" + }, + { + "componentName": "Button.Group", + "title": "按钮组", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Button", + "main": "", + "destructuring": true, + "subName": "Group" + }, + "props": [ + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "size", + "propType": "string", + "description": "统一设置 Button 组件的按钮大小", + "defaultValue": "medium" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "childWhitelist": ["Button"] + } + }, + "props": [ + { + "name": "size", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "统一设置子按钮的尺寸", + "en_US": "Button Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 统一设置子按钮的尺寸", + "en_US": "prop: size | description: button size" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "defaultValue": "medium" + } + ] + }, + "icon": "", + "category": "常用" + }, + { + "componentName": "Button", + "title": "按钮", + "icon": "https://img.alicdn.com/tfs/TB1rT0gPQL0gK0jSZFAXXcA9pXa-200-200.svg", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Button", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "children", + "title": "内容", + "propType": "string" + }, + { + "name": "icon", + "propType": "string", + "description": "自定义内联样式" + }, + { + "name": "type", + "title": { + "label": { + "type": "i18n", + "zh_CN": "按钮类型", + "en_US": "Button Type" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: type | 说明: 按钮类型", + "en_US": "prop: type | description: button type" + } + }, + "propType": { + "type": "oneOf", + "value": ["primary", "secondary", "normal"] + }, + "description": "按钮的类型", + "defaultValue": "normal" + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "按钮尺寸", + "en_US": "Button Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 按钮尺寸", + "en_US": "prop: size | description: button size" + } + }, + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "按钮的尺寸", + "defaultValue": "medium" + }, + { + "name": "iconSize", + "title": { + "label": { + "type": "i18n", + "zh_CN": "图标尺寸", + "en_US": "Icon Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: iconSize | 说明: 图标尺寸", + "en_US": "prop: iconSize | description: icon size" + } + }, + "propType": { + "type": "oneOf", + "value": ["xxs", "xs", "small", "medium", "large", "xl", "xxl", "xxxl"] + }, + "defaultValue": "small", + "description": "按钮中 Icon 的尺寸，用于替代 Icon 的默认大小" + }, + { + "name": "ghost", + "title": { + "type": "i18n", + "zh_CN": "幽灵按钮", + "en_US": "ghost" + }, + "propType": { + "type": "oneOf", + "value": [true, false, "light", "dark"] + }, + "description": "是否为幽灵按钮", + "defaultValue": false + }, + { + "name": "loading", + "title": "loading", + "propType": "bool", + "description": "设置按钮的载入状态", + "defaultValue": false + }, + { + "name": "text", + "title": { + "type": "i18n", + "zh_CN": "文本按钮", + "en_US": "text" + }, + "propType": "bool", + "description": "是否为文本按钮", + "defaultValue": false + }, + { + "name": "warning", + "title": "warning", + "propType": "bool", + "description": "是否为警告按钮", + "defaultValue": false + }, + { + "name": "disabled", + "title": { + "type": "i18n", + "zh_CN": "禁用", + "en_US": "disabled" + }, + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "onClick", + "title": "onClick", + "propType": "func", + "description": "点击按钮的回调\n@param {Object} e Event Object" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "onMouseUp", + "propType": "func" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "icon", + "title": { + "label": { + "type": "i18n", + "zh_CN": "图标", + "en_US": "Icon" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: icon | 说明: 图标类型", + "en_US": "prop: icon | description: icon type" + } + }, + "setter": "IconSetter", + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n target.nodes[0].children.import(value && {\"componentName\": \"Icon\", \"props\": {\"type\": value, \"style\": {\"marginRight\": 5}}}, true);\n }" + } + }, + { + "name": "ghost", + "title": { + "type": "i18n", + "zh_CN": "幽灵按钮", + "en_US": "ghost" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "True", + "value": true + }, + { + "title": "False", + "value": false + }, + { + "title": "Light", + "value": "light" + }, + { + "title": "Dark", + "value": "dark" + } + ] + } + }, + "description": "是否为幽灵按钮", + "defaultValue": false + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "按钮内容", + "en_US": "Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: children | 说明: 按钮文本", + "en_US": "prop: children | description: button content" + } + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + } + } + ] + } + }, + "category": "常用" + }, + { + "componentName": "Calendar", + "title": "日历", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Calendar", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "defaultValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "默认选中的日期（moment 对象）" + }, + { + "name": "value", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "选中的日期值 (moment 对象)" + }, + { + "name": "modes", + "propType": { + "type": "instanceOf", + "value": "array" + } + }, + { + "name": "disableChangeMode", + "propType": "bool", + "defaultValue": false + }, + { + "name": "format", + "propType": "string", + "defaultValue": "YYYY-MM-DD" + }, + { + "name": "showOtherMonth", + "propType": "bool", + "description": "是否展示非本月的日期", + "defaultValue": true + }, + { + "name": "defaultVisibleMonth", + "propType": "func", + "description": "默认展示的月份" + }, + { + "name": "shape", + "propType": { + "type": "oneOf", + "value": ["card", "fullscreen", "panel"] + }, + "description": "展现形态", + "defaultValue": "fullscreen" + }, + { + "name": "onSelect", + "propType": "func", + "description": "选择日期单元格时的回调\n@param {Object} value 对应的日期值 (moment 对象)" + }, + { + "name": "onModeChange", + "propType": "func", + "description": "面板模式变化时的回调\n@param {String} mode 对应面板模式 date month year" + }, + { + "name": "onVisibleMonthChange", + "propType": "func", + "description": "展现的月份变化时的回调\n@param {Object} value 显示的月份 (moment 对象)\n@param {String} reason 触发月份改变原因" + }, + { + "name": "className", + "propType": "string", + "description": "自定义样式类" + }, + { + "name": "dateCellRender", + "propType": "func", + "description": "自定义日期渲染函数\n@param {Object} value 日期值（moment对象）\n@returns {ReactNode}" + }, + { + "name": "monthCellRender", + "propType": "func", + "description": "自定义月份渲染函数\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@returns {ReactNode}" + }, + { + "name": "yearCellRender", + "propType": "func" + }, + { + "name": "disabledDate", + "propType": "func", + "description": "不可选择的日期\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\n@returns {Boolean}" + }, + { + "name": "locale", + "propType": "object", + "description": "国际化配置" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": [ + { + "name": "shape", + "title": "展现形态", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["card", "fullscreen", "panel"] + } + } + }, + { + "name": "showOtherMonth", + "display": "block", + "title": "展示非本月日期", + "setter": { + "componentName": "BoolSetter" + } + } + ] + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "CardActions", + "title": "CardActions", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Card", + "main": "", + "destructuring": true, + "subName": "Actions" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "component", + "propType": { + "type": "instanceOf", + "value": "elementType" + }, + "description": "设置标签类型", + "defaultValue": "div" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "CardBulletHeader", + "title": "CardBulletHeader", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Card", + "main": "", + "destructuring": true, + "subName": "BulletHeader" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "title", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "卡片的标题" + }, + { + "name": "subTitle", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "卡片的副标题" + }, + { + "name": "showTitleBullet", + "propType": "bool", + "description": "是否显示标题的项目符号", + "defaultValue": true + }, + { + "name": "extra", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "标题区域的用户自定义内容" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "CardCollaspeContent", + "title": "CardCollaspeContent", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Card", + "main": "", + "destructuring": true, + "subName": "CollaspeContent" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "contentHeight", + "propType": { + "type": "oneOfType", + "value": ["string", "number"] + }, + "description": "内容区域的固定高度", + "defaultValue": 120 + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "CardContent", + "title": "CardContent", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Card", + "main": "", + "destructuring": true, + "subName": "Content" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "component", + "propType": { + "type": "instanceOf", + "value": "elementType" + }, + "description": "设置标签类型", + "defaultValue": "div" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "CardDivider", + "title": "CardDivider", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Card", + "main": "", + "destructuring": true, + "subName": "Divider" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "component", + "propType": { + "type": "instanceOf", + "value": "elementType" + }, + "description": "设置标签类型", + "defaultValue": "hr" + }, + { + "name": "inset", + "propType": "bool", + "description": "分割线是否向内缩进" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "CardHeader", + "title": "CardHeader", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Card", + "main": "", + "destructuring": true, + "subName": "Header" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "title", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "卡片的标题" + }, + { + "name": "subTitle", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "卡片的副标题" + }, + { + "name": "extra", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "标题区域的用户自定义内容" + }, + { + "name": "component", + "propType": { + "type": "instanceOf", + "value": "elementType" + }, + "description": "设置标签类型", + "defaultValue": "div" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "CardMedia", + "title": "CardMedia", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Card", + "main": "", + "destructuring": true, + "subName": "Media" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "component", + "propType": { + "type": "instanceOf", + "value": "elementType" + }, + "description": "设置标签类型", + "defaultValue": "div" + }, + { + "name": "image", + "propType": "string", + "description": "背景图片地址" + }, + { + "name": "src", + "propType": "string", + "description": "媒体源文件地址" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "className", + "propType": "string" + } + ], + "category": "基础" + }, + { + "componentName": "Card", + "title": "卡片", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Card", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "showTitleBullet", + "title": "标题符号", + "propType": "bool", + "description": "标题的项目符号", + "defaultValue": true + }, + { + "name": "showHeadDivider", + "title": "分割线", + "propType": "bool", + "description": "头部分隔线", + "defaultValue": true + }, + { + "name": "title", + "propType": { + "type": "oneOfType", + "value": ["node", "string"] + }, + "description": "标题" + }, + { + "name": "subTitle", + "propType": { + "type": "oneOfType", + "value": ["node", "string"] + }, + "description": "副标题" + }, + { + "name": "extra", + "title": { + "label": "自定义内容", + "tip": "标题栏用户自定义内容" + }, + "propType": { + "type": "oneOfType", + "value": ["node", "string"] + }, + "description": "标题栏用户自定义内容" + }, + { + "name": "contentHeight", + "title": "内容高度", + "propType": { + "type": "oneOfType", + "value": ["string", "number"] + }, + "description": "内容区域的固定高度", + "defaultValue": 120 + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "rtl", + "propType": "bool", + "description": "文本方向是从右向左" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "id", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "rtl", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + } + ] + } + }, + "icon": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_card.png", + "category": "内容" + }, + { + "componentName": "CascaderSelect", + "title": "级联选择器", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "CascaderSelect", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "label", + "title": { + "label": "label", + "tip": "自定义内联 label" + }, + "propType": "string", + "description": "自定义内联 label" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "大小", + "defaultValue": "medium" + }, + { + "name": "placeholder", + "propType": "string", + "description": "占位符" + }, + { + "name": "dataSource", + "propType": { + "type": "arrayOf", + "value": "object" + } + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "hasArrow", + "propType": "bool", + "description": "下拉箭头", + "defaultValue": true + }, + { + "name": "hasBorder", + "propType": "bool", + "description": "边框", + "defaultValue": true + }, + { + "name": "hasClear", + "propType": "bool", + "description": "清除按钮", + "defaultValue": false + }, + { + "name": "notFoundContent", + "title": { + "label": "无数据时显示内容", + "tip": "notFoundContent" + }, + "propType": { + "type": "oneOfType", + "value": ["node", "string"] + }, + "description": "无数据时显示内容", + "defaultValue": "Not Found" + }, + { + "name": "loadData", + "propType": "func", + "description": "异步加载数据函数\n@param {Object} data 当前点击异步加载的数据" + }, + { + "name": "header", + "propType": "node", + "description": "自定义下拉框头部" + }, + { + "name": "footer", + "propType": "node", + "description": "自定义下拉框底部" + }, + { + "name": "defaultVisible", + "title": { + "label": "初始下拉框是否显示", + "tip": "defaultVisible" + }, + "propType": "bool", + "description": "初始下拉框是否显示", + "defaultValue": false + }, + { + "name": "visible", + "title": { + "label": "当前下拉框是否显示", + "tip": "visible" + }, + "propType": "bool", + "description": "当前下拉框是否显示" + }, + { + "name": "readOnly", + "propType": "bool", + "description": "是否只读" + }, + { + "name": "onChange", + "propType": "func", + "description": "选中值改变时触发的回调函数\n@param {String|Array} value 选中的值，单选时返回单个值，多选时返回数组\n@param {Object|Array} data 选中的数据，包括 value 和 label，单选时返回单个值，多选时返回数组，父子节点选中关联时，同时选中，只返回父节点\n@param {Object} extra 额外参数\n@param {Array} extra.selectedPath 单选时选中的数据的路径\n@param {Boolean} extra.checked 多选时当前的操作是选中还是取消选中\n@param {Object} extra.currentData 多选时当前操作的数据\n@param {Array} extra.checkedData 多选时所有被选中的数据\n@param {Array} extra.indeterminateData 多选时半选的数据" + }, + { + "name": "expandTriggerType", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "展开触发方式", + "defaultValue": "click" + }, + { + "name": "onExpand", + "propType": "func" + }, + { + "name": "useVirtual", + "propType": "bool", + "description": "虚拟滚动", + "defaultValue": false + }, + { + "name": "multiple", + "propType": "bool", + "description": "是否多选", + "defaultValue": false + }, + { + "name": "changeOnSelect", + "title": { + "label": "选中即改变", + "tip": "changeOnSelect|是否选中即发生改变, 该属性仅在单选模式下有效" + }, + "propType": "bool", + "description": "是否选中即发生改变, 该属性仅在单选模式下有效", + "defaultValue": false + }, + { + "name": "canOnlyCheckLeaf", + "title": { + "label": "canOnlyCheckLeaf", + "tip": "是否只能勾选叶子项的checkbox，该属性仅在多选模式下有效" + }, + "propType": "bool", + "description": "是否只能勾选叶子项的checkbox，该属性仅在多选模式下有效", + "defaultValue": false + }, + { + "name": "checkStrictly", + "title": { + "label": "checkStrictly", + "tip": "父子节点是否选中不关联" + }, + "propType": "bool", + "description": "父子节点是否选中不关联", + "defaultValue": false + }, + { + "name": "listStyle", + "propType": "object", + "description": "每列列表样式对象" + }, + { + "name": "resultAutoWidth", + "title": { + "label": "resultAutoWidth", + "tip": "搜索结果列表是否和选择框等宽" + }, + "propType": "bool", + "description": "搜索结果列表是否和选择框等宽", + "defaultValue": true + }, + { + "name": "showSearch", + "propType": "bool", + "description": "搜索框", + "defaultValue": false + }, + { + "name": "filter", + "propType": "func", + "description": "自定义搜索函数\n@param {String} searchValue 搜索的关键字\n@param {Array} path 节点路径\n@return {Boolean} 是否匹配\n@default 根据路径所有节点的文本值模糊匹配" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "下拉框显示或关闭时触发事件的回调函数\n@param {Boolean} visible 是否显示\n@param {String} type 触发显示关闭的操作类型, fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "popupStyle", + "propType": "object", + "description": "下拉框自定义样式对象" + }, + { + "name": "popupProps", + "propType": "object", + "description": "透传到 Popup 的属性对象" + }, + { + "name": "followTrigger", + "title": { + "label": "是否跟随滚动", + "tip": "followTrigger" + }, + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "isPreview", + "title": { + "label": "是否为预览态", + "tip": "isPreview" + }, + "propType": "bool", + "description": "是否为预览态" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + } + ], + "configure": { + "supports": { + "style": true, + "events": [ + { + "name": "onChange", + "templete": "templeteTest(e,${extParams}){this.setState({isShowDialog: false})}" + }, + { + "name": "onExpand" + }, + { + "name": "onVisibleChange" + } + ] + }, + "props": [ + { + "name": "label", + "title": { + "label": "内联文案", + "tip": "自定义内联 label" + }, + "setter": "StringSetter" + }, + { + "name": "size", + "title": "尺寸", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "defaultValue": "medium" + }, + { + "name": "placeholder", + "title": "占位提示", + "setter": "StringSetter" + }, + { + "name": "dataSource", + "title": "级联数据", + "setter": "JsonSetter" + }, + { + "name": "disabled", + "setter": "BoolSetter", + "title": "是否禁用", + "defaultValue": false + }, + { + "name": "hasArrow", + "setter": "BoolSetter", + "title": "下拉箭头", + "defaultValue": true + }, + { + "name": "hasBorder", + "setter": "BoolSetter", + "title": "边框", + "defaultValue": true + }, + { + "name": "hasClear", + "setter": "BoolSetter", + "title": "清除按钮", + "defaultValue": false + }, + { + "name": "readOnly", + "setter": "BoolSetter", + "title": "是否只读" + }, + { + "name": "multiple", + "setter": "BoolSetter", + "title": "是否多选", + "defaultValue": false + }, + { + "name": "showSearch", + "setter": "BoolSetter", + "title": "搜索框", + "defaultValue": false + }, + { + "name": "followTrigger", + "title": { + "label": "跟随滚动", + "tip": "followTrigger" + }, + "setter": "BoolSetter", + "description": "是否跟随滚动" + }, + { + "name": "isPreview", + "title": { + "label": "预览态", + "tip": "isPreview" + }, + "setter": "BoolSetter", + "description": "是否为预览态" + }, + { + "name": "expandTriggerType", + "display": "block", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["click", "hover"] + } + }, + "title": "展开触发方式", + "defaultValue": "click" + }, + { + "name": "notFoundContent", + "display": "block", + "title": { + "label": "无数据时显示内容", + "tip": "notFoundContent" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "SlotSetter"] + } + }, + "defaultValue": "Not Found" + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ] + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Cascader", + "title": "级联", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Cascader", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "onChange", + "propType": "func", + "description": "选中值改变时触发的回调函数\n@param {String|Array} value 选中的值，单选时返回单个值，多选时返回数组\n@param {Object|Array} data 选中的数据，包括 value 和 label，单选时返回单个值，多选时返回数组，父子节点选中关联时，同时选中，只返回父节点\n@param {Object} extra 额外参数\n@param {Array} extra.selectedPath 单选时选中的数据的路径\n@param {Boolean} extra.checked 多选时当前的操作是选中还是取消选中\n@param {Object} extra.currentData 多选时当前操作的数据\n@param {Array} extra.checkedData 多选时所有被选中的数据\n@param {Array} extra.indeterminateData 多选时半选的数据" + }, + { + "name": "onSelect", + "propType": "func" + }, + { + "name": "dataSource", + "propType": "array" + }, + { + "name": "expandTriggerType", + "title": { + "label": "触发方式", + "tip": "expandTriggerType | 展开触发的方式" + }, + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "展开触发的方式", + "defaultValue": "click" + }, + { + "name": "onExpand", + "propType": "func", + "description": "展开时触发的回调函数\n@param {Array} expandedValue 各列展开值的数组" + }, + { + "name": "useVirtual", + "title": { + "label": "虚拟滚动", + "tip": "useVirtual | 是否开启虚拟滚动" + }, + "propType": "bool", + "description": "是否开启虚拟滚动", + "defaultValue": false + }, + { + "name": "multiple", + "propType": "bool", + "description": "是否多选", + "defaultValue": false + }, + { + "name": "canOnlySelectLeaf", + "title": { + "label": "单选时是否只能选中叶子节点", + "tip": "canOnlySelectLeaf" + }, + "propType": "bool", + "description": "单选时是否只能选中叶子节点", + "defaultValue": false + }, + { + "name": "canOnlyCheckLeaf", + "title": { + "label": "多选时是否只能选中叶子节点", + "tip": "canOnlyCheckLeaf" + }, + "propType": "bool", + "description": "多选时是否只能选中叶子节点", + "defaultValue": false + }, + { + "name": "checkStrictly", + "title": { + "tip": "checkStrictly", + "label": "父子节点是否选中不关联" + }, + "propType": "bool", + "description": "父子节点是否选中不关联", + "defaultValue": false + }, + { + "name": "listStyle", + "propType": "object", + "description": "每列列表样式对象" + }, + { + "name": "loadData", + "title": { + "label": "loadData", + "tip": "异步加载数据函数\n@param {Object} data 当前点击异步加载的数据\n@param {Object} source 当前点击数据，source是原始对象" + }, + "propType": "func", + "description": "异步加载数据函数\n@param {Object} data 当前点击异步加载的数据\n@param {Object} source 当前点击数据，source是原始对象" + }, + { + "name": "onBlur", + "propType": "func" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "rtl", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "loadData", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "listStyle", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "dataSource", + "title": "级联数据", + "setter": "JsonSetter" + }, + { + "name": "canOnlySelectLeaf", + "display": "block", + "title": { + "label": "单选时是否只能选中叶子节点", + "tip": "canOnlySelectLeaf" + }, + "setter": "BoolSetter", + "defaultValue": false + }, + { + "name": "canOnlyCheckLeaf", + "display": "block", + "title": { + "label": "多选时是否只能选中叶子节点", + "tip": "canOnlyCheckLeaf" + }, + "setter": "BoolSetter", + "defaultValue": false + }, + { + "name": "checkStrictly", + "display": "block", + "title": { + "tip": "checkStrictly", + "label": "父子节点是否选中不关联" + }, + "setter": "BoolSetter", + "defaultValue": false + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "CheckboxGroup", + "title": "复选按钮组", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Checkbox", + "main": "", + "destructuring": true, + "subName": "Group" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "disabled", + "propType": "bool", + "description": "整体禁用" + }, + { + "name": "value", + "propType": { + "type": "oneOfType", + "value": [ + { + "type": "instanceOf", + "value": "array" + }, + "string", + "number" + ] + }, + "description": "被选中的值列表" + }, + { + "name": "defaultValue", + "propType": { + "type": "oneOfType", + "value": [ + { + "type": "instanceOf", + "value": "array" + }, + "string", + "number" + ] + }, + "description": "默认被选中的值列表" + }, + { + "name": "onChange", + "propType": "func", + "description": "选中值改变时的事件\n@param {Array} value 选中项列表\n@param {Event} e Dom 事件对象" + }, + { + "name": "itemDirection", + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "子项目的排列方式\n- hoz: 水平排列 (default)\n- ver: 垂直排列", + "defaultValue": "hoz" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态", + "defaultValue": false + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {number} value 评分值" + } + ], + "configure": { + "props": [ + { + "name": "disabled", + "title": "是否禁用", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + } + }, + { + "name": "itemDirection", + "title": "排列方式", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "水平排列", + "value": "hoz" + }, + { + "title": "垂直排列", + "value": "ver" + } + ] + } + }, + "defaultValue": "hoz" + }, + { + "name": "isPreview", + "title": "预览态", + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "defaultValue", + "title": "默认值", + "defaultValue": "[]", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["JsonSetter", "ExpressionSetter"] + } + } + }, + { + "name": "dataSource", + "display": "block", + "title": "选项", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "label", + "title": "label", + "setter": "StringSetter" + }, + { + "name": "value", + "title": "value", + "setter": "StringSetter" + } + ] + } + }, + "initialValue": { + "label": "选项一", + "value": "1" + } + } + } + }, + "ExpressionSetter" + ] + } + } + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ], + "supports": { + "style": true, + "events": ["onChange"] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "CheckboxItem", + "title": "复选框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Menu", + "main": "", + "destructuring": true, + "subName": "CheckboxItem" + }, + "props": [ + { + "name": "checked", + "propType": "bool", + "description": "是否选中", + "defaultValue": false + }, + { + "name": "indeterminate", + "propType": "bool", + "description": "是否半选中", + "defaultValue": false + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "onChange", + "propType": "func", + "description": "选中或取消选中触发的回调函数\n@param {Boolean} checked 是否选中\n@param {Object} event 选中事件对象" + }, + { + "name": "helper", + "propType": "node", + "description": "帮助文本" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["Menu", "SubMenu", "Menu.Group", "MenuButton"] + } + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Checkbox", + "title": "复选按钮", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Checkbox", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "id", + "propType": "string", + "description": "ID" + }, + { + "name": "name", + "propType": "string", + "description": "name" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "checked", + "propType": "bool", + "description": "选中状态" + }, + { + "name": "defaultChecked", + "propType": "bool", + "description": "默认选中状态", + "defaultValue": false + }, + { + "name": "disabled", + "propType": "bool", + "description": "禁用" + }, + { + "name": "label", + "propType": "string", + "description": "label" + }, + { + "name": "indeterminate", + "propType": "bool", + "description": "中间状态" + }, + { + "name": "defaultIndeterminate", + "propType": "bool", + "description": "默认中间态", + "defaultValue": false + }, + { + "name": "value", + "propType": { + "type": "oneOfType", + "value": ["string"] + }, + "description": "value" + } + ], + "configure": { + "props": [ + { + "name": "label", + "title": "标题", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + } + }, + { + "name": "value", + "title": "Value", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + } + }, + { + "name": "indeterminate", + "title": "半选状态", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + } + }, + { + "name": "disabled", + "title": "是否禁用", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + } + }, + { + "name": "controlChecked", + "display": "block", + "title": { + "label": "外部控制选中", + "tip": "外部控制选中后，选中状态需要开发者自己根据 onChange 回传的值重新设置给组件才能生效" + }, + "setter": "BoolSetter" + }, + { + "name": "checked", + "title": "选中状态", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + }, + "condition": { + "type": "JSFunction", + "value": "condition(target) {\n return target.getProps().getPropValue(\"controlChecked\") || false;\n }" + } + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ], + "supports": { + "style": true, + "events": ["onChange", "onMouseEnter", "onMouseLeave"] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Collapse.Panel", + "title": "折叠面板Panel", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Collapse", + "main": "", + "destructuring": true, + "subName": "Panel" + }, + "props": [ + { + "name": "children", + "propType": "any" + }, + { + "name": "style", + "propType": "object", + "description": "子组件接受行内样式" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁止用户操作" + }, + { + "name": "title", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "标题" + } + ], + "configure": { + "component": { + "nestingRule": { + "parentWhitelist": ["Collapse"] + } + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Collapse", + "title": "折叠面板", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Collapse", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "dataSource", + "propType": "array", + "description": "使用数据模型构建" + }, + { + "name": "defaultExpandedKeys", + "propType": { + "type": "arrayOf", + "value": "string" + }, + "description": "默认展开keys" + }, + { + "name": "expandedKeys", + "propType": { + "type": "arrayOf", + "value": "string" + }, + "description": "受控展开keys" + }, + { + "name": "onExpand", + "propType": "func", + "description": "展开状态发升变化时候的回调" + }, + { + "name": "disabled", + "propType": "bool", + "description": "所有禁用" + }, + { + "name": "className", + "propType": "string", + "description": "扩展class" + }, + { + "name": "style", + "propType": "object", + "description": "组件接受行内样式" + }, + { + "name": "accordion", + "propType": "bool", + "description": "手风琴模式，一次只能打开一个", + "defaultValue": false + }, + { + "name": "rtl", + "propType": "bool" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "dataSource", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["JsonSetter", "ExpressionSetter"] + } + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "title": "柱状图", + "category": "常用图表(试验)", + "componentName": "ColumnChart", + "icon": "https://unpkg.alibaba-inc.com/@ali/vc-bizcharts@1.1.4/src/vc-column/logo.svg", + "npm": { + "package": "bizcharts", + "version": "4.1.11-beta.2", + "exportName": "ColumnChart", + "main": "", + "destructuring": true, + "subName": "" + }, + "configure": { + "props": [ + { + "name": "titleConfig", + "title": "标题配置", + "display": "block", + "type": "group", + "items": [ + { + "name": "title.text", + "title": "标题", + "setter": "StringSetter" + }, + { + "name": "title.visible", + "title": "是否展示", + "setter": "BoolSetter" + } + ] + }, + { + "name": "xFieldConfig", + "title": "横坐标", + "type": "group", + "display": "block", + "items": [ + { + "name": "xField", + "title": "横坐标标识", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "year", + "tip": "标题文本", + "supportVariable": true + }, + { + "name": "xFieldAlias", + "title": "横坐标别名", + "display": "inline", + "setter": "StringSetter", + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n target\n .getProps()\n .setPropValue(\n `meta.${target.getProps().getPropValue(\"xField\")}.alias`,\n value\n );\n }" + } + } + ] + }, + { + "name": "yFieldConfig", + "title": "纵坐标", + "type": "group", + "display": "block", + "items": [ + { + "name": "yField", + "title": "纵坐标标识", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "year", + "tip": "标题文本", + "supportVariable": true + }, + { + "name": "yFieldAlias", + "title": "纵坐标别名", + "display": "inline", + "setter": "StringSetter", + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n target\n .getProps()\n .setPropValue(\n `meta.${target.getProps().getPropValue(\"yField\")}.alias`,\n value\n );\n }" + } + } + ] + }, + { + "name": "data", + "title": "图表数据", + "tip": "配置图表数据", + "setter": "JsonSetter" + } + ], + "supports": { + "style": true + } + } + }, + { + "componentName": "DatePicker", + "title": "日期选择框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "DatePicker", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "name", + "title": { + "label": "名称", + "tip": "name|表单相关" + }, + "propType": "string", + "description": "name|表单相关" + }, + { + "name": "label", + "title": { + "label": "标签", + "tip": "label|输入框内置标签" + }, + "propType": "string", + "description": "label|输入框内置标签" + }, + { + "name": "state", + "title": { + "label": "状态", + "tip": "state|输入框状态" + }, + "propType": { + "type": "oneOf", + "value": ["success", "loading", "error"] + }, + "description": "state|输入框状态" + }, + { + "name": "placeholder", + "title": { + "label": "占位提示", + "tip": "placeholder|输入提示" + }, + "propType": "string", + "description": "输入提示" + }, + { + "name": "value", + "title": { + "label": "value", + "tip": "value|日期值（受控）" + }, + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "日期值（受控）moment 对象" + }, + { + "name": "defaultValue", + "title": { + "label": "默认值", + "tip": "defaultValue|初始日期值，moment 对象" + }, + "propType": "date", + "description": "defaultValue|初始日期值，moment 对象" + }, + { + "name": "format", + "title": { + "label": "格式", + "tip": "format|日期值的格式（用于限定用户输入和展示）" + }, + "propType": "string", + "description": "format|日期值的格式（用于限定用户输入和展示）", + "defaultValue": "YYYY-MM-DD" + }, + { + "name": "onChange", + "propType": "func", + "description": "日期值改变时的回调\n@param {MomentObject|String} value 日期值" + }, + { + "name": "onOk", + "propType": "func", + "description": "点击确认按钮时的回调\n@return {MomentObject|String} 日期值" + }, + { + "name": "size", + "title": { + "label": "尺寸", + "tip": "size|输入框尺寸" + }, + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "size|输入框尺寸", + "defaultValue": "medium" + }, + { + "name": "disabled", + "title": { + "label": "是否禁用", + "tip": "disabled|是否禁用" + }, + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "hasClear", + "title": { + "label": "清除按钮", + "tip": "hasClear|是否显示清空按钮" + }, + "propType": "bool", + "description": "hasClear|是否显示清空按钮", + "defaultValue": true + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "跟随滚动" + }, + { + "name": "defaultVisible", + "title": { + "label": "弹层显示", + "tip": "defaultVisible|弹层默认是否显示" + }, + "propType": "bool", + "description": "defaultVisible|弹层默认是否显示", + "defaultValue": false + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "form", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "rtl", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "value", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "name", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "defaultValue", + "title": { + "label": "默认值", + "tip": "defaultValue|初始日期值，moment 对象" + }, + "setter": "DateSetter" + }, + { + "name": "form", + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Dialog", + "title": "对话框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Dialog", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "visible", + "propType": { + "type": "oneOfType", + "value": ["JSExpression", "bool"] + }, + "description": "是否显示", + "defaultValue": false + }, + { + "name": "title", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "description": "标题" + }, + { + "name": "children", + "propType": { + "type": "oneOfType", + "value": [ + "bool", + { + "type": "instanceOf", + "value": "node" + } + ] + }, + "description": "内容" + }, + { + "name": "footer", + "propType": { + "type": "oneOfType", + "value": ["bool"] + }, + "description": "底部按钮" + }, + { + "name": "footerAlign", + "propType": { + "type": "oneOf", + "value": ["left", "center", "right"] + }, + "description": "操作对齐方式", + "defaultValue": "right" + }, + { + "name": "closeable", + "propType": { + "type": "oneOf", + "value": ["close", "mask", "esc,close", "close,esc,mask", "esc"] + }, + "description": "关闭方式", + "defaultValue": "esc,close" + }, + { + "name": "onClose", + "propType": "func", + "description": "对话框关闭时触发的回调函数\n@param {String} trigger 关闭触发行为的描述字符串\n@param {Object} event 关闭时事件对象" + }, + { + "name": "hasMask", + "propType": "bool", + "description": "是否显示遮罩", + "defaultValue": true + }, + { + "name": "animation", + "propType": { + "type": "oneOfType", + "value": ["object", "bool"] + }, + "description": "显示隐藏时动画的播放方式\n@property {String} in 进场动画\n@property {String} out 出场动画" + }, + { + "name": "autoFocus", + "propType": "bool", + "description": "是否获得焦点", + "defaultValue": false + }, + { + "name": "isFullScreen", + "propType": "bool", + "description": "是否全屏", + "defaultValue": false + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "isModal": true, + "rootSelector": "div.next-dialog", + "nestingRule": { + "parentWhitelist": ["Page"] + } + }, + "props": [ + { + "name": "title", + "title": "标题", + "setter": "StringSetter", + "initialValue": "标题" + }, + { + "name": "visible", + "title": "是否显示", + "setter": "BoolSetter", + "initialValue": false + }, + { + "name": "hasMask", + "title": "显示遮罩", + "setter": "BoolSetter", + "initialValue": true + }, + { + "name": "closeMode", + "title": "关闭方式", + "setter": { + "componentName": "SelectSetter", + "mutiple": true, + "props": { + "options": [ + { + "title": "close", + "value": "close" + }, + { + "title": "mask", + "value": "mask" + }, + { + "title": "esc", + "value": "esc" + } + ] + } + }, + "initialValue": ["esc", "close"] + }, + { + "name": "autoFocus", + "title": "自动聚焦", + "setter": "BoolSetter", + "initialValue": false + }, + { + "name": "buttons", + "title": "底部按钮配置", + "type": "group", + "extraProps": { + "display": "block" + }, + "items": [ + { + "name": "footer", + "title": "是否显示", + "setter": "BoolSetter", + "initialValue": true + }, + { + "name": "footerAlign", + "title": "对齐方式", + "initialValue": "right", + "condition": { + "type": "JSFunction", + "value": "target => {\n return target.getProps().getPropValue(\"footer\");\n }" + }, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "right", + "props": { + "options": [ + { + "title": "left", + "value": "left" + }, + { + "title": "center", + "value": "center" + }, + { + "title": "right", + "value": "right" + } + ] + } + } + }, + { + "name": "footerActions", + "title": "排列方式", + "initialValue": ["ok", "cancel"], + "condition": { + "type": "JSFunction", + "value": "target => {\n return target.getProps().getPropValue(\"footer\");\n }" + }, + "setter": { + "componentName": "SelectSetter", + "initialValue": ["ok", "cancel"], + "props": { + "options": [ + { + "title": "ok, cancel", + "value": ["ok", "cancel"] + }, + { + "title": "cancel, ok", + "value": ["cancel", "ok"] + }, + { + "title": "cancel", + "value": ["cancel"] + }, + { + "title": "ok", + "value": ["ok"] + } + ] + } + } + } + ] + } + ], + "supports": { + "events": ["onOk", "onCancel", "onClose"], + "style": true + } + }, + "experimental": { + "callbacks": { + "onNodeAdd": { + "type": "JSFunction", + "value": "(dragment, currentNode) => {\n \n \n if (\n !dragment ||\n [\"NextP\", \"NextBlock\", \"Slot\"].includes(dragment.componentName) ||\n (dragment.isModal && dragment.isModal())\n ) {\n console.log(\n `[${dragment.componentName}] doesn\\'n need to wrap with NextBlock > NextBlockCell`\n );\n return;\n }\n\n const NextPProps = {\n wrap: false,\n type: \"body2\",\n verAlign: \"middle\",\n textSpacing: true,\n align: \"left\"\n };\n\n if (\n [\n \"Form\",\n \"ResponsiveGrid\",\n \"Box\",\n \"Card\",\n \"List\",\n \"Message\",\n \"Slider\",\n \"NextTable\"\n ].includes(dragment.componentName) ||\n dragment.getPropValue(\"isFillContainer\")\n ) {\n NextPProps.full = true;\n }\n const layoutPSchema = {\n componentName: \"NextP\",\n title: \"段落\",\n props: NextPProps,\n children: [dragment.schema]\n };\n\n \n const layoutBlockNode = len =>\n currentNode.document.createNode({\n componentName: \"NextBlock\",\n title: \"区块\",\n props: {\n childTotalColumns: len || 12\n },\n children: [\n {\n componentName: \"NextBlockCell\",\n title: \"子区块\",\n props: {\n isAutoContainer: true,\n colSpan: 12,\n rowSpan: 1\n },\n children: [layoutPSchema]\n }\n ]\n });\n\n const dropLocation = dragment.document.designer.dropLocation;\n\n if (!dropLocation) {\n \n return;\n }\n const dropTarget = dropLocation.target;\n const dropTargetName = dropLocation.target.componentName || \"\";\n\n \n const targetId = (dropLocation && dropLocation.target.id) || \"\";\n \n let slotTarget =\n currentNode.slots.length > 0 &&\n currentNode.slots.find(item => item.id === targetId);\n\n const layoutPNode = currentNode.document.createNode(layoutPSchema);\n\n \n const isAsideSlot =\n slotTarget && [\"aside\"].indexOf(slotTarget._slotFor.key) > -1;\n \n const isNeedPSlot =\n slotTarget &&\n [\"header\", \"footer\", \"nav\"].indexOf(slotTarget._slotFor.key) > -1;\n\n const wrapWithBlock = (dragment, node, dropTargetName, blockLen) => {\n setTimeout(() => {\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] need to wrap with NextBlock > NextBlockCell > NextP [from NextPage2]`\n );\n const newNode = node.document.createNode(\n layoutBlockNode(blockLen).schema\n );\n node.insertBefore(newNode, dragment, false);\n dragment.remove(false);\n newNode\n .getChildren()\n .get(0)\n .getChildren()\n .get(0)\n .getChildren()\n .get(0)\n .select();\n }, 1);\n };\n\n const wrapWithP = (dragment, node, dropTargetName) => {\n setTimeout(() => {\n \n \n if (dropTargetName === \"NextP\") {\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] does't need to wrap with NextP. [from NextPage3]`\n );\n return;\n }\n\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] need to wrap with NextP [from NextPage3]`\n );\n const newNode = node.document.createNode(\n Object.assign(layoutPNode.schema)\n );\n node.insertBefore(newNode, dragment, false);\n dragment.remove(false);\n newNode\n .getChildren()\n .get(0)\n .select();\n }, 1);\n };\n\n \n \n if (\n [\"NextPage\"].includes(dropTargetName) &&\n currentNode.getChildren().has(dragment)\n ) {\n wrapWithBlock(dragment, currentNode, dropTargetName, 12);\n\n \n \n } else if (\n isAsideSlot &&\n slotTarget &&\n slotTarget.getChildren().has(dragment)\n ) {\n wrapWithBlock(dragment, slotTarget, dropTargetName, 1);\n\n \n \n \n } else if (\n dropTarget.getPropValue(\"isAutoContainer\") ||\n dropTargetName === \"Tab.Item\"\n ) {\n wrapWithP(dragment, dropTarget, dropTargetName);\n\n \n \n } else if (isNeedPSlot && slotTarget) {\n wrapWithP(dragment, slotTarget, dropTargetName);\n }\n\n \n }" + } + } + }, + "icon": "", + "category": "容器" + }, + { + "componentName": "Div", + "title": "Div", + "configure": { + "component": { + "isContainer": true + } + }, + "category": "基础" + }, + { + "componentName": "Divider", + "title": "分隔符", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Divider", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "children", + "propType": "string", + "description": "文案", + "defaultValue": "分隔符" + }, + { + "name": "dashed", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否虚线", + "en_US": "Dashed" + } + }, + "propType": { + "type": "bool" + }, + "description": "是否为虚线", + "defaultValue": false + }, + { + "name": "direction", + "title": { + "label": { + "type": "i18n", + "zh_CN": "朝向", + "en_US": "Direction" + } + }, + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "线是水平还是垂直类型", + "defaultValue": "hoz" + }, + { + "name": "orientation", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标题位置", + "en_US": "Orientation" + } + }, + "propType": { + "type": "oneOf", + "value": ["left", "right", "center"] + }, + "description": "分割线标题的位置", + "defaultValue": "center" + } + ], + "experimental": { + "filters": [ + { + "name": "", + "filter": { + "type": "JSFunction", + "value": "filters" + } + } + ] + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Drawer.Inner", + "title": "Drawer.Inner", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Drawer", + "main": "", + "destructuring": true, + "subName": "Inner" + }, + "props": [ + { + "name": "className", + "propType": "string" + }, + { + "name": "closeable", + "propType": "bool", + "defaultValue": true + }, + { + "name": "role", + "propType": "string", + "defaultValue": "dialog" + }, + { + "name": "title", + "propType": "string" + }, + { + "name": "placement", + "propType": { + "type": "oneOf", + "value": ["top", "right", "bottom", "left"] + } + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "onClose", + "propType": "func" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "headerStyle", + "propType": "object" + }, + { + "name": "bodyStyle", + "propType": "object" + }, + { + "name": "afterClose", + "propType": "func" + }, + { + "name": "beforeOpen", + "propType": "func" + }, + { + "name": "beforeClose", + "propType": "func" + }, + { + "name": "cache", + "propType": "bool" + }, + { + "name": "shouldUpdatePosition", + "propType": "bool" + } + ], + "category": "基础" + }, + { + "componentName": "Drawer", + "title": "抽屉", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Drawer", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "prefix", + "title": { + "type": "i18n", + "zh_CN": "前缀", + "en_US": "prefix" + }, + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "width", + "title": { + "type": "i18n", + "zh_CN": "宽度", + "en_US": "width", + "tip": "width|仅在 placement是 left right 的时候生效" + }, + "propType": { + "type": "oneOfType", + "value": ["number", "string"] + }, + "description": "宽度，仅在 placement是 left right 的时候生效" + }, + { + "name": "height", + "title": { + "type": "i18n", + "zh_CN": "高度", + "en_US": "height", + "tip": "height|仅在 placement是 top bottom 的时候生效" + }, + "propType": { + "type": "oneOfType", + "value": ["number", "string"] + }, + "description": "高度，仅在 placement是 top bottom 的时候生效" + }, + { + "name": "placement", + "propType": { + "type": "oneOf", + "value": ["top", "right", "bottom", "left"] + }, + "description": "位于页面的位置", + "defaultValue": "right" + }, + { + "name": "title", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "description": "标题" + }, + { + "name": "headerStyle", + "propType": "object", + "description": "header上的样式" + }, + { + "name": "bodyStyle", + "propType": "object", + "description": "body上的样式" + }, + { + "name": "visible", + "propType": "bool", + "description": "是否显示" + }, + { + "name": "hasMask", + "propType": "bool", + "description": "是否显示遮罩", + "defaultValue": true + }, + { + "name": "onVisibleChange", + "propType": "func" + }, + { + "name": "animation", + "title": { + "label": "动画", + "tip": "animation" + }, + "propType": "bool", + "description": "显示隐藏时动画的播放方式\n@property {String} in 进场动画\n@property {String} out 出场动画" + }, + { + "name": "closeable", + "propType": { + "type": "oneOfType", + "value": ["string", "bool"] + }, + "description": "控制对话框关闭的方式，值可以为字符串或者布尔值，其中字符串是由以下值组成：\n**close** 表示点击关闭按钮可以关闭对话框\n**mask** 表示点击遮罩区域可以关闭对话框\n**esc** 表示按下 esc 键可以关闭对话框\n如 'close' 或 'close,esc,mask'\n如果设置为 true，则以上关闭方式全部生效\n如果设置为 false，则以上关闭方式全部失效", + "defaultValue": true + }, + { + "name": "onClose", + "propType": "func", + "description": "对话框关闭时触发的回调函数\n@param {String} trigger 关闭触发行为的描述字符串\n@param {Object} event 关闭时事件对象" + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + } + ], + "configure": { + "component": { + "isContainer": true, + "isModal": true, + "rootSelector": ".next-drawer", + "nestingRule": { + "parentWhitelist": { + "type": "JSFunction", + "value": "(testNode, currentNode) => {\n return testNode.componentName === \"Page\";\n }" + } + } + }, + "props": [ + { + "name": "title", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标题", + "en_US": "Title" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: title | 说明: 标题", + "en_US": "prop: title | description: title" + } + }, + "setter": { + "componentName": "StringSetter" + }, + "description": "标题" + }, + { + "name": "width", + "title": { + "label": { + "type": "i18n", + "zh_CN": "宽度", + "en_US": "width" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: width | 说明: 宽度", + "en_US": "prop: width | description: 仅在 placement是 left right 的时候生效" + } + }, + "setter": { + "componentName": "NumberSetter" + }, + "description": "宽度，仅在 placement是 left right 的时候生效" + }, + { + "name": "height", + "title": { + "label": { + "type": "i18n", + "zh_CN": "高度", + "en_US": "height" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: height | 说明: 高度", + "en_US": "prop: height | description: 仅在 placement是 top bottom 的时候生效" + } + }, + "setter": { + "componentName": "NumberSetter" + }, + "description": "高度，仅在 placement是 top bottom 的时候生效" + }, + { + "name": "placement", + "title": { + "label": { + "type": "i18n", + "zh_CN": "弹出位置", + "en_US": "height" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: placement | 说明: 位于页面的位置", + "en_US": "prop: placement | description: drawer placement" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["top", "right", "bottom", "left"] + } + }, + "description": "位于页面的位置", + "defaultValue": "right" + }, + { + "name": "visible", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否显示", + "en_US": "visible" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: visible | 说明: 是否显示", + "en_US": "prop: visible | description: drawer visible" + } + }, + "setter": "BoolSetter", + "description": "是否显示" + }, + { + "name": "hasMask", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示遮罩", + "en_US": "hasMask" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasMask | 说明: 是否显示遮罩", + "en_US": "prop: hasMask | description: drawer hasMask" + } + }, + "setter": { + "componentName": "BoolSetter" + }, + "description": "是否显示遮罩", + "defaultValue": true + }, + { + "name": "closeable", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示遮罩", + "en_US": "closeable" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: closeable | 说明: 控制对话框关闭的方式，值可以为字符串或者布尔值，其中字符串是由以下值组成：\n**close** 表示点击关闭按钮可以关闭对话框\n**mask** 表示点击遮罩区域可以关闭对话框\n**esc** 表示按下 esc 键可以关闭对话框\n如 'close' 或 'close,esc,mask'\n如果设置为 true，则以上关闭方式全部生效\n如果设置为 false，则以上关闭方式全部失效", + "en_US": "prop: closeable | description: drawer closeable" + } + }, + "setter": { + "componentName": "BoolSetter" + }, + "description": "控制对话框关闭的方式，值可以为字符串或者布尔值，其中字符串是由以下值组成：\n**close** 表示点击关闭按钮可以关闭对话框\n**mask** 表示点击遮罩区域可以关闭对话框\n**esc** 表示按下 esc 键可以关闭对话框\n如 'close' 或 'close,esc,mask'\n如果设置为 true，则以上关闭方式全部生效\n如果设置为 false，则以上关闭方式全部失效", + "defaultValue": true + } + ] + }, + "experimental": { + "callbacks": { + "onNodeAdd": { + "type": "JSFunction", + "value": "(dragment, currentNode) => {\n \n \n if (\n !dragment ||\n [\"NextP\", \"NextBlock\", \"Slot\"].includes(dragment.componentName) ||\n (dragment.isModal && dragment.isModal())\n ) {\n console.log(\n `[${dragment.componentName}] doesn\\'n need to wrap with NextBlock > NextBlockCell`\n );\n return;\n }\n\n const NextPProps = {\n wrap: false,\n type: \"body2\",\n verAlign: \"middle\",\n textSpacing: true,\n align: \"left\"\n };\n\n if (\n [\n \"Form\",\n \"ResponsiveGrid\",\n \"Box\",\n \"Card\",\n \"List\",\n \"Message\",\n \"Slider\",\n \"NextTable\"\n ].includes(dragment.componentName) ||\n dragment.getPropValue(\"isFillContainer\")\n ) {\n NextPProps.full = true;\n }\n const layoutPSchema = {\n componentName: \"NextP\",\n title: \"段落\",\n props: NextPProps,\n children: [dragment.schema]\n };\n\n \n const layoutBlockNode = len =>\n currentNode.document.createNode({\n componentName: \"NextBlock\",\n title: \"区块\",\n props: {\n childTotalColumns: len || 12\n },\n children: [\n {\n componentName: \"NextBlockCell\",\n title: \"子区块\",\n props: {\n isAutoContainer: true,\n colSpan: 12,\n rowSpan: 1\n },\n children: [layoutPSchema]\n }\n ]\n });\n\n const dropLocation = dragment.document.designer.dropLocation;\n\n if (!dropLocation) {\n \n return;\n }\n const dropTarget = dropLocation.target;\n const dropTargetName = dropLocation.target.componentName || \"\";\n\n \n const targetId = (dropLocation && dropLocation.target.id) || \"\";\n \n let slotTarget =\n currentNode.slots.length > 0 &&\n currentNode.slots.find(item => item.id === targetId);\n\n const layoutPNode = currentNode.document.createNode(layoutPSchema);\n\n \n const isAsideSlot =\n slotTarget && [\"aside\"].indexOf(slotTarget._slotFor.key) > -1;\n \n const isNeedPSlot =\n slotTarget &&\n [\"header\", \"footer\", \"nav\"].indexOf(slotTarget._slotFor.key) > -1;\n\n const wrapWithBlock = (dragment, node, dropTargetName, blockLen) => {\n setTimeout(() => {\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] need to wrap with NextBlock > NextBlockCell > NextP [from NextPage2]`\n );\n const newNode = node.document.createNode(\n layoutBlockNode(blockLen).schema\n );\n node.insertBefore(newNode, dragment, false);\n dragment.remove(false);\n newNode\n .getChildren()\n .get(0)\n .getChildren()\n .get(0)\n .getChildren()\n .get(0)\n .select();\n }, 1);\n };\n\n const wrapWithP = (dragment, node, dropTargetName) => {\n setTimeout(() => {\n \n \n if (dropTargetName === \"NextP\") {\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] does't need to wrap with NextP. [from NextPage3]`\n );\n return;\n }\n\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] need to wrap with NextP [from NextPage3]`\n );\n const newNode = node.document.createNode(\n Object.assign(layoutPNode.schema)\n );\n node.insertBefore(newNode, dragment, false);\n dragment.remove(false);\n newNode\n .getChildren()\n .get(0)\n .select();\n }, 1);\n };\n\n \n \n if (\n [\"NextPage\"].includes(dropTargetName) &&\n currentNode.getChildren().has(dragment)\n ) {\n wrapWithBlock(dragment, currentNode, dropTargetName, 12);\n\n \n \n } else if (\n isAsideSlot &&\n slotTarget &&\n slotTarget.getChildren().has(dragment)\n ) {\n wrapWithBlock(dragment, slotTarget, dropTargetName, 1);\n\n \n \n \n } else if (\n dropTarget.getPropValue(\"isAutoContainer\") ||\n dropTargetName === \"Tab.Item\"\n ) {\n wrapWithP(dragment, dropTarget, dropTargetName);\n\n \n \n } else if (isNeedPSlot && slotTarget) {\n wrapWithP(dragment, slotTarget, dropTargetName);\n }\n\n \n }" + } + } + }, + "icon": "", + "category": "容器" + }, + { + "componentName": "Dropdown", + "title": "下拉菜单", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Dropdown", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "pure", + "propType": "bool", + "defaultValue": false + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层当前是否显示" + }, + { + "name": "defaultVisible", + "propType": "bool", + "description": "弹层默认是否显示", + "defaultValue": false + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层显示或隐藏时触发的回调函数\n@param {Boolean} visible 弹层是否显示\n@param {String} type 触发弹层显示或隐藏的来源 fromContent 表示由Dropdown内容触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "triggerType", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "instanceOf", + "value": "array" + } + ] + }, + "description": "触发弹层显示或隐藏的操作类型，可以是 'click'，'hover'，或者它们组成的数组，如 ['hover', 'click']", + "defaultValue": "hover" + }, + { + "name": "disabled", + "propType": "bool", + "description": "设置此属性，弹层无法显示或隐藏", + "defaultValue": false + }, + { + "name": "align", + "propType": "string", + "description": "弹层相对于触发元素的定位, 详见 Overlay 的定位部分", + "defaultValue": "tl bl" + }, + { + "name": "offset", + "propType": { + "type": "instanceOf", + "value": "array" + }, + "description": "弹层相对于trigger的定位的微调, 接收数组[hoz, ver], 表示弹层在 left / top 上的增量\ne.g. [100, 100] 表示往右(RTL 模式下是往左) 、下分布偏移100px", + "defaultValue": [0, 0] + }, + { + "name": "delay", + "propType": "number", + "description": "弹层显示或隐藏的延时时间（以毫秒为单位），在 triggerType 被设置为 hover 时生效", + "defaultValue": 200 + }, + { + "name": "autoFocus", + "propType": "bool", + "description": "弹层打开时是否让其中的元素自动获取焦点" + }, + { + "name": "hasMask", + "propType": "bool", + "description": "是否显示遮罩", + "defaultValue": false + }, + { + "name": "cache", + "propType": "bool", + "description": "隐藏时是否保留子节点", + "defaultValue": false + }, + { + "name": "animation", + "propType": { + "type": "oneOfType", + "value": ["object", "bool"] + }, + "description": "配置动画的播放方式，支持 { in: 'enter-class', out: 'leave-class' } 的对象参数，如果设置为 false，则不播放动画\n@default { in: 'expandInDown', out: 'expandOutUp' }" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "trigger", + "title": { + "label": "触发元素", + "tip": "" + }, + "setter": "SlotSetter" + }, + { + "name": "animation", + "title": { + "label": "animation", + "tip": "配置动画的播放方式，支持 { in: 'enter-class', out: 'leave-class' } 的对象参数，如果设置为 false，则不播放动画\n@default { in: 'expandInDown', out: 'expandOutUp' }" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "in", + "description": "", + "setter": "StringSetter", + "defaultValue": "enter-class" + }, + { + "name": "out", + "description": "", + "setter": "StringSetter", + "defaultValue": "leave-class" + } + ] + } + }, + "initialValue": { + "in": "enter-class", + "out": "leave-class" + } + }, + { + "componentName": "BoolSetter", + "initialValue": true + } + ] + } + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "ErrorBoundary", + "title": "ErrorBoundary", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "ConfigProvider", + "main": "", + "destructuring": true, + "subName": "ErrorBoundary" + }, + "props": [ + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "element" + } + }, + { + "name": "afterCatch", + "propType": "func", + "description": "捕获错误后的自定义处理, 比如埋点上传\n@param {Object} error 错误\n@param {Object} errorInfo 错误详细信息" + }, + { + "name": "fallbackUI", + "propType": "func", + "description": "捕获错误后的展现 自定义组件\n@param {Object} error 错误\n@param {Object} errorInfo 错误详细信息\n@returns {Element} 捕获错误后的处理" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "Field", + "title": "Field", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Field", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "this", + "propType": "any" + } + ], + "category": "基础" + }, + { + "componentName": "Form.Error", + "title": "Form.Error", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Form", + "main": "", + "destructuring": true, + "subName": "Error" + }, + "props": [ + { + "name": "name", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "instanceOf", + "value": "array" + } + ] + }, + "description": "表单名" + }, + { + "name": "field", + "propType": "object", + "description": "自定义 field (在 Form 内不需要设置)" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "children", + "propType": { + "type": "oneOfType", + "value": [ + { + "type": "instanceOf", + "value": "node" + }, + "func" + ] + }, + "description": "自定义错误渲染, 可以是 node 或者 function(errors, state)" + }, + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + } + ], + "category": "基础" + }, + { + "componentName": "Form.Item", + "title": "表单项", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Form", + "main": "", + "destructuring": true, + "subName": "Item" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "label", + "propType": "string", + "description": "标签" + }, + { + "name": "labelCol", + "propType": { + "type": "shape", + "value": [ + { + "name": "span", + "description": "span", + "propType": "number" + }, + { + "name": "offset", + "description": "offset", + "propType": "number" + } + ] + }, + "description": "label 标签布局，通 `` 组件，设置 span offset 值，如 {span: 8, offset: 16}，该项仅在垂直表单有效" + }, + { + "name": "wrapperCol", + "propType": { + "type": "shape", + "value": [ + { + "name": "span", + "description": "span", + "propType": "number" + }, + { + "name": "offset", + "description": "offset", + "propType": "number" + } + ] + }, + "description": "需要为输入控件设置布局样式时，使用该属性，用法同 labelCol" + }, + { + "name": "help", + "title": { + "label": "自定义提示信息", + "tip": "如不设置，则会根据校验规则自动生成." + }, + "propType": "string", + "description": "自定义提示信息，如不设置，则会根据校验规则自动生成." + }, + { + "name": "extra", + "title": { + "label": "额外的提示信息", + "tip": "和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 位于错误信息后面" + }, + "propType": "string", + "description": "额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 位于错误信息后面" + }, + { + "name": "validateState", + "title": { + "label": "校验状态", + "tip": "如不设置，则会根据校验规则自动生成\n@enumdesc 失败, 成功, 校验中, 警告" + }, + "propType": { + "type": "oneOf", + "value": ["error", "success", "loading", "warning"] + }, + "description": "校验状态，如不设置，则会根据校验规则自动生成\n@enumdesc 失败, 成功, 校验中, 警告" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + }, + { + "name": "size", + "title": { + "label": "Size", + "tip": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。" + }, + "propType": { + "type": "oneOf", + "value": ["large", "small", "medium"] + }, + "description": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。" + }, + { + "name": "fullWidth", + "title": { + "label": "fullWidth", + "tip": "单个 Item 中表单类组件宽度是否是100%" + }, + "propType": "bool", + "description": "单个 Item 中表单类组件宽度是否是100%" + }, + { + "name": "labelAlign", + "title": { + "label": "标签的位置", + "tip": "上, 左, 内" + }, + "propType": { + "type": "oneOf", + "value": ["top", "left", "inset"] + }, + "description": "标签的位置\n@enumdesc 上, 左, 内" + }, + { + "name": "labelTextAlign", + "title": { + "label": "标签的左右对齐方式", + "tip": "左, 右" + }, + "propType": { + "type": "oneOf", + "value": ["left", "right"] + }, + "description": "标签的左右对齐方式\n@enumdesc 左, 右" + }, + { + "name": "className", + "propType": "string", + "description": "扩展class" + }, + { + "name": "required", + "title": { + "label": "不能为空", + "tip": "[表单校验] 不能为空" + }, + "propType": "bool", + "description": "[表单校验] 不能为空" + }, + { + "name": "requiredMessage", + "title": { + "label": "自定义错误信息", + "tip": "[表单校验]为空时自定义错误信息" + }, + "propType": "string", + "description": "required 自定义错误信息" + }, + { + "name": "min", + "title": { + "label": "最小值", + "tip": "[表单校验] 最小值" + }, + "propType": "number", + "description": "[表单校验] 最小值" + }, + { + "name": "max", + "title": { + "label": "最大值", + "tip": "[表单校验] 最大值" + }, + "propType": "number", + "description": "[表单校验] 最大值" + }, + { + "name": "minmaxMessage", + "title": { + "label": "min/max message", + "tip": "[表单校验] min/max 自定义错误信息" + }, + "propType": "string", + "description": "min/max 自定义错误信息" + }, + { + "name": "minLength", + "title": { + "label": "最小长度", + "tip": "[表单校验] 字符串最小长度 / 数组最小个数" + }, + "propType": "number", + "description": "[表单校验] 字符串最小长度 / 数组最小个数" + }, + { + "name": "maxLength", + "title": { + "label": "最大长度", + "tip": "[表单校验] 字符串最大长度 / 数组最大个数" + }, + "propType": "number", + "description": "[表单校验] 字符串最大长度 / 数组最大个数" + }, + { + "name": "minmaxLengthMessage", + "title": { + "label": "max|min length error message", + "tip": "[表单校验] minLength/maxLength 自定义错误信息" + }, + "propType": "string", + "description": "minLength/maxLength 自定义错误信息" + }, + { + "name": "length", + "title": { + "label": "长度", + "tip": "[表单校验] 字符串精确长度 / 数组精确个数" + }, + "propType": "number", + "description": "[表单校验] 字符串精确长度 / 数组精确个数" + }, + { + "name": "lengthMessage", + "title": { + "label": "length error message", + "tip": "[表单校验] minLength/maxLength 自定义错误信息" + }, + "propType": "string", + "description": "length 自定义错误信息" + }, + { + "name": "pattern", + "title": { + "label": "正则", + "tip": "[表单校验] 正则校验" + }, + "propType": "string", + "description": "正则校验" + }, + { + "name": "patternMessage", + "title": { + "label": "pattern error message", + "tip": "[表单校验] pattern 自定义错误信息" + }, + "propType": "string", + "description": "pattern 自定义错误信息" + }, + { + "name": "format", + "title": { + "label": "format", + "tip": "[表单校验] 四种常用的 pattern" + }, + "propType": { + "type": "oneOf", + "value": ["number", "email", "url", "tel"] + }, + "description": "[表单校验] 四种常用的 pattern" + }, + { + "name": "formatMessage", + "title": { + "label": "format error message", + "tip": "[表单校验] format 自定义错误信息" + }, + "propType": "string", + "description": "format 自定义错误信息" + }, + { + "name": "validator", + "propType": "func", + "description": "[表单校验] 自定义校验函数" + }, + { + "name": "autoValidate", + "propType": "bool", + "description": "是否修改数据时自动触发校验" + }, + { + "name": "device", + "propType": { + "type": "oneOf", + "value": ["phone", "tablet", "desktop"] + }, + "description": "预设屏幕宽度" + }, + { + "name": "responsive", + "propType": "bool" + }, + { + "name": "colSpan", + "propType": "number", + "description": "在响应式布局模式下，表单项占多少列" + }, + { + "name": "labelWidth", + "propType": { + "type": "oneOfType", + "value": ["string", "number"] + }, + "description": "在响应式布局下，且label在左边时，label的宽度是多少", + "defaultValue": 100 + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否开启预览态" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["Form"] + } + }, + "supports": { + "style": true + }, + "props": [ + { + "name": "label", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签文本", + "en_US": "Label" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: label | 说明: 标签文本内容", + "en_US": "prop: label | description: label content" + } + }, + "setter": "StringSetter", + "description": "标签" + }, + { + "name": "help", + "title": { + "label": { + "type": "i18n", + "zh_CN": "错误提示", + "en_US": "Help Info" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: help | 说明: 自定义提示信息, 如不设置，则会根据校验规则自动生成.", + "en_US": "prop: help | description: help infomation" + } + }, + "setter": "StringSetter", + "description": "自定义提示信息，如不设置，则会根据校验规则自动生成." + }, + { + "name": "extra", + "title": { + "label": { + "type": "i18n", + "zh_CN": "帮助提示", + "en_US": "Extra Info" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: extra | 说明: 额外的提示信息, 和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 位于错误信息后面", + "en_US": "prop: extra | description: extra infomation" + } + }, + "setter": "StringSetter" + }, + { + "name": "validateState", + "title": { + "label": "校验状态", + "tip": "如不设置，则会根据校验规则自动生成\n@enumdesc 失败, 成功, 校验中, 警告" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["error", "success", "loading", "warning"] + } + } + }, + { + "name": "size", + "title": { + "label": "尺寸", + "tip": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "defaultValue": "medium" + }, + { + "name": "labelAlign", + "title": { + "label": "标签位置", + "tip": "上, 左, 内" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["top", "left", "inset"] + } + }, + "defaultValue": "left" + }, + { + "name": "labelTextAlign", + "title": { + "label": "标签对齐", + "tip": "左, 右" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["left", "right"] + } + }, + "defaultValue": "left" + }, + { + "name": "device", + "title": { + "label": "设备" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["phone", "tablet", "desktop"] + } + }, + "defaultValue": "desktop" + }, + { + "name": "fullWidth", + "title": { + "label": "宽度占满", + "tip": "单个 Item 中表单类组件宽度是否是100%" + }, + "setter": "BoolSetter", + "description": "单个 Item 中表单类组件宽度是否是100%" + }, + { + "name": "isPreview", + "title": { + "label": "预览态" + }, + "setter": "BoolSetter", + "description": "是否开启预览态" + }, + { + "name": "autoValidate", + "title": { + "label": "自动校验" + }, + "setter": "BoolSetter", + "description": "是否修改数据时自动触发校验" + }, + { + "type": "group", + "display": "accordion", + "title": "校验", + "items": [ + { + "type": "group", + "display": "popup", + "title": "非空校验", + "items": [ + { + "name": "required", + "title": { + "label": "不能为空", + "tip": "[表单校验] 不能为空" + }, + "setter": "BoolSetter", + "description": "[表单校验] 不能为空" + }, + { + "name": "requiredMessage", + "title": { + "label": "错误信息", + "tip": "[表单校验]为空时自定义错误信息" + }, + "setter": "StringSetter", + "description": "required 自定义错误信息" + } + ] + }, + { + "type": "group", + "display": "popup", + "title": "最大/最小值校验", + "items": [ + { + "name": "min", + "title": { + "label": "最小值", + "tip": "[表单校验] 最小值" + }, + "setter": "NumberSetter", + "description": "[表单校验] 最小值" + }, + { + "name": "max", + "title": { + "label": "最大值", + "tip": "[表单校验] 最大值" + }, + "setter": "NumberSetter", + "description": "[表单校验] 最大值" + }, + { + "name": "minmaxMessage", + "title": { + "label": "错误信息", + "tip": "[表单校验] min/max 自定义错误信息" + }, + "setter": "StringSetter" + } + ] + }, + { + "type": "group", + "display": "popup", + "title": "最大/最小长度校验", + "items": [ + { + "name": "minLength", + "title": { + "label": "最小长度", + "tip": "[表单校验] 字符串最小长度 / 数组最小个数" + }, + "setter": "NumberSetter", + "description": "[表单校验] 字符串最小长度 / 数组最小个数" + }, + { + "name": "maxLength", + "title": { + "label": "最大长度", + "tip": "[表单校验] 字符串最大长度 / 数组最大个数" + }, + "setter": "NumberSetter", + "description": "[表单校验] 字符串最大长度 / 数组最大个数" + }, + { + "name": "minmaxLengthMessage", + "title": { + "label": "错误信息", + "tip": "[表单校验] minLength/maxLength 自定义错误信息" + }, + "setter": "StringSetter", + "description": "minLength/maxLength 自定义错误信息" + } + ] + }, + { + "type": "group", + "display": "popup", + "title": "长度校验", + "items": [ + { + "name": "length", + "title": { + "label": "长度", + "tip": "[表单校验] 字符串精确长度 / 数组精确个数" + }, + "setter": "NumberSetter", + "description": "[表单校验] 字符串精确长度 / 数组精确个数" + }, + { + "name": "lengthMessage", + "title": { + "label": "错误信息", + "tip": "[表单校验] minLength/maxLength 自定义错误信息" + }, + "setter": "StringSetter", + "description": "length 自定义错误信息" + } + ] + }, + { + "type": "group", + "display": "popup", + "title": "正则校验", + "items": [ + { + "name": "pattern", + "title": { + "label": "正则", + "tip": "[表单校验] 正则校验" + }, + "setter": "StringSetter", + "description": "正则校验" + }, + { + "name": "patternMessage", + "title": { + "label": "错误信息", + "tip": "[表单校验] pattern 自定义错误信息" + }, + "setter": "StringSetter", + "description": "pattern 自定义错误信息" + } + ] + }, + { + "type": "group", + "display": "popup", + "title": "格式化校验", + "items": [ + { + "name": "format", + "title": { + "label": "format", + "tip": "[表单校验] 四种常用的 pattern" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["number", "email", "url", "tel"] + } + }, + "description": "[表单校验] 四种常用的 pattern" + }, + { + "name": "formatMessage", + "title": { + "label": "错误信息", + "tip": "[表单校验] format 自定义错误信息" + }, + "setter": "StringSetter", + "description": "format 自定义错误信息" + } + ] + }, + { + "name": "validator", + "display": "popup", + "title": { + "label": "自定义校验函数" + }, + "setter": "FunctionSetter", + "description": "[表单校验] 自定义校验函数" + } + ] + }, + { + "type": "group", + "title": "布局", + "display": "accordion", + "items": [ + { + "name": "labelCol", + "display": "inline", + "setter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "span", + "description": "span", + "setter": "NumberSetter" + }, + { + "name": "offset", + "description": "offset", + "setter": "NumberSetter" + } + ] + } + } + }, + "description": "label 标签布局，通 `` 组件，设置 span offset 值，如 {span: 8, offset: 16}，该项仅在垂直表单有效" + }, + { + "name": "wrapperCol", + "display": "inline", + "setter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "span", + "description": "span", + "setter": "NumberSetter" + }, + { + "name": "offset", + "description": "offset", + "setter": "NumberSetter" + } + ] + } + } + }, + "description": "需要为输入控件设置布局样式时，使用该属性，用法同 labelCol" + } + ] + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ] + }, + "experimental": { + "callbacks": { + "onNodeRemove": { + "type": "JSFunction", + "value": "(removedNode, currentNode) => {\n if (!removedNode || !currentNode) {\n return;\n }\n const children = currentNode.children;\n \n if (children && children.length === 0) {\n currentNode.remove();\n }\n }" + } + } + }, + "icon": "https://img.alicdn.com/tfs/TB1nYqOuW61gK0jSZFlXXXDKFXa-112-64.png", + "category": "内容" + }, + { + "componentName": "Form.Reset", + "title": "重置按钮", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Form", + "main": "", + "destructuring": true, + "subName": "Reset" + }, + "props": [ + { + "name": "onClick", + "propType": "func", + "description": "点击提交后触发" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "children", + "title": "内容", + "propType": "string" + }, + { + "name": "icon", + "propType": "string", + "description": "自定义内联样式" + }, + { + "name": "type", + "title": "类型", + "propType": { + "type": "oneOf", + "value": ["primary", "secondary", "normal"] + }, + "description": "按钮的类型", + "defaultValue": "normal" + }, + { + "name": "size", + "title": "尺寸", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "按钮的尺寸", + "defaultValue": "medium" + }, + { + "name": "iconSize", + "title": "Icon 尺寸", + "propType": { + "type": "oneOf", + "value": ["xxs", "xs", "small", "medium", "large", "xl", "xxl", "xxxl"] + }, + "defaultValue": "small", + "description": "按钮中 Icon 的尺寸，用于替代 Icon 的默认大小" + }, + { + "name": "ghost", + "title": "ghost", + "propType": { + "type": "oneOf", + "value": [true, false, "light", "dark"] + }, + "description": "是否为幽灵按钮", + "defaultValue": false + }, + { + "name": "toDefault", + "propType": "bool", + "description": "返回默认值" + }, + { + "name": "loading", + "title": "loading", + "propType": "bool", + "description": "设置按钮的载入状态", + "defaultValue": false + }, + { + "name": "text", + "title": "text", + "propType": "bool", + "description": "是否为文本按钮", + "defaultValue": false + }, + { + "name": "warning", + "title": "warning", + "propType": "bool", + "description": "是否为警告按钮", + "defaultValue": false + }, + { + "name": "disabled", + "title": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "onMouseUp", + "propType": "func" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "icon", + "setter": "IconSetter", + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n target.nodes[0].children.import(value && {\"componentName\": \"Icon\", \"props\": {\"type\": value, \"style\": {\"marginRight\": 5}}}, true);\n }" + } + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文本内容", + "en_US": "content" + }, + "tip": "按钮文本内容" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + } + } + ] + } + }, + "category": "基础" + }, + { + "componentName": "Form.Submit", + "title": "提交按钮", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Form", + "main": "", + "destructuring": true, + "subName": "Submit" + }, + "props": [ + { + "name": "onClick", + "propType": "func", + "description": "点击提交后触发\n@param {Object} value 数据\n@param {Object} errors 错误数据\n@param {class} field 实例" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "children", + "title": "内容", + "propType": "string" + }, + { + "name": "icon", + "propType": "string", + "description": "自定义内联样式" + }, + { + "name": "type", + "title": "类型", + "propType": { + "type": "oneOf", + "value": ["primary", "secondary", "normal"] + }, + "description": "按钮的类型", + "defaultValue": "normal" + }, + { + "name": "size", + "title": "尺寸", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "按钮的尺寸", + "defaultValue": "medium" + }, + { + "name": "iconSize", + "title": "Icon 尺寸", + "propType": { + "type": "oneOf", + "value": ["xxs", "xs", "small", "medium", "large", "xl", "xxl", "xxxl"] + }, + "defaultValue": "small", + "description": "按钮中 Icon 的尺寸，用于替代 Icon 的默认大小" + }, + { + "name": "ghost", + "title": "ghost", + "propType": { + "type": "oneOf", + "value": [true, false, "light", "dark"] + }, + "description": "是否为幽灵按钮", + "defaultValue": false + }, + { + "name": "validate", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否校验", + "en_US": "Validate" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: validate | 说明: 是否校验/需要校验的 name 数组", + "en_US": "prop: validate | description: validate or validate array" + } + }, + "propType": { + "type": "oneOfType", + "value": [ + "bool", + { + "type": "instanceOf", + "value": "array" + } + ] + }, + "description": "是否校验/需要校验的 name 数组" + }, + { + "name": "loading", + "title": "loading", + "propType": "bool", + "description": "设置按钮的载入状态", + "defaultValue": false + }, + { + "name": "text", + "title": "text", + "propType": "bool", + "description": "是否为文本按钮", + "defaultValue": false + }, + { + "name": "warning", + "title": "warning", + "propType": "bool", + "description": "是否为警告按钮", + "defaultValue": false + }, + { + "name": "disabled", + "title": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "onMouseUp", + "propType": "func" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "disabled", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["ExpressionSetter", "BoolSetter"] + } + } + }, + { + "name": "icon", + "setter": "IconSetter", + "extraProps": { + "defaultValue": "", + "onChange": { + "type": "JSFunction", + "value": "(val, field, editor) => {\n field.nodes[0].children.import(val && {\"componentName\": \"Icon\", \"props\": {\"type\": val, \"style\": {\"marginRight\": 5}}}, true); //field.top.setPropValue('children', [{\"componentName\": \"Icon\", \"props\": {\"type\": val}}, (field.top.getPropValue('children') || []).slice(-1)]);\n}" + } + } + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文本内容", + "en_US": "content" + }, + "tip": "按钮文本内容" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + } + } + ] + } + }, + "experimental": { + "initials": [ + { + "name": "htmlType", + "initial": { + "type": "JSFunction", + "value": "() => \"submit\"" + } + } + ] + }, + "category": "基础" + }, + { + "componentName": "Form", + "title": "表单容器", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Form", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "inline", + "propType": "bool", + "description": "内联表单" + }, + { + "name": "size", + "title": { + "label": "Size", + "tip": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。\n@enumdesc 大, 中, 小" + }, + "propType": { + "type": "oneOf", + "value": ["large", "medium", "small"] + }, + "description": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。\n@enumdesc 大, 中, 小", + "defaultValue": "medium" + }, + { + "name": "fullWidth", + "propType": "bool", + "description": "单个 Item 中表单类组件宽度是否是100%" + }, + { + "name": "labelAlign", + "title": { + "label": "标签的位置", + "tip": "上, 左, 内" + }, + "propType": { + "type": "oneOf", + "value": ["top", "left", "inset"] + }, + "description": "标签的位置\n@enumdesc 上, 左, 内", + "defaultValue": "left" + }, + { + "name": "labelTextAlign", + "propType": { + "type": "oneOf", + "value": ["left", "right"] + }, + "description": "标签的左右对齐方式\n@enumdesc 左, 右" + }, + { + "name": "onSubmit", + "propType": "func", + "description": "form内有 `htmlType=\"submit\"` 的元素的时候会触发" + }, + { + "name": "className", + "propType": "string", + "description": "扩展class" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + }, + { + "name": "value", + "propType": { + "type": "oneOfType", + "value": ["Json", "JSExpression"] + }, + "description": "表单数值" + }, + { + "name": "onChange", + "propType": "func", + "description": "表单变化回调\n@param {Object} values 表单数据\n@param {Object} item 详细\n@param {String} item.name 变化的组件名\n@param {String} item.value 变化的数据\n@param {Object} item.field field 实例" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "device", + "propType": { + "type": "oneOf", + "value": ["phone", "tablet", "desktop"] + }, + "description": "预设屏幕宽度", + "defaultValue": "desktop" + }, + { + "name": "responsive", + "propType": "bool", + "description": "是否开启内置的响应式布局 （使用ResponsiveGrid）" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否开启预览态" + }, + { + "name": "field", + "propType": "any", + "description": "field 实例" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": [ + { + "name": "inline", + "title": { + "label": { + "type": "i18n", + "zh_CN": "内联表单", + "en_US": "Inline" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: inline | 说明: 内联表单", + "en_US": "prop: inline | description: inline form" + } + }, + "setter": "BoolSetter" + }, + { + "name": "fullWidth", + "title": { + "label": { + "type": "i18n", + "zh_CN": "宽度占满", + "en_US": "FullWidth" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: fullWidth | 说明: 单个 Item 中表单类组件宽度是否是100%", + "en_US": "prop: fullWidth | description: full width" + } + }, + "setter": "BoolSetter" + }, + { + "name": "isPreview", + "title": { + "label": { + "type": "i18n", + "zh_CN": "预览态", + "en_US": "Preview Mode" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: isPreview | 说明: 是否开启预览态", + "en_US": "prop: isPreview | description: preview mode" + } + }, + "setter": "BoolSetter", + "description": "是否开启预览态" + }, + { + "name": "field", + "title": { + "label": { + "type": "i18n", + "zh_CN": "Field 实例", + "en_US": "Field" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: field | 说明: 传入 Field 实例", + "en_US": "prop: field | description: field instance" + }, + "docUrl": "https://fusion.alibaba-inc.com/pc/component/basic/form#%E5%A4%8D%E6%9D%82%E5%8A%9F%E8%83%BD(Field)" + }, + "setter": { + "componentName": "ExpressionSetter" + } + }, + { + "name": "value", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单值", + "en_US": "value" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: value | 说明: 表单值", + "en_US": "prop: value | description: value instance" + } + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["JsonSetter", "ExpressionSetter"] + } + } + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。\n@enumdesc 大, 中, 小", + "en_US": "prop: size | description: size" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["large", "medium", "small"] + } + }, + "description": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。\n@enumdesc 大, 中, 小", + "defaultValue": "medium" + }, + { + "name": "labelAlign", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签位置", + "en_US": "Label Align" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: labelAlign | 说明: 标签的位置\n@enumdesc 上, 左, 内", + "en_US": "prop: labelAlign | description: label align" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["top", "left", "inset"] + } + }, + "defaultValue": "left" + }, + { + "name": "labelTextAlign", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签对齐", + "en_US": "Text Align" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: labelTextAlign | 说明: 标签的左右对齐方式\n@enumdesc 左, 右", + "en_US": "prop: labelTextAlign | description: label text align" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["left", "right"] + } + }, + "defaultValue": "left" + }, + { + "name": "device", + "title": { + "label": { + "type": "i18n", + "zh_CN": "设备", + "en_US": "Device" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: device | 说明: 预设屏幕宽度", + "en_US": "prop: device | description: device" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["phone", "tablet", "desktop"] + } + }, + "defaultValue": "desktop" + } + ], + "supports": { + "style": true, + "events": ["saveField", "onSubmit", "onChange"] + } + }, + "experimental": { + "callbacks": { + "onNodeAdd": { + "type": "JSFunction", + "value": "(dragment, currentNode) => {\n \n if (!dragment || dragment.componentName === \"Form.Item\") {\n return;\n }\n \n const layoutPNode = currentNode.document.createNode({\n componentName: \"Form.Item\",\n title: \"表单项\",\n props: {\n label: \"表单项: \"\n },\n children: [dragment.schema]\n });\n \n setTimeout(() => {\n if (!currentNode.getChildren().has(dragment)) {\n return;\n }\n const newNode = currentNode.document.createNode(Object.assign(layoutPNode.schema));\n currentNode.insertBefore(newNode, dragment, false);\n dragment.remove(false);\n newNode.getChildren().get(0).select();\n }, 1);\n }" + } + } + }, + "icon": "https://img.alicdn.com/tfs/TB1oH02u2b2gK0jSZK9XXaEgFXa-112-64.png", + "category": "内容" + }, + { + "componentName": "Group", + "title": "Group", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Nav", + "main": "", + "destructuring": true, + "subName": "Group" + }, + "props": [ + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "label", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "标签内容" + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "导航项和子导航" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "Icon", + "title": "图标", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Icon", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "type", + "propType": "string", + "description": "指定显示哪种图标" + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "图标尺寸", + "en_US": "Icon Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 指定图标大小", + "en_US": "prop: size | description: icon size" + } + }, + "propType": { + "type": "oneOfType", + "value": [ + { + "type": "oneOf", + "value": ["xxs", "xs", "small", "medium", "large", "xl", "xxl", "xxxl", "inherit"] + }, + "number" + ] + }, + "description": "指定图标大小", + "defaultValue": "medium" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "type", + "title": { + "label": { + "type": "i18n", + "zh_CN": "图标类型", + "en_US": "Icon" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: type | 说明: 图标类型", + "en_US": "prop: type | description: icon type" + } + }, + "setter": { + "componentName": "IconSetter", + "props": { + "hasClear": false + } + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Image", + "title": "图片", + "npm": { + "package": "@alifd/ali-lowcode-components", + "version": "latest", + "exportName": "Image", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "src", + "title": { + "label": { + "type": "i18n", + "zh_CN": "图片链接", + "en_US": "Image Address" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: src | 说明: 图片链接", + "en_US": "prop: src | description: image address" + } + }, + "propType": "string", + "defaultValue": "https://img.alicdn.com/tps/TB16TQvOXXXXXbiaFXXXXXXXXXX-120-120.svg" + }, + { + "name": "title", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标题", + "en_US": "Title" + } + }, + "propType": "string" + }, + { + "name": "alt", + "title": { + "label": { + "type": "i18n", + "zh_CN": "代替文本", + "en_US": "Alt" + } + }, + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "icon": "", + "category": "常用" + }, + { + "componentName": "Inner", + "title": "Inner", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Dialog", + "main": "", + "destructuring": true, + "subName": "Inner" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "title", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "footer", + "propType": { + "type": "oneOfType", + "value": [ + "bool", + { + "type": "instanceOf", + "value": "node" + } + ] + } + }, + { + "name": "footerAlign", + "propType": { + "type": "oneOf", + "value": ["left", "center", "right"] + }, + "defaultValue": "right" + }, + { + "name": "footerActions", + "propType": { + "type": "instanceOf", + "value": "array" + }, + "defaultValue": ["ok", "cancel"] + }, + { + "name": "onOk", + "propType": "func" + }, + { + "name": "onCancel", + "propType": "func" + }, + { + "name": "okProps", + "propType": "object" + }, + { + "name": "cancelProps", + "propType": "object" + }, + { + "name": "closeable", + "propType": "bool", + "defaultValue": true + }, + { + "name": "onClose", + "propType": "func" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "role", + "propType": "string", + "defaultValue": "dialog" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "height", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "Input.Group", + "title": "Input.Group", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Input", + "main": "", + "destructuring": true, + "subName": "Group" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "description": "样式前缀", + "defaultValue": "next-" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "addonBefore", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "输入框前附加内容" + }, + { + "name": "addonBeforeClassName", + "propType": "string", + "description": "输入框前附加内容css" + }, + { + "name": "addonAfter", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "输入框后附加内容" + }, + { + "name": "addonAfterClassName", + "propType": "string", + "description": "输入框后额外css" + }, + { + "name": "rtl", + "propType": "bool", + "description": "rtl" + } + ], + "category": "基础" + }, + { + "componentName": "Input.Password", + "title": "密码框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Input", + "main": "", + "destructuring": true, + "subName": "Password" + }, + "props": [ + { + "name": "name", + "propType": "string" + }, + { + "name": "showToggle", + "propType": "bool", + "description": "是否展示切换按钮", + "defaultValue": true + }, + { + "name": "label", + "propType": "string", + "title": "标签文案", + "description": "label" + }, + { + "name": "hasClear", + "propType": "bool", + "description": "是否出现清除按钮" + }, + { + "name": "state", + "title": "状态", + "propType": { + "type": "oneOf", + "value": ["error", "loading", "success", "warning"] + }, + "description": "状态\n@enumdesc 错误, 校验中, 成功, 警告" + }, + { + "name": "size", + "title": "尺寸", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "尺寸\n@enumdesc 小, 中, 大", + "defaultValue": "medium" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "maxLength", + "propType": "number", + "description": "最大长度" + }, + { + "name": "hasLimitHint", + "propType": "bool", + "description": "是否展现最大长度样式" + }, + { + "name": "cutString", + "propType": "bool", + "description": "是否截断超出字符串" + }, + { + "name": "readOnly", + "propType": "bool", + "description": "是否只读" + }, + { + "name": "trim", + "propType": "bool", + "description": "onChange返回会自动去除头尾空字符" + }, + { + "name": "placeholder", + "propType": "string", + "description": "输入提示" + }, + { + "name": "hasBorder", + "propType": "bool", + "description": "是否有边框" + }, + { + "name": "onPressEnter", + "propType": "func", + "description": "按下回车的回调" + }, + { + "name": "onClear", + "propType": "func" + }, + { + "name": "onChange", + "propType": "func" + }, + { + "name": "onKeyDown", + "propType": "func" + }, + { + "name": "onFocus", + "propType": "func" + }, + { + "name": "onBlur", + "propType": "func" + }, + { + "name": "hint", + "title": "Icon 水印", + "propType": "string", + "description": "水印 (Icon的type类型，和hasClear占用一个地方)" + }, + { + "name": "innerBefore", + "propType": "string", + "description": "文字前附加内容" + }, + { + "name": "innerAfter", + "propType": "string", + "description": "文字后附加内容" + }, + { + "name": "addonBefore", + "propType": "string", + "description": "输入框前附加内容" + }, + { + "name": "addonAfter", + "propType": "string", + "description": "输入框后附加内容" + }, + { + "name": "addonTextBefore", + "propType": "string", + "description": "输入框前附加文字" + }, + { + "name": "addonTextAfter", + "propType": "string", + "description": "输入框后附加文字" + }, + { + "name": "autoFocus", + "propType": "bool", + "description": "自动聚焦" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": [ + { + "name": "label", + "setter": "StringSetter", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签文本", + "en_US": "Label" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: label | 说明: 标签文本内容", + "en_US": "prop: label | description: label content" + } + }, + "description": "label" + }, + { + "name": "maxLength", + "title": { + "label": { + "type": "i18n", + "zh_CN": "最大长度", + "en_US": "MaxLength" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: maxLength | 说明: 最大长度", + "en_US": "prop: maxLength | description: max length" + } + }, + "setter": "NumberSetter", + "description": "最大长度" + }, + { + "name": "placeholder", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入提示", + "en_US": "Placeholder" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: placeholder | 说明: 输入提示", + "en_US": "prop: placeholder | description: placeholder" + } + }, + "setter": "StringSetter" + }, + { + "name": "state", + "title": { + "label": { + "type": "i18n", + "zh_CN": "状态", + "en_US": "State" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: state | 说明: 状态\n@enumdesc 错误, 校验中, 成功, 警告", + "en_US": "prop: state | description: input state" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["error", "loading", "success", "warning"] + } + } + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 尺寸\n@enumdesc 小, 中, 大", + "en_US": "prop: size | description: size" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "defaultValue": "medium" + }, + { + "name": "showToggle", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示切换", + "en_US": "Show Togger" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: showToggle | 说明: 是否展示切换按钮", + "en_US": "prop: showToggle | description: show togger icon" + } + }, + "setter": "BoolSetter", + "defaultValue": true + }, + { + "name": "hasClear", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示清除", + "en_US": "Show Clear" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasClear | 说明: 是否出现清除按钮", + "en_US": "prop: hasClear | description: show clear icon" + } + }, + "setter": "BoolSetter", + "description": "是否出现清除按钮" + }, + { + "name": "disabled", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否禁用", + "en_US": "Disabled" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: disabled | 说明: 是否被禁用", + "en_US": "prop: disabled | description: disabled" + } + }, + "setter": "BoolSetter", + "description": "是否禁用" + }, + { + "name": "hasLimitHint", + "title": { + "label": { + "type": "i18n", + "zh_CN": "展示限制", + "en_US": "ShowLimit" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasLimitHint | 说明: 是否展现最大长度样式", + "en_US": "prop: hasLimitHint | description: hasLimitHint" + } + }, + "setter": "BoolSetter", + "description": "是否展现最大长度样式" + }, + { + "name": "cutString", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否截断", + "en_US": "Cut Off" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: cutString | 说明: 是否截断超出字符串", + "en_US": "prop: cutString | description: whether cut off string" + } + }, + "setter": "BoolSetter", + "description": "是否截断超出字符串" + }, + { + "name": "readOnly", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否只读", + "en_US": "ReadOnly" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: readOnly | 说明: 是否只读", + "en_US": "prop: readOnly | description: ReadOnly" + } + }, + "setter": "BoolSetter", + "description": "是否只读" + }, + { + "name": "trim", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否 Trim", + "en_US": "Trim" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: trim | 说明: onChange返回会自动去除头尾空字符", + "en_US": "prop: trim | description: whether trim when onChange called" + } + }, + "setter": "BoolSetter" + }, + { + "name": "hasBorder", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示边框", + "en_US": "ShowBorder" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasBorder | 说明: 是否有边框", + "en_US": "prop: hasBorder | description: HasBorder" + } + }, + "setter": "BoolSetter" + }, + { + "name": "autoFocus", + "title": { + "label": { + "type": "i18n", + "zh_CN": "自动聚焦", + "en_US": "Auto Focus" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: autoFocus | 说明: 自动聚焦", + "en_US": "prop: autoFocus | description: autoFocus" + } + }, + "setter": "BoolSetter", + "description": "自动聚焦" + }, + { + "name": "hint", + "title": { + "label": { + "type": "i18n", + "zh_CN": "Icon 水印", + "en_US": "IconHint" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hint | 说明: Icon 水印", + "en_US": "prop: hint | description: Icon hint" + } + }, + "setter": { + "componentName": "IconSetter" + } + }, + { + "name": "innerBefore", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文字前附加内容", + "en_US": "Inner Before" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: innerBefore | 说明: 文字前附加内容", + "en_US": "prop: innerBefore | description: innerBefore" + } + }, + "setter": "StringSetter" + }, + { + "name": "innerAfter", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文字后附加内容", + "en_US": "Inner After" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: innerAfter | 说明: 文字后附加内容", + "en_US": "prop: innerAfter | description: innerAfter" + } + }, + "setter": "StringSetter" + }, + { + "name": "addonBefore", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入框前附加内容", + "en_US": "Addon Before" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: addonBefore | 说明: 输入框前附加内容", + "en_US": "prop: addonBefore | description: addonBefore" + } + }, + "setter": "StringSetter" + }, + { + "name": "addonAfter", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入框后附加内容", + "en_US": "Addon After" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: addonAfter | 说明: 输入框后附加内容", + "en_US": "prop: addonAfter | description: addonAfter" + } + }, + "setter": "StringSetter" + }, + { + "name": "addonTextBefore", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入框前附加文字", + "en_US": "Text Before" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: addonTextBefore | 说明: 输入框前附加文字", + "en_US": "prop: addonTextBefore | description: addonTextBefore" + } + }, + "setter": "StringSetter" + }, + { + "name": "addonTextAfter", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入框后附加文字", + "en_US": "Text After" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: addonTextAfter | 说明: 输入框后附加文字", + "en_US": "prop: addonTextAfter | description: addonTextAfter" + } + }, + "setter": "StringSetter" + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ], + "supports": { + "style": true, + "events": ["onPressEnter", "onClear", "onChange", "onKeyDown", "onFocus", "onBlur"] + } + }, + "category": "基础" + }, + { + "componentName": "Input.TextArea", + "title": "多行文本框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Input", + "main": "", + "destructuring": true, + "subName": "TextArea" + }, + "props": [ + { + "name": "hasBorder", + "propType": "bool", + "description": "是否有边框", + "defaultValue": true + }, + { + "name": "state", + "propType": { + "type": "oneOf", + "value": ["error", "warning"] + }, + "description": "状态\n@enumdesc 错误" + }, + { + "name": "autoHeight", + "propType": "bool", + "description": "自动高度 true / {minRows: 2, maxRows: 4}", + "defaultValue": false + }, + { + "name": "rows", + "propType": "number", + "description": "多行文本框高度
(不要直接用height设置多行文本框的高度, ie9 10会有兼容性问题)", + "defaultValue": 4 + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态", + "defaultValue": false + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "onClear", + "propType": "func" + }, + { + "name": "onChange", + "propType": "func" + }, + { + "name": "onKeyDown", + "propType": "func" + }, + { + "name": "onFocus", + "propType": "func" + }, + { + "name": "onBlur", + "propType": "func" + } + ], + "configure": { + "props": [ + { + "name": "rows", + "title": { + "label": { + "type": "i18n", + "zh_CN": "行数", + "en_US": "Rows" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: rows | 说明: 多行文本框高度
(不要直接用height设置多行文本框的高度, ie9 10会有兼容性问题)", + "en_US": "prop: rows | description: row numbers" + } + }, + "setter": "NumberSetter", + "defaultValue": 4 + }, + { + "name": "maxLength", + "title": { + "label": { + "type": "i18n", + "zh_CN": "最大长度", + "en_US": "MaxLength" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: maxLength | 说明: 最大长度", + "en_US": "prop: maxLength | description: max length" + } + }, + "setter": "NumberSetter", + "description": "最大长度" + }, + { + "name": "placeholder", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入提示", + "en_US": "Placeholder" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: placeholder | 说明: 输入提示", + "en_US": "prop: placeholder | description: placeholder" + } + }, + "setter": "StringSetter" + }, + { + "name": "state", + "title": { + "label": { + "type": "i18n", + "zh_CN": "状态", + "en_US": "State" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: state | 说明: 状态\n@enumdesc 错误", + "en_US": "prop: state | description: input state" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["error", "warning"] + } + } + }, + { + "name": "autoHeight", + "title": { + "label": { + "type": "i18n", + "zh_CN": "自动高度", + "en_US": "Auto Height" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: autoHeight | 说明: 自动高度 true / {minRows: 2, maxRows: 4}", + "en_US": "prop: autoHeight | description: auto height" + } + }, + "setter": "BoolSetter", + "defaultValue": false + }, + { + "name": "isPreview", + "title": { + "label": { + "type": "i18n", + "zh_CN": "预览态", + "en_US": "Preview" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: isPreview | 说明: 是否为预览态", + "en_US": "prop: isPreview | description: preview" + } + }, + "setter": "BoolSetter", + "defaultValue": false + }, + { + "name": "disabled", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否禁用", + "en_US": "Disabled" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: disabled | 说明: 是否被禁用", + "en_US": "prop: disabled | description: disabled" + } + }, + "setter": "BoolSetter", + "description": "是否禁用" + }, + { + "name": "hasLimitHint", + "title": { + "label": { + "type": "i18n", + "zh_CN": "展示限制", + "en_US": "ShowLimit" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasLimitHint | 说明: 是否展现最大长度样式", + "en_US": "prop: hasLimitHint | description: hasLimitHint" + } + }, + "setter": "BoolSetter", + "description": "是否展现最大长度样式" + }, + { + "name": "cutString", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否截断", + "en_US": "Cut Off" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: cutString | 说明: 是否截断超出字符串", + "en_US": "prop: cutString | description: whether cut off string" + } + }, + "setter": "BoolSetter", + "description": "是否截断超出字符串" + }, + { + "name": "readOnly", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否只读", + "en_US": "ReadOnly" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: readOnly | 说明: 是否只读", + "en_US": "prop: readOnly | description: ReadOnly" + } + }, + "setter": "BoolSetter", + "description": "是否只读" + }, + { + "name": "trim", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否 Trim", + "en_US": "Trim" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: trim | 说明: onChange返回会自动去除头尾空字符", + "en_US": "prop: trim | description: whether trim when onChange called" + } + }, + "setter": "BoolSetter" + }, + { + "name": "hasBorder", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示边框", + "en_US": "ShowBorder" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasBorder | 说明: 是否有边框", + "en_US": "prop: hasBorder | description: HasBorder" + } + }, + "setter": "BoolSetter" + }, + { + "name": "autoFocus", + "title": { + "label": { + "type": "i18n", + "zh_CN": "自动聚焦", + "en_US": "Auto Focus" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: autoFocus | 说明: 自动聚焦", + "en_US": "prop: autoFocus | description: autoFocus" + } + }, + "setter": "BoolSetter", + "description": "自动聚焦" + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ], + "supports": { + "style": true, + "events": ["onPressEnter", "onClear", "onChange", "onKeyDown", "onFocus", "onBlur"] + } + }, + "category": "基础" + }, + { + "componentName": "Input", + "title": "输入框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Input", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "label", + "propType": "string", + "title": "标签文案", + "description": "label" + }, + { + "name": "id", + "propType": "string", + "description": "ID" + }, + { + "name": "name", + "propType": "string" + }, + { + "name": "hasClear", + "propType": "bool", + "description": "是否出现清除按钮" + }, + { + "name": "state", + "title": "状态", + "propType": { + "type": "oneOf", + "value": ["error", "loading", "success", "warning"] + }, + "description": "状态\n@enumdesc 错误, 校验中, 成功, 警告" + }, + { + "name": "size", + "title": "尺寸", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "尺寸\n@enumdesc 小, 中, 大", + "defaultValue": "medium" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "maxLength", + "propType": "number", + "description": "最大长度" + }, + { + "name": "hasLimitHint", + "propType": "bool", + "description": "是否展现最大长度样式" + }, + { + "name": "cutString", + "propType": "bool", + "description": "是否截断超出字符串" + }, + { + "name": "readOnly", + "propType": "bool", + "description": "是否只读" + }, + { + "name": "trim", + "propType": "bool", + "description": "onChange返回会自动去除头尾空字符" + }, + { + "name": "placeholder", + "propType": "string", + "description": "输入提示" + }, + { + "name": "hasBorder", + "propType": "bool", + "description": "是否有边框" + }, + { + "name": "onPressEnter", + "propType": "func", + "description": "按下回车的回调" + }, + { + "name": "onClear", + "propType": "func" + }, + { + "name": "onChange", + "propType": "func" + }, + { + "name": "onKeyDown", + "propType": "func" + }, + { + "name": "onFocus", + "propType": "func" + }, + { + "name": "onBlur", + "propType": "func" + }, + { + "name": "hint", + "title": "Icon 水印", + "propType": "string", + "description": "水印 (Icon的type类型，和hasClear占用一个地方)" + }, + { + "name": "innerBefore", + "propType": "string", + "description": "文字前附加内容" + }, + { + "name": "innerAfter", + "propType": "string", + "description": "文字后附加内容" + }, + { + "name": "addonBefore", + "propType": "string", + "description": "输入框前附加内容" + }, + { + "name": "addonAfter", + "propType": "string", + "description": "输入框后附加内容" + }, + { + "name": "addonTextBefore", + "propType": "string", + "description": "输入框前附加文字" + }, + { + "name": "addonTextAfter", + "propType": "string", + "description": "输入框后附加文字" + }, + { + "name": "autoFocus", + "propType": "bool", + "description": "自动聚焦" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": [ + { + "name": "label", + "setter": "StringSetter", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签文本", + "en_US": "Label" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: label | 说明: 标签文本内容", + "en_US": "prop: label | description: label content" + } + }, + "description": "label" + }, + { + "name": "placeholder", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入提示", + "en_US": "Placeholder" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: placeholder | 说明: 输入提示", + "en_US": "prop: placeholder | description: placeholder" + } + }, + "setter": "StringSetter" + }, + { + "name": "state", + "title": { + "label": { + "type": "i18n", + "zh_CN": "状态", + "en_US": "State" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: state | 说明: 状态\n@enumdesc 错误, 校验中, 成功, 警告", + "en_US": "prop: state | description: input state" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["error", "loading", "success", "warning"] + } + } + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 尺寸\n@enumdesc 小, 中, 大", + "en_US": "prop: size | description: size" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "defaultValue": "medium" + }, + { + "name": "maxLength", + "title": { + "label": { + "type": "i18n", + "zh_CN": "最大长度", + "en_US": "MaxLength" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: maxLength | 说明: 最大长度", + "en_US": "prop: maxLength | description: max length" + } + }, + "setter": "NumberSetter", + "description": "最大长度" + }, + { + "name": "hasClear", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示清除", + "en_US": "Show Clear" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasClear | 说明: 是否出现清除按钮", + "en_US": "prop: hasClear | description: show clear icon" + } + }, + "setter": "BoolSetter", + "description": "是否出现清除按钮" + }, + { + "name": "disabled", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否禁用", + "en_US": "Disabled" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: disabled | 说明: 是否被禁用", + "en_US": "prop: disabled | description: disabled" + } + }, + "setter": "BoolSetter", + "description": "是否禁用" + }, + { + "name": "hasLimitHint", + "title": { + "label": { + "type": "i18n", + "zh_CN": "展示限制", + "en_US": "ShowLimit" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasLimitHint | 说明: 是否展现最大长度样式", + "en_US": "prop: hasLimitHint | description: hasLimitHint" + } + }, + "setter": "BoolSetter", + "description": "是否展现最大长度样式" + }, + { + "name": "cutString", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否截断", + "en_US": "Cut Off" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: cutString | 说明: 是否截断超出字符串", + "en_US": "prop: cutString | description: whether cut off string" + } + }, + "setter": "BoolSetter", + "description": "是否截断超出字符串" + }, + { + "name": "readOnly", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否只读", + "en_US": "ReadOnly" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: readOnly | 说明: 是否只读", + "en_US": "prop: readOnly | description: ReadOnly" + } + }, + "setter": "BoolSetter", + "description": "是否只读" + }, + { + "name": "trim", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否 Trim", + "en_US": "Trim" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: trim | 说明: onChange返回会自动去除头尾空字符", + "en_US": "prop: trim | description: whether trim when onChange called" + } + }, + "setter": "BoolSetter" + }, + { + "name": "hasBorder", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示边框", + "en_US": "ShowBorder" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasBorder | 说明: 是否有边框", + "en_US": "prop: hasBorder | description: HasBorder" + } + }, + "setter": "BoolSetter" + }, + { + "name": "autoFocus", + "title": { + "label": { + "type": "i18n", + "zh_CN": "自动聚焦", + "en_US": "Auto Focus" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: autoFocus | 说明: 自动聚焦", + "en_US": "prop: autoFocus | description: autoFocus" + } + }, + "setter": "BoolSetter", + "description": "自动聚焦" + }, + { + "name": "hint", + "title": { + "label": { + "type": "i18n", + "zh_CN": "Icon 水印", + "en_US": "IconHint" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hint | 说明: Icon 水印", + "en_US": "prop: hint | description: Icon hint" + } + }, + "setter": { + "componentName": "IconSetter" + } + }, + { + "name": "innerBefore", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文字前附加内容", + "en_US": "Inner Before" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: innerBefore | 说明: 文字前附加内容", + "en_US": "prop: innerBefore | description: innerBefore" + } + }, + "setter": "StringSetter" + }, + { + "name": "innerAfter", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文字后附加内容", + "en_US": "Inner After" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: innerAfter | 说明: 文字后附加内容", + "en_US": "prop: innerAfter | description: innerAfter" + } + }, + "setter": "StringSetter" + }, + { + "name": "addonBefore", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入框前附加内容", + "en_US": "Addon Before" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: addonBefore | 说明: 输入框前附加内容", + "en_US": "prop: addonBefore | description: addonBefore" + } + }, + "setter": "StringSetter" + }, + { + "name": "addonAfter", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入框后附加内容", + "en_US": "Addon After" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: addonAfter | 说明: 输入框后附加内容", + "en_US": "prop: addonAfter | description: addonAfter" + } + }, + "setter": "StringSetter" + }, + { + "name": "addonTextBefore", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入框前附加文字", + "en_US": "Text Before" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: addonTextBefore | 说明: 输入框前附加文字", + "en_US": "prop: addonTextBefore | description: addonTextBefore" + } + }, + "setter": "StringSetter" + }, + { + "name": "addonTextAfter", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入框后附加文字", + "en_US": "Text After" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: addonTextAfter | 说明: 输入框后附加文字", + "en_US": "prop: addonTextAfter | description: addonTextAfter" + } + }, + "setter": "StringSetter" + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ], + "supports": { + "style": true, + "events": ["onPressEnter", "onClear", "onChange", "onKeyDown", "onFocus", "onBlur"] + } + }, + "icon": "", + "category": "内容" + }, + { + "title": "折线图", + "category": "常用图表(试验)", + "componentName": "LineChart", + "icon": "https://unpkg.alibaba-inc.com/@ali/vc-bizcharts@1.1.4/src/vc-line/logo.svg", + "npm": { + "package": "bizcharts", + "version": "4.0.14", + "exportName": "LineChart", + "main": "", + "destructuring": true, + "subName": "" + }, + "configure": { + "props": [ + { + "name": "title", + "title": "标题", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "折线图标题", + "tip": "标题文本", + "supportVariable": true + }, + { + "name": "description", + "title": "描述", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "折线图描述", + "tip": "描述文本", + "supportVariable": true + }, + { + "name": "xField", + "title": "横坐标", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "year", + "tip": "标题文本", + "supportVariable": true + }, + { + "name": "yField", + "title": "纵坐标", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "value", + "tip": "描述文本", + "supportVariable": true + }, + { + "name": "data", + "title": "图表数据", + "tip": "配置图表数据", + "setter": "JsonSetter" + } + ], + "supports": { + "style": true + } + } + }, + { + "title": "折线", + "category": "常用图表(试验)", + "componentName": "Line", + "icon": "https://unpkg.alibaba-inc.com/@ali/vc-bizcharts@1.1.4/src/vc-line/logo.svg", + "npm": { + "package": "@ant-design/charts", + "version": "4.0.14", + "exportName": "Line", + "main": "", + "destructuring": true, + "subName": "" + }, + "configure": { + "props": [ + { + "name": "title", + "title": "标题", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "2018年爆款商品A销售趋势", + "tip": "标题文本", + "supportVariable": true + }, + { + "name": "description", + "title": "描述", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "一达通进出口业务", + "tip": "描述文本", + "supportVariable": true + }, + { + "name": "xField", + "title": "横坐标", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "year", + "tip": "标题文本", + "supportVariable": true + }, + { + "name": "yField", + "title": "纵坐标", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "value", + "tip": "描述文本", + "supportVariable": true + }, + { + "name": "data", + "title": "图表数据", + "tip": "配置图表数据", + "setter": "JsonSetter" + } + ], + "supports": { + "style": true + } + } + }, + { + "title": "水位图", + "category": "常用图表(试验)", + "componentName": "LiquidChart", + "icon": "https://unpkg.alibaba-inc.com/@ali/vc-bizcharts@1.1.4/src/vc-LiquidChart/logo.svg", + "npm": { + "package": "bizcharts", + "version": "4.0.14", + "exportName": "LiquidChart", + "main": "", + "destructuring": true, + "subName": "" + }, + "configure": { + "props": [ + { + "name": "title", + "title": "标题", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "水位图标题", + "tip": "标题文本", + "supportVariable": true + }, + { + "name": "description", + "title": "描述", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "水位图描述", + "tip": "描述文本", + "supportVariable": true + }, + { + "name": "dataSource", + "title": "图表数据", + "type": "group", + "display": "block", + "tip": "配置图表数据", + "items": [ + { + "name": "min", + "title": "最小值", + "setter": "NumberSetter" + }, + { + "name": "max", + "title": "最大值", + "setter": "NumberSetter" + }, + { + "name": "value", + "title": "值", + "setter": "NumberSetter" + } + ] + } + ], + "supports": { + "style": true + } + } + }, + { + "componentName": "List.Item", + "title": "列表项", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "List", + "main": "", + "destructuring": true, + "subName": "Item" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "title", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + } + }, + { + "name": "description", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + } + }, + { + "name": "media", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + } + }, + { + "name": "extra", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + } + } + ], + "icon": "", + "category": "内容" + }, + { + "componentName": "List", + "title": "列表", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "List", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "header", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + } + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium"] + } + }, + { + "name": "footer", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + } + }, + { + "name": "divider", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + } + } + ], + "configure": { + "component": { + "isContainer": true + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Loading", + "title": "加载", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Loading", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "tip", + "propType": "string", + "description": "自定义内容" + }, + { + "name": "tipAlign", + "propType": { + "type": "oneOf", + "value": ["right", "bottom"] + }, + "description": "自定义内容位置", + "defaultValue": "bottom" + }, + { + "name": "visible", + "propType": "bool", + "description": "loading 状态, 默认 true", + "defaultValue": true + }, + { + "name": "onVisibleChange", + "propType": "func" + }, + { + "name": "className", + "propType": "string", + "description": "自定义class" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["large", "medium"] + }, + "description": "设置动画尺寸\n@description 仅仅对默认动画效果起作用\n@enumdesc 大号, 中号", + "defaultValue": "large" + }, + { + "name": "color", + "propType": "string", + "description": "动画颜色" + }, + { + "name": "fullScreen", + "propType": "bool", + "description": "全屏展示" + }, + { + "name": "inline", + "title": "inline", + "propType": "bool", + "description": "should loader be displayed inline", + "defaultValue": true + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": [ + { + "name": "tip", + "title": { + "label": "自定义内容", + "tip": "" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + } + }, + { + "name": "tipAlign", + "title": { + "label": "内容位置", + "tip": "自定义内容位置" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "动画右边", + "value": "right" + }, + { + "title": "动画下面", + "value": "bottom" + } + ] + } + } + }, + { + "name": "visible", + "title": { + "label": "是否显示" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + } + }, + { + "name": "size", + "title": { + "label": "动画尺寸" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "large", + "value": "large" + }, + { + "title": "medium", + "value": "medium" + } + ] + } + } + }, + { + "name": "color", + "title": "动画颜色", + "setter": { + "componentName": "ColorSetter" + } + }, + { + "name": "fullScreen", + "title": "全屏显示", + "setter": "BoolSetter" + }, + { + "name": "inline", + "title": "行内显示", + "setter": "BoolSetter" + } + ], + "supports": { + "style": true, + "events": ["onVisibleChange"] + } + }, + "icon": "", + "category": "反馈" + }, + { + "componentName": "MenuButton", + "title": "菜单按钮", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "MenuButton", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "label", + "propType": "string", + "description": "按钮上的文本内容" + }, + { + "name": "autoWidth", + "propType": "bool", + "description": "弹层是否与按钮宽度相同", + "defaultValue": true + }, + { + "name": "popupTriggerType", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "弹层触发方式", + "defaultValue": "click" + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器" + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层展开状态" + }, + { + "name": "defaultVisible", + "propType": "bool", + "description": "弹层默认是否展开" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层在显示和隐藏触发的事件" + }, + { + "name": "popupStyle", + "propType": "object", + "description": "弹层自定义样式" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹层自定义样式类" + }, + { + "name": "popupProps", + "propType": "object", + "description": "弹层属性透传" + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "defaultSelectedKeys", + "propType": { + "type": "arrayOf", + "value": "string" + }, + "description": "默认激活的菜单项（用法同 Menu 非受控）", + "defaultValue": [] + }, + { + "name": "selectedKeys", + "propType": { + "type": "arrayOf", + "value": "string" + }, + "description": "激活的菜单项（用法同 Menu 受控）" + }, + { + "name": "selectMode", + "propType": { + "type": "oneOf", + "value": ["single", "multiple"] + }, + "description": "菜单的选择模式，同 Menu" + }, + { + "name": "onItemClick", + "propType": "func", + "description": "点击菜单项后的回调，同 Menu" + }, + { + "name": "onSelect", + "propType": "func", + "description": "选择菜单后的回调，同 Menu" + }, + { + "name": "menuProps", + "propType": "object", + "description": "菜单属性透传" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "popupContainer", + "title": { + "label": "弹层容器", + "tip": "指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数()。" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "FunctionSetter"] + } + } + } + ] + } + }, + "icon": "", + "category": "常用" + }, + { + "componentName": "Menu.Divider", + "title": "菜单分隔线", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Menu", + "main": "", + "destructuring": true, + "subName": "Divider" + }, + "props": [ + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": false, + "nestingRule": { + "parentWhitelist": ["Menu", "SubMenu", "Menu.Group", "MenuButton"] + } + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Menu.Group", + "title": "菜单组", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Menu", + "main": "", + "destructuring": true, + "subName": "Group" + }, + "props": [ + { + "name": "label", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "标签内容" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["Menu", "SubMenu", "Menu.Group", "MenuButton"] + } + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Menu.Item", + "title": "菜单项", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Menu", + "main": "", + "destructuring": true, + "subName": "Item" + }, + "props": [ + { + "name": "key", + "propType": "string", + "description": "菜单项标识符" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "helper", + "propType": "node", + "description": "帮助文本" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["Menu", "SubMenu", "Menu.Group", "MenuButton"] + } + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Menu.PopupItem", + "title": "自定义弹出内容", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Menu", + "main": "", + "destructuring": true, + "subName": "PopupItem" + }, + "props": [ + { + "name": "key", + "propType": "string", + "description": "菜单项标识符" + }, + { + "name": "label", + "propType": "node", + "description": "标签内容" + }, + { + "name": "children", + "propType": "node", + "description": "自定义弹层内容" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["Menu", "SubMenu", "Menu.Group", "MenuButton"] + } + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Menu", + "title": "菜单", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Menu", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "onItemClick", + "propType": "func", + "description": "点击菜单项触发的回调函数\n@param {String} key 点击的菜单项的 key 值\n@param {Object} item 点击的菜单项对象\n@param {Object} event 点击的事件对象" + }, + { + "name": "defaultOpenAll", + "propType": "bool", + "description": "初始展开所有的子菜单，只在 mode 设置为 'inline' 以及 openMode 设置为 'multiple' 下生效，优先级高于 defaultOpenKeys", + "defaultValue": false + }, + { + "name": "onOpen", + "propType": "func", + "description": "打开或关闭子菜单触发的回调函数\n@param {String} key 打开的所有子菜单的 key 值\n@param {Object} extra 额外参数\n@param {String} extra.key 当前操作子菜单的 key 值\n@param {Boolean} extra.open 是否是打开" + }, + { + "name": "mode", + "propType": { + "type": "oneOf", + "value": ["inline", "popup"] + }, + "description": "子菜单打开的模式", + "defaultValue": "inline" + }, + { + "name": "triggerType", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "子菜单打开的触发行为", + "defaultValue": "click" + }, + { + "name": "openMode", + "propType": { + "type": "oneOf", + "value": ["single", "multiple"] + }, + "description": "展开内连子菜单的模式，同时可以展开一个子菜单还是多个子菜单，该属性仅在 mode 为 inline 时生效", + "defaultValue": "multiple" + }, + { + "name": "inlineIndent", + "propType": "number", + "description": "内连子菜单缩进距离", + "defaultValue": 20 + }, + { + "name": "inlineArrowDirection", + "propType": { + "type": "oneOf", + "value": ["down", "right"] + }, + "defaultValue": "down" + }, + { + "name": "popupAutoWidth", + "propType": "bool", + "description": "是否自动让弹层的宽度和菜单项保持一致，如果弹层的宽度比菜单项小则和菜单项保持一致，如果宽度大于菜单项则不做处理", + "defaultValue": false + }, + { + "name": "popupAlign", + "propType": { + "type": "oneOf", + "value": ["follow", "outside"] + }, + "description": "弹层的对齐方式", + "defaultValue": "follow" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹出子菜单自定义 className" + }, + { + "name": "onSelect", + "propType": "func", + "description": "选中或取消选中菜单项触发的回调函数\n@param {Array} selectedKeys 选中的所有菜单项的值\n@param {Object} item 选中或取消选中的菜单项\n@param {Object} extra 额外参数\n@param {Boolean} extra.select 是否是选中\n@param {Array} extra.key 菜单项的 key\n@param {Object} extra.label 菜单项的文本\n@param {Array} extra.keyPath 菜单项 key 的路径" + }, + { + "name": "selectMode", + "propType": { + "type": "oneOf", + "value": ["single", "multiple"] + }, + "description": "选中模式，单选还是多选，默认无值，不可选" + }, + { + "name": "shallowSelect", + "propType": "bool", + "description": "是否只能选择第一层菜单项（不能选择子菜单中的菜单项）", + "defaultValue": false + }, + { + "name": "hasSelectedIcon", + "propType": "bool", + "description": "是否显示选中图标，如果设置为 false 需配合配置平台设置选中时的背景色以示区分", + "defaultValue": true + }, + { + "name": "labelToggleChecked", + "propType": "bool", + "defaultValue": true + }, + { + "name": "isSelectIconRight", + "propType": "bool", + "description": "是否将选中图标居右，仅当 hasSelectedIcon 为true 时生效。\n注意：SubMenu 上的选中图标一直居左，不受此API控制", + "defaultValue": false + }, + { + "name": "direction", + "propType": { + "type": "oneOf", + "value": ["ver", "hoz"] + }, + "description": "菜单第一层展示方向", + "defaultValue": "ver" + }, + { + "name": "hozAlign", + "propType": { + "type": "oneOf", + "value": ["left", "right"] + }, + "description": "横向菜单条 item 和 footer 的对齐方向，在 direction 设置为 'hoz' 并且 header 存在时生效", + "defaultValue": "left" + }, + { + "name": "hozInLine", + "propType": "bool", + "description": "横向菜单模式下，是否维持在一行，即超出一行折叠成 SubMenu 显示， 仅在 direction='hoz' mode='popup' 时生效", + "defaultValue": false + }, + { + "name": "header", + "propType": "node", + "description": "自定义菜单头部" + }, + { + "name": "footer", + "propType": "node", + "description": "自定义菜单尾部" + }, + { + "name": "autoFocus", + "propType": "bool", + "description": "是否自动获得焦点", + "defaultValue": false + }, + { + "name": "focusedKey", + "propType": "string", + "description": "当前获得焦点的子菜单或菜单项 key 值" + }, + { + "name": "focusable", + "propType": "bool", + "defaultValue": true + }, + { + "name": "onItemFocus", + "propType": "func" + }, + { + "name": "onBlur", + "propType": "func" + }, + { + "name": "embeddable", + "propType": "bool", + "description": "是否开启嵌入式模式，一般用于Layout的布局中，开启后没有默认背景、外层border、box-shadow，可以配合`` 自定义高度", + "defaultValue": false + }, + { + "name": "onItemKeyDown", + "propType": "func" + }, + { + "name": "expandAnimation", + "propType": "bool", + "defaultValue": true + }, + { + "name": "itemClassName", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "openKeys", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "arrayOf", + "value": "string" + } + ] + }, + "description": "当前打开的子菜单的 key 值" + }, + { + "name": "defaultOpenKeys", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "arrayOf", + "value": "string" + } + ] + }, + "description": "初始打开的子菜单的 key 值", + "defaultValue": [] + }, + { + "name": "selectedKeys", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "arrayOf", + "value": "string" + } + ] + }, + "description": "当前选中菜单项的 key 值" + }, + { + "name": "defaultSelectedKeys", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "arrayOf", + "value": "string" + } + ] + }, + "description": "初始选中菜单项的 key 值", + "defaultValue": [] + } + ], + "configure": { + "component": { + "isContainer": true + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "MonthPicker", + "title": "MonthPicker", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "DatePicker", + "main": "", + "destructuring": true, + "subName": "MonthPicker" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "label", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "输入框内置标签" + }, + { + "name": "state", + "propType": { + "type": "oneOf", + "value": ["success", "loading", "error"] + }, + "description": "输入框状态" + }, + { + "name": "placeholder", + "propType": "string", + "description": "输入提示" + }, + { + "name": "defaultVisibleYear", + "propType": "func", + "description": "默认展现的年\n@return {MomentObject} 返回包含指定年份的 moment 对象实例" + }, + { + "name": "value", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "日期值（受控）moment 对象" + }, + { + "name": "defaultValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "初始日期值，moment 对象" + }, + { + "name": "format", + "propType": "string", + "description": "日期值的格式（用于限定用户输入和展示）", + "defaultValue": "YYYY-MM" + }, + { + "name": "disabledDate", + "propType": "func", + "description": "禁用日期函数\n@param {MomentObject} 日期值\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\n@return {Boolean} 是否禁用" + }, + { + "name": "footerRender", + "propType": "func", + "description": "自定义面板页脚\n@return {Node} 自定义的面板页脚组件" + }, + { + "name": "onChange", + "propType": "func", + "description": "日期值改变时的回调\n@param {MomentObject|String} value 日期值" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "输入框尺寸", + "defaultValue": "medium" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "hasClear", + "propType": "bool", + "description": "是否显示清空按钮", + "defaultValue": true + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层显示状态" + }, + { + "name": "defaultVisible", + "propType": "bool", + "description": "弹层默认是否显示" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层展示状态变化时的回调\n@param {Boolean} visible 弹层是否显示\n@param {String} type 触发弹层显示和隐藏的来源 calendarSelect 表示由日期表盘的选择触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "popupTriggerType", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "弹层触发方式", + "defaultValue": "click" + }, + { + "name": "popupAlign", + "propType": "string", + "description": "弹层对齐方式, 具体含义见 OverLay文档", + "defaultValue": "tl tl" + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + }, + { + "name": "popupStyle", + "propType": "object", + "description": "弹层自定义样式" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹层自定义样式类" + }, + { + "name": "popupProps", + "propType": "object", + "description": "弹层其他属性" + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "inputProps", + "propType": "object", + "description": "输入框其他属性" + }, + { + "name": "monthCellRender", + "propType": "func", + "description": "自定义月份渲染函数\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@returns {ReactNode}" + }, + { + "name": "yearCellRender", + "propType": "func" + }, + { + "name": "dateInputAriaLabel", + "propType": "string", + "description": "日期输入框的 aria-label 属性" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态" + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {MomentObject} value 月份" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "name", + "propType": "string" + }, + { + "name": "popupComponent", + "propType": { + "type": "instanceOf", + "value": "elementType" + } + }, + { + "name": "popupContent", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "Nav.Item", + "title": "导航项", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Nav", + "main": "", + "destructuring": true, + "subName": "Item" + }, + "props": [ + { + "name": "icon", + "propType": { + "type": "icon" + }, + "description": "自定义图标" + }, + { + "name": "children", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "description": "导航内容" + }, + { + "name": "style", + "propType": "object" + } + ], + "icon": "", + "category": "导航" + }, + { + "componentName": "Nav", + "title": "导航", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Nav", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "children", + "propType": "node", + "description": "导航项和子导航" + }, + { + "name": "type", + "propType": { + "type": "oneOf", + "value": ["normal", "primary", "secondary", "line"] + }, + "description": "导航类型", + "defaultValue": "normal" + }, + { + "name": "direction", + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "导航布局", + "defaultValue": "ver" + }, + { + "name": "hozAlign", + "propType": { + "type": "oneOf", + "value": ["left", "right"] + }, + "description": "对齐方向", + "defaultValue": "left" + }, + { + "name": "activeDirection", + "propType": { + "type": "oneOf", + "value": [null, "top", "bottom", "left", "right"] + }, + "description": "选中条方向" + }, + { + "name": "mode", + "propType": { + "type": "oneOf", + "value": ["inline", "popup"] + }, + "description": "子导航打开的模式", + "defaultValue": "inline" + }, + { + "name": "triggerType", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "子导航打开的触发方式", + "defaultValue": "click" + }, + { + "name": "inlineIndent", + "propType": "number", + "description": "内联子导航缩进距离", + "defaultValue": 20 + }, + { + "name": "defaultOpenAll", + "propType": "bool", + "description": "初始展开所有的子导航", + "defaultValue": false + }, + { + "name": "openMode", + "propType": { + "type": "oneOf", + "value": ["single", "multiple"] + }, + "description": "内联子导航的展开模式", + "defaultValue": "multiple" + }, + { + "name": "selectedKeys", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "instanceOf", + "value": "array" + } + ] + }, + "description": "当前选中导航key值" + }, + { + "name": "defaultSelectedKeys", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "instanceOf", + "value": "array" + } + ] + }, + "description": "初始选中导航项的key值" + }, + { + "name": "onSelect", + "propType": "func", + "description": "选中或取消选中导航项触发的回调函数\n@param {Array} selectedKeys 选中的所有导航项的 key\n@param {Object} item 选中或取消选中的导航项\n@param {Object} extra 额外参数\n@param {Boolean} extra.select 是否是选中\n@param {Array} extra.key 导航项的 key\n@param {Object} extra.label 导航项的文本\n@param {Array} extra.keyPath 导航项 key 的路径" + }, + { + "name": "popupAlign", + "propType": { + "type": "oneOf", + "value": ["follow", "outside"] + }, + "description": "弹出子导航的对齐方式（水平导航只支持 follow ）\n@eumdesc Item 顶端对齐, Nav 顶端对齐", + "defaultValue": "follow" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹出子导航的自定义类名" + }, + { + "name": "iconOnly", + "propType": "bool", + "description": "是否只显示图标" + }, + { + "name": "hasArrow", + "propType": "bool", + "description": "是否显示右侧的箭头", + "defaultValue": true + }, + { + "name": "hasTooltip", + "propType": "bool", + "description": "是否有ToolTips", + "defaultValue": false + }, + { + "name": "header", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "自定义导航头部" + }, + { + "name": "footer", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "自定义导航尾部" + }, + { + "name": "embeddable", + "propType": "bool", + "description": "开启嵌入式模式", + "defaultValue": false + } + ], + "configure": { + "component": { + "isContainer": true + } + }, + "icon": "", + "category": "导航" + }, + { + "componentName": "NextBlockCell", + "title": "子区块", + "category": "容器", + "npm": { + "package": "@alife/container", + "version": "0.3.7", + "exportName": "Block", + "main": "lib/index.js", + "destructuring": true, + "subName": "Cell" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "prefix", + "propType": "string" + }, + { + "name": "colSpan", + "propType": "number" + }, + { + "name": "rowSpan", + "propType": "number" + }, + { + "name": "content", + "propType": "node" + }, + { + "name": "title", + "propType": "node" + }, + { + "name": "extra", + "propType": "node" + } + ], + "configure": { + "component": { + "isContainer": true, + "disableBehaviors": "*" + }, + "props": [ + { + "name": "isAutoContainer", + "initialValue": true, + "defaultValue": true, + "setter": "BoolSetter", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "primaryKey", + "title": "项目编号", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "initialValue": { + "type": "JSFunction", + "value": "val => {\n if (val) return val;\n return String(Math.floor(Math.random() * 10000));\n }" + }, + "setter": "StringSetter" + }, + { + "name": "title", + "title": "标题", + "initialValue": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "setter": "StringSetter" + }, + { + "name": "colSpan", + "title": { + "label": "宽度(几列)", + "tip": "水平方向上占几列 (单位/份数, 最大12)" + }, + "display": "inline", + "initialValue": 1, + "setter": { + "componentName": "NumberSetter", + "props": { + "min": 1, + "max": 12, + "defaultValue": 1 + } + } + }, + { + "name": "rowSpan", + "title": { + "label": "高度(几行)", + "tip": "垂直方向占几行 (单位/份数)" + }, + "tip": "横向占的栅格数，1代表1行", + "initialValue": 1, + "setter": { + "componentName": "NumberSetter", + "props": { + "min": 1, + "max": 12, + "defaultValue": 1 + } + } + } + ] + }, + "experimental": { + "getResizingHandlers": { + "type": "JSFunction", + "value": "() => {\n return [\"e\"];\n }" + }, + "callbacks": { + "onResizeStart": { + "type": "JSFunction", + "value": "(e, currentNode) => {\n const { trigger } = e;\n const parent = currentNode.getParent();\n if (parent) {\n const parentNode = parent.getDOMNode();\n if (parentNode) {\n currentNode.parentRect = parentNode.getBoundingClientRect();\n }\n }\n currentNode.beforeSpan = currentNode.getPropValue(\"colSpan\") || 12;\n currentNode.startRect = currentNode.getRect();\n }" + }, + "onResize": { + "type": "JSFunction", + "value": "(e, currentNode) => {\n const { trigger, deltaX, deltaY } = e;\n const startWidth = currentNode.startRect\n ? currentNode.startRect.width\n : currentNode.beforeSpan * (currentNode.parentRect.width / 12);\n let width = startWidth + deltaX;\n if (!currentNode.startRect) {\n currentNode.startRect = {\n width\n };\n }\n width = Math.max(0, width); \n width = Math.min(width, currentNode.parentRect.width); \n const allowMoveX = Math.round(width - startWidth); \n currentNode.moveColumn = Math.round(\n allowMoveX / (currentNode.parentRect.width / 12)\n );\n currentNode.targetColumn =\n currentNode.beforeSpan + currentNode.moveColumn;\n currentNode.targetColumn = Math.max(1, currentNode.targetColumn); \n currentNode.targetColumn = Math.min(currentNode.targetColumn, 12); \n \n currentNode.getDOMNode().style[\"width\"] = `${Math.round(width)}px`;\n }" + }, + "onResizeEnd": { + "type": "JSFunction", + "value": "(e, currentNode) => {\n currentNode.getDOMNode().style[\"width\"] = `100%`;\n const columnEnums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];\n if (currentNode.targetColumn <= 1) {\n currentNode.targetColumn = 1;\n } else if (currentNode.targetColumn >= 12) {\n currentNode.targetColumn = 12;\n } else {\n let lastDelta = {\n column: columnEnums[0],\n delta: Math.abs(currentNode.targetColumn - columnEnums[0])\n };\n columnEnums.forEach(item => {\n let currentDelta = {\n column: item,\n delta: Math.abs(currentNode.targetColumn - item)\n };\n\n if (currentDelta.delta < lastDelta.delta) lastDelta = currentDelta;\n });\n currentNode.targetColumn = lastDelta.column;\n }\n\n currentNode.setPropValue(\"colSpan\", currentNode.targetColumn);\n }" + }, + "onMoveHook": { + "type": "JSFunction", + "value": "() => false" + } + } + }, + "icon": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png" + }, + { + "componentName": "NextBlock", + "title": "区块", + "category": "容器", + "npm": { + "package": "@alife/container", + "version": "0.3.7", + "exportName": "Block", + "main": "lib/index.js", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "prefix", + "propType": "string" + }, + { + "name": "childTotalColumns", + "propType": "number" + }, + { + "name": "colSpan", + "propType": "number" + }, + { + "name": "rowSpan", + "propType": "number" + }, + { + "name": "noPadding", + "propType": "bool" + }, + { + "name": "noBorder", + "propType": "bool" + }, + { + "name": "background", + "propType": { + "type": "oneOf", + "value": ["lining", "surface", "transparent"] + }, + "defaultValue": "lining" + }, + { + "name": "abc", + "propType": "string" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "childWhitelist": ["NextBlockCell"], + "parentWhitelist": { + "type": "JSFunction", + "value": "(testNode, currentNode) => {\n \n if (\n [\"NextPage\", \"Dialog\", \"Drawer\", \"Tab.Item\"].indexOf(\n testNode.componentName\n ) > -1\n ) {\n return true;\n }\n if (\n testNode.componentName === \"Slot\" &&\n [\"aside\"].indexOf(testNode.title) > -1\n ) {\n return true;\n }\n return false;\n }" + } + } + }, + "props": [ + { + "name": "title", + "title": "标题", + "initialValue": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "setter": "StringSetter" + }, + { + "name": "type", + "title": "样式", + "initialValue": "standard", + "defaultValue": "standard", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "standard", + "defaultValue": "standard", + "props": { + "options": [ + { + "title": "标准", + "value": "standard" + }, + { + "title": "透明", + "value": "transparent" + } + ] + } + }, + "extraProps": { + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n target.getNode().setPropValue(\"noPadding\", value === \"transparent\");\n target.getNode().setPropValue(\"noBorder\", value === \"transparent\");\n target\n .getNode()\n .setPropValue(\n \"background\",\n value === \"transparent\" ? value : \"surface\"\n );\n }" + } + } + }, + { + "name": "mode", + "title": "样式", + "initialValue": "inset", + "defaultValue": "inset", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "inset", + "defaultValue": "inset", + "props": { + "options": [ + { + "title": "标准", + "value": "inset" + }, + { + "title": "透明", + "value": "transparent" + }, + { + "title": "卡片", + "value": "card" + } + ] + } + } + }, + { + "name": "layoutmode", + "title": "布局模式", + "initialValue": "OOO", + "defaultValue": "OOO", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "OOO", + "defaultValue": "OOO", + "props": { + "card": true, + "options": [ + { + "label": "O", + "img": "https://img.alicdn.com/imgextra/i1/O1CN019KIIca1DFEKhu5AvI_!!6000000000186-55-tps-500-240.svg", + "value": "O" + }, + { + "label": "OO", + "img": "https://img.alicdn.com/imgextra/i2/O1CN016quqXZ1zWj1IrJPck_!!6000000006722-55-tps-500-240.svg", + "value": "OO" + }, + { + "label": "OOO", + "img": "https://img.alicdn.com/imgextra/i4/O1CN01Vpmd151yx07vfE7Eh_!!6000000006644-55-tps-500-240.svg", + "value": "OOO" + }, + { + "label": "OOOO", + "img": "https://img.alicdn.com/imgextra/i2/O1CN01IJEBFD1TY2S22RwLY_!!6000000002393-2-tps-500-240.png", + "value": "OOOO" + }, + { + "label": "OOOOOO", + "img": "https://img.alicdn.com/imgextra/i3/O1CN01GJ77gp1sg9rkUeuSc_!!6000000005795-2-tps-500-240.png", + "value": "OOOOOO" + }, + { + "label": "OB", + "img": "https://img.alicdn.com/imgextra/i2/O1CN015gIDsk26BqGkVCEnr_!!6000000007624-55-tps-500-240.svg", + "value": "OB" + }, + { + "label": "BO", + "img": "https://img.alicdn.com/imgextra/i2/O1CN01INZixz1vvDjrWjrTF_!!6000000006234-55-tps-499-240.svg", + "value": "BO" + }, + { + "label": "品", + "img": "https://img.alicdn.com/imgextra/i2/O1CN01XuHd5821cL6hrxpfz_!!6000000007005-55-tps-500-240.svg", + "value": "品" + }, + { + "label": "自定义", + "img": "https://img.alicdn.com/imgextra/i2/O1CN01EAvKa01OeqFtUhsDl_!!6000000001731-2-tps-408-410.png", + "value": "custom" + } + ] + } + }, + "extraProps": { + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n const map = {\n O: \"(12|1)\",\n OO: \"(6|1):(6|1)\",\n OOO: \"(4|1):(4|1):(4|1)\",\n OOOO: \"(3|1):(3|1):(3|1):(3|1)\",\n OOOOOO: \"(2|1):(2|1):(2|1):(2|1):(2|1):(2|1)\",\n OB: \"(6|2):(6|1):(6|1)\",\n BO: \"(6|1):(6|2):(6|1)\",\n 品: \"(12|1):(6|1):(6|1)\"\n };\n \n const autolayout = map[value];\n autolayout &&\n target\n .getProps()\n .get(\"autolayout\")\n .setValue(autolayout);\n }" + } + } + }, + { + "name": "autolayout", + "title": { + "label": "布局", + "tip": "一个括号表示一个块，用冒号分割；括号内含义为(列宽|行高)" + }, + "defaultValue": "(6|1):(6|1)", + "setter": { + "componentName": "StringSetter" + }, + "condition": { + "type": "JSFunction", + "value": "target => {\n return target.getProps().getPropValue(\"layoutmode\") === \"custom\";\n }" + }, + "extraProps": { + "setValue": { + "type": "JSFunction", + "value": "setValue(target, value) {\n \n let arrValue = value.split(\":\");\n arrValue = arrValue.filter(item => {\n return item && item.trim(); \n });\n arrValue = arrValue.map(item => {\n return item.replace(/[\\(\\)]/gi, \"\").split(\"|\");\n });\n const flag = arrValue.find(item => {\n return isNaN(Number(item[0])) || isNaN(Number(item[1]));\n });\n\n if (flag) {\n return;\n }\n\n const node = target.getNode();\n node.children.mergeChildren(\n (child, index) => {\n const wh = arrValue[index];\n child.setPropValue(\"colSpan\", +(wh && wh[0]) || 12);\n child.setPropValue(\"rowSpan\", +(wh && wh[1]) || 1);\n return index >= arrValue.length;\n },\n children => {\n let l = children.length;\n const items = [];\n while (l++ < arrValue.length) {\n items.push({\n componentName: \"NextBlockCell\",\n props: {\n isAutoContainer: true,\n colSpan: +arrValue[l - 1][0] || 12,\n rowSpan: +arrValue[l - 1][1] || 1\n }\n });\n }\n return items;\n },\n null\n );\n }" + } + } + }, + { + "name": "noPadding", + "title": "无边距", + "initialValue": false, + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "setter": "BoolSetter" + }, + { + "name": "noBorder", + "title": "无边框", + "initialValue": false, + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "setter": "BoolSetter" + }, + { + "name": "background", + "title": "背景色", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "extraProps": { + "defaultValue": "surface" + }, + "defaultValue": "surface", + "initialValue": "surface", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "surface", + "props": { + "defaultValue": "surface", + "options": [ + { + "title": "底色", + "value": "lining" + }, + { + "title": "白色", + "value": "surface" + }, + { + "title": "透明", + "value": "transparent" + } + ] + } + } + }, + { + "name": "colSpan", + "title": { + "label": "宽度(几列)", + "tip": "水平方向上占几列 (单位/份数, 最大12), 也可以通过拖动左侧面板改变列数" + }, + "display": "inline", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "initialValue": 12, + "defaultValue": 12, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [2, 4, 6, 8, 12] + } + } + }, + { + "name": "rowSpan", + "title": { + "label": "高度(几行)", + "tip": "垂直方向占几行 (单位/份数)" + }, + "display": "inline", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "initialValue": 1, + "defaultValue": 1, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [1, 2, 3, 4, 5] + } + } + }, + { + "name": "childTotalColumns", + "title": { + "label": "一行几列", + "tip": "可以通过增加子区块个数，查看变化" + }, + "display": "inline", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "initialValue": 12, + "defaultValue": 12, + "setter": { + "componentName": "NumberSetter", + "props": { + "min": 1, + "max": 12, + "defaultValue": 1 + } + } + }, + { + "name": "Cells", + "title": "子区块", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "primaryKey", + "title": "项目编号", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "initialValue": { + "type": "JSFunction", + "value": "val => {\n if (val) return val;\n return String(Math.floor(Math.random() * 10000));\n }" + }, + "setter": "StringSetter" + }, + { + "name": "title", + "title": "标题", + "initialValue": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "setter": "StringSetter" + }, + { + "name": "colSpan", + "title": { + "label": "宽度(几列)", + "tip": "水平方向上占几列 (单位/份数, 最大12)" + }, + "display": "inline", + "initialValue": 1, + "setter": { + "componentName": "NumberSetter", + "props": { + "min": 1, + "max": 12, + "defaultValue": 1 + } + } + }, + { + "name": "rowSpan", + "title": { + "label": "高度(几行)", + "tip": "垂直方向占几行 (单位/份数)" + }, + "display": "inline", + "initialValue": 1, + "setter": { + "componentName": "NumberSetter", + "props": { + "min": 1, + "max": 12, + "defaultValue": 1 + } + } + } + ] + } + }, + "initialValue": { + "type": "JSFunction", + "value": "() => {\n return {\n primaryKey: String(Math.floor(Math.random() * 10000)),\n title: \"\",\n colSpan: 1,\n rowSpan: 1\n };\n }" + } + } + } + }, + "extraProps": { + "virtual": { + "type": "JSFunction", + "value": "() => true" + }, + "getValue": { + "type": "JSFunction", + "value": "(target, value) => {\n return target.getNode().children.map(child => {\n return {\n primaryKey: String(child.getPropValue(\"primaryKey\")),\n title: child.getPropValue(\"title\"),\n colSpan: child.getPropValue(\"colSpan\"),\n rowSpan: child.getPropValue(\"rowSpan\")\n };\n });\n }" + }, + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n const node = target.getNode();\n const map = {};\n if (!Array.isArray(value)) {\n value = [];\n }\n const added = [];\n value.forEach(item => {\n const blockCellItem = Object.assign({}, item);\n map[item.primaryKey] = blockCellItem;\n });\n node.children.mergeChildren(\n child => {\n const primaryKey = String(child.getPropValue(\"primaryKey\"));\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n child.setPropValue(\"title\", map[primaryKey].title);\n child.setPropValue(\"colSpan\", map[primaryKey].colSpan);\n child.setPropValue(\"rowSpan\", map[primaryKey].rowSpan);\n delete map[primaryKey];\n return false;\n }\n return true;\n },\n () => {\n const items = [];\n for (const primaryKey in map) {\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n items.push({\n componentName: \"NextBlockCell\",\n props: map[primaryKey]\n });\n }\n }\n return items;\n },\n (child1, child2) => {\n const a = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child1.getPropValue(\"primaryKey\"))\n );\n const b = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child2.getPropValue(\"primaryKey\"))\n );\n return a - b;\n }\n );\n }" + }, + "onChange": { + "type": "JSFunction", + "value": "() => {}" + } + } + } + ] + }, + "experimental": { + "initialChildren": [ + { + "componentName": "NextBlockCell", + "props": { + "title": "", + "prefix": "next-", + "placeholderStyle": { + "height": "100%" + }, + "layoutmode": "O", + "childTotalColumns": 12, + "isAutoContainer": true, + "colSpan": 12, + "rowSpan": 1 + } + } + ], + "callbacks": {} + }, + "icon": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png" + }, + { + "componentName": "NextPCell", + "title": "组", + "category": "容器", + "npm": { + "package": "@alife/container", + "version": "0.3.7", + "exportName": "P", + "main": "lib/index.js", + "destructuring": true, + "subName": "Cell" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "type", + "title": "字体大小", + "extraProps": { + "defaultValue": "body2" + }, + "defaultValue": "body2", + "initialValue": "body2", + "setter": { + "componentName": "SelectSetter", + "initialValue": "body2", + "props": { + "defaultValue": "body2", + "options": [ + { + "title": "h1", + "value": "h1" + }, + { + "title": "h2", + "value": "h2" + }, + { + "title": "h3", + "value": "h3" + }, + { + "title": "h4", + "value": "h4" + }, + { + "title": "h5", + "value": "h5" + }, + { + "title": "h6", + "value": "h6" + }, + { + "title": "body1", + "value": "body1" + }, + { + "title": "body2", + "value": "body2" + }, + { + "title": "caption", + "value": "caption" + }, + { + "title": "overline", + "value": "overline" + } + ] + } + } + }, + { + "name": "verAlign", + "title": "垂直对齐", + "extraProps": { + "defaultValue": "baseline" + }, + "defaultValue": "baseline", + "initialValue": "baseline", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "baseline", + "props": { + "defaultValue": "baseline", + "options": [ + { + "title": "top", + "value": "top" + }, + { + "title": "baseline", + "value": "baseline" + }, + { + "title": "middle", + "value": "middle" + }, + { + "title": "bottom", + "value": "bottom" + } + ] + } + } + }, + { + "name": "align", + "title": "水平对齐", + "extraProps": { + "defaultValue": "left" + }, + "defaultValue": "left", + "initialValue": "left", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "left", + "props": { + "defaultValue": "left", + "options": [ + { + "title": "space-between", + "value": "space-between" + }, + { + "title": "space-around", + "value": "space-around" + }, + { + "title": "space-evenly", + "value": "space-evenly" + }, + { + "title": "left", + "value": "left" + }, + { + "title": "center", + "value": "center" + }, + { + "title": "right", + "value": "right" + } + ] + } + } + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["NextP"] + } + }, + "props": [ + { + "name": "width", + "title": "宽度", + "initialValue": "auto", + "defaultValue": "auto", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "setter": { + "componentName": "NumberSetter", + "props": { + "units": [ + { + "type": "px", + "list": true + }, + { + "type": "%", + "list": true + } + ] + } + } + }, + { + "name": "direction", + "title": "排布方式", + "initialValue": "hoz", + "defaultValue": "hoz", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "hoz", + "defaultValue": "hoz", + "props": { + "options": [ + { + "title": "上下排列", + "value": "ver" + }, + { + "title": "左右排列", + "value": "hoz" + } + ] + } + } + }, + { + "name": "align", + "title": "对齐方式", + "initialValue": "inherit", + "defaultValue": "inherit", + "condition": { + "type": "JSFunction", + "value": "target => {\n if (!target || !target.getProps()) {\n console.warn(\"target or props should not be empty: \", target);\n return false;\n }\n return !!(target.getProps().getPropValue(\"direction\") === \"ver\");\n }" + }, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "inherit", + "defaultValue": "inherit", + "props": { + "options": [ + { + "title": "左", + "value": "left" + }, + { + "title": "中", + "value": "center" + }, + { + "title": "右", + "value": "right" + }, + { + "title": "默认", + "value": "inherit" + } + ] + } + } + }, + { + "name": "verAlign", + "title": "对齐方式", + "initialValue": "inherit", + "defaultValue": "inherit", + "condition": { + "type": "JSFunction", + "value": "target => {\n if (!target || !target.getProps()) {\n console.warn(\"target or props should not be empty: \", target);\n return false;\n }\n return !!(target.getProps().getPropValue(\"direction\") === \"hoz\");\n }" + }, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "inherit", + "defaultValue": "inherit", + "props": { + "options": [ + { + "title": "上", + "value": "top" + }, + { + "title": "中", + "value": "middle" + }, + { + "title": "baseline", + "value": "baseline" + }, + { + "title": "下", + "value": "bottom" + }, + { + "title": "默认", + "value": "inherit" + } + ] + } + } + } + ], + "supports": { + "style": true + } + }, + "icon": "" + }, + { + "componentName": "NextP", + "title": "段落模板", + "category": "容器", + "npm": { + "package": "@alife/container", + "version": "0.3.7", + "exportName": "P", + "main": "lib/index.js", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "textSpacing", + "title": { + "label": "文字间距", + "tip": "开启后，同一“段落”下，多个Text之间会产生间距" + }, + "propType": "bool", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "defaultValue": true + }, + { + "name": "full", + "title": { + "label": "占满一行", + "tip": "开启后，子元素将占满一行" + }, + "propType": "bool", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "defaultValue": false + }, + { + "name": "flex", + "title": { + "label": "块状布局", + "tip": "相对于“行内布局模式”,子元素是不可分割的块" + }, + "propType": "bool", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "defaultValue": true + }, + { + "name": "wrap", + "title": { + "label": "超长换行", + "tip": "只在块状布局下生效，而行内布局下默认就是换行的" + }, + "propType": "bool", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "defaultValue": false + }, + { + "name": "type", + "title": "字体大小", + "extraProps": { + "defaultValue": "body2" + }, + "defaultValue": "body2", + "initialValue": "body2", + "setter": { + "componentName": "SelectSetter", + "initialValue": "body2", + "props": { + "defaultValue": "body2", + "options": [ + { + "title": "h1", + "value": "h1" + }, + { + "title": "h2", + "value": "h2" + }, + { + "title": "h3", + "value": "h3" + }, + { + "title": "h4", + "value": "h4" + }, + { + "title": "h5", + "value": "h5" + }, + { + "title": "h6", + "value": "h6" + }, + { + "title": "body1", + "value": "body1" + }, + { + "title": "body2", + "value": "body2" + }, + { + "title": "caption", + "value": "caption" + }, + { + "title": "overline", + "value": "overline" + } + ] + } + } + }, + { + "name": "verAlign", + "title": "垂直对齐", + "extraProps": { + "defaultValue": "baseline" + }, + "defaultValue": "baseline", + "initialValue": "baseline", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "baseline", + "props": { + "defaultValue": "baseline", + "options": [ + { + "title": "top", + "value": "top" + }, + { + "title": "baseline", + "value": "baseline" + }, + { + "title": "middle", + "value": "middle" + }, + { + "title": "bottom", + "value": "bottom" + } + ] + } + } + }, + { + "name": "align", + "title": "水平对齐", + "extraProps": { + "defaultValue": "space-between" + }, + "defaultValue": "space-between", + "initialValue": "space-between", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "space-between", + "defaultValue": "space-between", + "props": { + "defaultValue": "space-between", + "options": [ + { + "title": "space-between", + "value": "space-between" + }, + { + "title": "space-around", + "value": "space-around" + }, + { + "title": "space-evenly", + "value": "space-evenly" + }, + { + "title": "left", + "value": "left" + }, + { + "title": "center", + "value": "center" + }, + { + "title": "right", + "value": "right" + } + ] + } + } + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": { + "type": "JSFunction", + "value": "(testNode, currentNode) => {\n if (\n testNode.isContainer() &&\n [\"NextPage\", \"NextBlock\"].indexOf(testNode.componentName) === -1\n ) {\n return true;\n }\n if (\n testNode.componentName === \"Slot\" &&\n [\"header\", \"footer\", \"nav\"].indexOf(testNode.title) > -1\n ) {\n return true;\n }\n return false;\n }" + } + } + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + } + ] + } + }, + "experimental": { + "callbacks": { + "onNodeRemove": { + "type": "JSFunction", + "value": "(removedNode, currentNode) => {\n if (!removedNode || !currentNode) {\n return;\n }\n const children = currentNode.children;\n \n if (children && children.length === 0) {\n currentNode.remove();\n }\n }" + } + }, + "initials": [ + { + "name": "flex", + "initial": { + "type": "JSFunction", + "value": "() => true" + } + } + ] + } + }, + { + "componentName": "NextPage", + "title": "页面", + "category": "容器", + "npm": { + "package": "@alife/container", + "version": "0.3.7", + "exportName": "Page", + "main": "lib/index.js", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "header", + "propType": "node" + }, + { + "name": "footer", + "propType": "node" + }, + { + "name": "nav", + "propType": "node" + }, + { + "name": "aside", + "propType": "node" + }, + { + "name": "main", + "propType": "node" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": { + "type": "JSFunction", + "value": "dropTargetNode => {\n let targetNodeNextPageNum = 0;\n dropTargetNode.getChildren().forEach(item => {\n if (item.componentName === \"NextPage\") {\n targetNodeNextPageNum += 1;\n }\n });\n \n if (\n dropTargetNode.isRoot() &&\n dropTargetNode.componentName !== \"NextPage\" &&\n targetNodeNextPageNum === 0\n ) {\n return true;\n }\n\n return false;\n }" + } + } + }, + "props": [ + { + "name": "columns", + "title": "列数", + "defaultValue": 12, + "setter": "NumberSetter", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "page", + "type": "group", + "title": { + "label": "页面" + }, + "extraProps": { + "display": "block" + }, + "items": [ + { + "name": "contentAlignCenter", + "title": { + "label": "内容居中", + "tip": "（在大屏下有区别）开启后内容区域有最大宽度且整体居中" + }, + "setter": { + "componentName": "BoolSetter", + "initialValue": false + } + }, + { + "name": "contentProps.noPadding", + "title": { + "label": "内间距" + }, + "initialValue": false, + "defaultValue": false, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": false, + "defaultValue": false, + "props": { + "options": [ + { + "title": "有", + "value": false + }, + { + "title": "无", + "value": true + } + ] + } + } + }, + { + "name": "minHeight", + "title": { + "label": "最小高度" + }, + "initialValue": "100vh", + "defaultValue": "100vh", + "setter": { + "componentName": "StringSetter" + }, + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "background", + "title": { + "label": "Page的背景色" + }, + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "lining" + } + }, + { + "name": "contentProps.background", + "title": { + "label": "主体背景色" + }, + "initialValue": "transparent", + "defaultValue": "transparent", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "transparent", + "defaultValue": "transparent", + "props": { + "options": [ + { + "title": "不透明", + "value": "surface" + }, + { + "title": "透明", + "value": "transparent" + } + ] + } + } + } + ] + }, + { + "name": "headerSelection", + "type": "group", + "title": { + "label": "头部" + }, + "extraProps": { + "display": "block" + }, + "items": [ + { + "name": "header", + "title": { + "label": "内容" + }, + "setter": { + "componentName": "SlotSetter", + "initialValue": { + "type": "JSSlot", + "title": "header", + "value": [] + } + } + }, + { + "name": "headerProps.background", + "title": { + "label": "头部背景" + }, + "condition": { + "type": "JSFunction", + "value": "target => {\n if (!target || !target.getProps()) {\n console.warn(\"target or props should not be empty: \", target);\n return false;\n }\n return !!target.getProps().getPropValue(\"header\");\n }" + }, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "surface", + "props": { + "options": [ + { + "title": "不透明", + "value": "surface" + }, + { + "title": "透明", + "value": "transparent" + } + ] + } + } + }, + { + "name": "headerProps.style.padding", + "title": { + "label": "内间距" + }, + "defaultValue": "", + "initialValue": "", + "condition": { + "type": "JSFunction", + "value": "target => {\n if (!target || !target.getProps()) {\n console.warn(\"target or props should not be empty: \", target);\n return false;\n }\n return !!target.getProps().getPropValue(\"header\");\n }" + }, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "", + "props": { + "options": [ + { + "title": "无", + "value": "0" + }, + { + "title": "有", + "value": "" + } + ] + } + } + }, + { + "name": "headerDivider", + "title": { + "label": "头部底下分割线", + "tip": "一般用于头部、内容区颜色相同时 headerDivider" + }, + "defaultValue": true, + "initialValue": true, + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "setter": { + "componentName": "BoolSetter", + "initialValue": true, + "defaultValue": true + } + } + ] + }, + { + "name": "footer", + "type": "group", + "title": { + "label": "底部" + }, + "extraProps": { + "display": "block" + }, + "items": [ + { + "name": "footer", + "title": { + "label": "内容" + }, + "setter": { + "componentName": "SlotSetter", + "initialValue": { + "type": "JSSlot", + "title": "footer", + "value": [] + } + } + }, + { + "name": "footerProps.fixed", + "title": { + "label": "是否吸底", + "tip": "可以用来放置吸底的表单提交按钮等" + }, + "defaultValue": false, + "initialValue": false, + "condition": { + "type": "JSFunction", + "value": "target => {\n if (!target || !target.getProps()) {\n console.warn(\"target or props should not be empty: \", target);\n return false;\n }\n return !!target.getProps().getPropValue(\"footer\");\n }" + }, + "setter": { + "componentName": "BoolSetter", + "initialValue": false, + "defaultValue": false + } + } + ] + }, + { + "name": "nav", + "title": { + "label": "左侧导航" + }, + "extraProps": { + "display": "block" + }, + "setter": { + "componentName": "SlotSetter", + "initialValue": { + "type": "JSSlot", + "title": "nav", + "value": [] + } + } + }, + { + "name": "aside", + "title": { + "label": "侧边栏" + }, + "extraProps": { + "display": "block" + }, + "setter": { + "componentName": "SlotSetter", + "initialValue": { + "type": "JSSlot", + "title": "aside", + "value": [ + { + "componentName": "NextBlock", + "title": "区块", + "props": { + "prefix": "next-", + "placeholderStyle": { + "height": "100%" + }, + "noPadding": false, + "noBorder": false, + "background": "surface", + "colSpan": 12, + "rowSpan": 1, + "childTotalColumns": 1 + } + } + ] + } + } + } + ], + "supports": { + "style": true, + "loop": false + } + }, + "experimental": { + "callbacks": { + "onNodeAdd": { + "type": "JSFunction", + "value": "(dragment, currentNode) => {\n \n \n if (\n !dragment ||\n [\"NextP\", \"NextBlock\", \"Slot\"].includes(dragment.componentName) ||\n (dragment.isModal && dragment.isModal())\n ) {\n console.log(\n `[${dragment.componentName}] doesn\\'n need to wrap with NextBlock > NextBlockCell`\n );\n return;\n }\n\n const NextPProps = {\n wrap: false,\n type: \"body2\",\n verAlign: \"middle\",\n textSpacing: true,\n align: \"left\"\n };\n\n if (\n [\n \"Form\",\n \"ResponsiveGrid\",\n \"Box\",\n \"Card\",\n \"List\",\n \"Message\",\n \"Slider\",\n \"NextTable\"\n ].includes(dragment.componentName) ||\n dragment.getPropValue(\"isFillContainer\")\n ) {\n NextPProps.full = true;\n }\n const layoutPSchema = {\n componentName: \"NextP\",\n title: \"段落\",\n props: NextPProps,\n children: [dragment.schema]\n };\n\n \n const layoutBlockNode = len =>\n currentNode.document.createNode({\n componentName: \"NextBlock\",\n title: \"区块\",\n props: {\n childTotalColumns: len || 12\n },\n children: [\n {\n componentName: \"NextBlockCell\",\n title: \"子区块\",\n props: {\n isAutoContainer: true,\n colSpan: 12,\n rowSpan: 1\n },\n children: [layoutPSchema]\n }\n ]\n });\n\n const dropLocation = dragment.document.designer.dropLocation;\n\n if (!dropLocation) {\n \n return;\n }\n const dropTarget = dropLocation.target;\n const dropTargetName = dropLocation.target.componentName || \"\";\n\n \n const targetId = (dropLocation && dropLocation.target.id) || \"\";\n \n let slotTarget =\n currentNode.slots.length > 0 &&\n currentNode.slots.find(item => item.id === targetId);\n\n const layoutPNode = currentNode.document.createNode(layoutPSchema);\n\n \n const isAsideSlot =\n slotTarget && [\"aside\"].indexOf(slotTarget._slotFor.key) > -1;\n \n const isNeedPSlot =\n slotTarget &&\n [\"header\", \"footer\", \"nav\"].indexOf(slotTarget._slotFor.key) > -1;\n\n const wrapWithBlock = (dragment, node, dropTargetName, blockLen) => {\n setTimeout(() => {\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] need to wrap with NextBlock > NextBlockCell > NextP [from NextPage2]`\n );\n const newNode = node.document.createNode(\n layoutBlockNode(blockLen).schema\n );\n node.insertBefore(newNode, dragment, false);\n dragment.remove(false);\n newNode\n .getChildren()\n .get(0)\n .getChildren()\n .get(0)\n .getChildren()\n .get(0)\n .select();\n }, 1);\n };\n\n const wrapWithP = (dragment, node, dropTargetName) => {\n setTimeout(() => {\n \n \n if (dropTargetName === \"NextP\") {\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] does't need to wrap with NextP. [from NextPage3]`\n );\n return;\n }\n\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] need to wrap with NextP [from NextPage3]`\n );\n const newNode = node.document.createNode(\n Object.assign(layoutPNode.schema)\n );\n node.insertBefore(newNode, dragment, false);\n dragment.remove(false);\n newNode\n .getChildren()\n .get(0)\n .select();\n }, 1);\n };\n\n \n \n if (\n [\"NextPage\"].includes(dropTargetName) &&\n currentNode.getChildren().has(dragment)\n ) {\n wrapWithBlock(dragment, currentNode, dropTargetName, 12);\n\n \n \n } else if (\n isAsideSlot &&\n slotTarget &&\n slotTarget.getChildren().has(dragment)\n ) {\n wrapWithBlock(dragment, slotTarget, dropTargetName, 1);\n\n \n \n \n } else if (\n dropTarget.getPropValue(\"isAutoContainer\") ||\n dropTargetName === \"Tab.Item\"\n ) {\n wrapWithP(dragment, dropTarget, dropTargetName);\n\n \n \n } else if (isNeedPSlot && slotTarget) {\n wrapWithP(dragment, slotTarget, dropTargetName);\n }\n\n \n }" + } + }, + "initials": [ + { + "name": "minHeight", + "initial": { + "type": "JSFunction", + "value": "() => \"100vh\"" + } + } + ] + }, + "icon": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png" + }, + { + "componentName": "NextTable", + "title": "表格", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "NextTable", + "version": "1.23.x", + "exportName": "NextTable", + "main": "lib/index.js", + "subName": "" + }, + "props": [ + { + "name": "columns", + "title": "数据列", + "propType": { + "type": "arrayOf", + "value": { + "type": "shape", + "value": [ + { + "name": "title", + "description": "列标题", + "propType": "string", + "defaultValue": "Title" + }, + { + "name": "dataKey", + "description": "列索引", + "propType": "string", + "defaultValue": "Key" + }, + { + "name": "dataType", + "description": "数据类型", + "propType": { + "type": "oneOf", + "value": [ + "text", + "timestamp", + "cascadeTimestamp", + "employee", + "money", + "moneyRange" + ] + }, + "defaultValue": "Key" + }, + { + "name": "editType", + "description": "编辑类型", + "propType": { + "type": "oneOf", + "value": ["select", "text", "radio", "date", "employee"] + }, + "defaultValue": "Key" + } + ] + } + } + }, + { + "name": "data", + "title": "数据源", + "propType": { + "type": "oneOfType", + "value": ["Json", "JSExpression"] + } + }, + { + "name": "actionTitle", + "title": "操作列标题", + "propType": "string" + }, + { + "name": "actionColumn", + "title": "操作列", + "propType": { + "type": "arrayOf", + "value": { + "type": "shape", + "value": [ + { + "name": "title", + "description": "列标题", + "propType": "string", + "defaultValue": "Title" + }, + { + "name": "callback", + "description": "callback", + "propType": "func", + "defaultValue": { + "type": "JSFunction", + "value": "(rowData, action, table) => {\n return table.editRow(rowData).then((row) => {\n console.log(row);\n })}" + } + } + ] + } + } + }, + { + "name": "customBarItem", + "isRequired": true, + "title": "自定义工具栏渲染", + "propType": "any" + } + ], + "configure": { + "props": [ + { + "name": "customBarItem", + "isRequired": true, + "title": "自定义工具栏渲染", + "setter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "render", + "title": "整体自定义渲染", + "setter": { + "componentName": "FunctionSetter", + "props": { + "supportParams": true + } + } + }, + { + "name": "rightRender", + "title": "底部自定义渲染", + "setter": { + "componentName": "SlotSetter", + "initialValue": { + "type": "JSSlot", + "params": ["value", "index", "record"], + "value": [] + } + } + }, + { + "name": "bottomRender", + "title": "右侧自定义渲染", + "setter": { + "componentName": "SlotSetter", + "initialValue": { + "type": "JSSlot", + "params": ["value", "index", "record"], + "value": [] + } + } + } + ] + } + } + } + }, + { + "name": "StyleAndTheme", + "title": "风格和样式", + "type": "group", + "extraProps": { + "display": "entry" + }, + "items": [ + { + "name": "theme", + "title": "主题", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "zebra", + "value": "zebra" + }, + { + "title": "split", + "value": "split" + }, + { + "title": "border", + "value": "border" + } + ] + } + } + }, + { + "name": "hasHeader", + "title": "是否显示表头", + "setter": "BoolSetter" + }, + { + "name": "fixedHeader", + "title": "是否固定表头", + "setter": "BoolSetter" + }, + { + "name": "stickyHeader", + "title": "表头是否是sticky", + "setter": "BoolSetter" + }, + { + "name": "setEmptyContent", + "title": "开启自定义空提示", + "setter": "BoolSetter" + }, + { + "description": "最大高度", + "name": "maxBodyHeight", + "setter": "StringSetter" + } + ] + }, + { + "name": "Selector", + "title": "行选择器", + "type": "group", + "extraProps": { + "display": "entry" + }, + "items": [ + { + "name": "rowSelector", + "title": "选择器模式", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "checkboxSelector", + "value": "checkboxSelector" + }, + { + "title": "radioSelector", + "value": "radioSelector" + } + ] + } + } + }, + { + "name": "showRowSelector", + "title": "是否启用选择模式", + "setter": "BoolSetter" + } + ] + }, + { + "name": "Pagination", + "title": "分页设置", + "type": "group", + "extraProps": { + "display": "entry" + }, + "items": [ + { + "name": "isPagination", + "title": "是否显示分页", + "setter": "BoolSetter", + "initialValue": true + }, + { + "name": "pagination", + "title": "分页设置", + "setter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "paginationPosition", + "title": "翻页器显示位置", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "left", + "value": "left" + }, + { + "title": "right", + "value": "right" + } + ] + } + } + }, + { + "name": "size", + "title": "分页组件大小", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "small", + "value": "small" + }, + { + "title": "medium", + "value": "medium" + }, + { + "title": "large", + "value": "large" + } + ] + } + } + }, + { + "name": "type", + "title": "分页组件类型", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "normal", + "value": "normal" + }, + { + "title": "simple", + "value": "simple" + }, + { + "title": "mini", + "value": "mini" + } + ] + } + } + }, + { + "name": "shape", + "title": "前进后退按钮样式", + "setter": { + "componentName": "SelectSetter", + "props": { + "options": [ + { + "title": "normal", + "value": "normal" + }, + { + "title": "arrow-only", + "value": "arrow-only" + }, + { + "title": "arrow-prev-only", + "value": "arrow-prev-only" + }, + { + "title": "no-border", + "value": "no-border" + } + ] + } + } + }, + { + "name": "pageSizeSelector", + "title": "每页显示选择器类型", + "setter": "BoolSetter" + }, + { + "name": "pageSizeList", + "title": "每页显示选择器可选值", + "setter": "StringSetter" + }, + { + "name": "pageSizePosition", + "title": "每页显示选择器在组件中的位置", + "setter": { + "componentName": "SelectSetter", + "props": { + "options": [ + { + "title": "start", + "value": "start" + }, + { + "title": "end", + "value": "end" + } + ] + } + } + }, + { + "name": "hideOnlyOnePage", + "title": "hideOnlyOnePage", + "setter": "BoolSetter" + }, + { + "name": "showJump", + "title": "showJump", + "setter": "BoolSetter" + }, + { + "name": "pageShowCount", + "title": "页码显示的数量", + "setter": "NumberSetter" + } + ] + } + }, + "initialValue": { + "type": "normal", + "shape": "arrow-only", + "pageSize": 10, + "pageSizeSelector": false, + "pageSizeList": "5,10,20", + "pageSizePosition": "end", + "paginationPosition": "right", + "hideOnlyOnePage": false, + "showJump": true + } + } + } + ] + }, + { + "name": "ExpandAndTree", + "title": "可折叠/树形表格", + "type": "group", + "extraProps": { + "display": "entry" + }, + "items": [ + { + "name": "hasExpandedRowCtrl", + "title": "启用折叠", + "setter": "BoolSetter" + }, + { + "name": "isTree", + "title": "启用树形", + "setter": "BoolSetter" + } + ] + }, + { + "name": "TopAction", + "title": "顶部操作选项", + "type": "group", + "extraProps": { + "display": "entry" + }, + "items": [ + { + "name": "showMiniPager", + "title": "顶部迷你分页器", + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "showActionBar", + "title": "显示操作条", + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "showLinkBar", + "title": "显示外链条", + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "showSearch", + "title": "显示搜索", + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "searchBarPlaceholder", + "title": "搜索 placeholder", + "setter": "StringSetter" + }, + { + "name": "showCustomColumn", + "title": "显示筛选器", + "setter": { + "componentName": "BoolSetter" + } + } + ] + }, + { + "name": "actionBar", + "title": "操作条", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "title", + "description": "标题", + "setter": "StringSetter", + "initialValue": "Title" + }, + { + "name": "callback", + "description": "callback", + "setter": { + "componentName": "FunctionSetter" + } + } + ] + } + }, + "initialValue": { + "title": "Title" + } + } + } + } + }, + { + "name": "linkBar", + "title": "外链操作条", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "title", + "description": "标题", + "setter": "StringSetter", + "initialValue": "Title" + }, + { + "name": "callback", + "description": "callback", + "setter": { + "componentName": "FunctionSetter" + } + } + ] + } + }, + "initialValue": { + "title": "Title" + } + } + } + } + }, + { + "name": "columns", + "title": "数据列", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + "ExpressionSetter", + { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "title", + "description": "列标题", + "setter": "StringSetter" + }, + { + "name": "dataKey", + "description": "列索引", + "setter": "StringSetter" + }, + { + "description": "宽度", + "name": "width", + "setter": "StringSetter" + }, + { + "name": "dataType", + "description": "数据类型", + "setter": { + "componentName": "SelectSetter", + "props": { + "options": [ + { + "title": "text", + "value": "text" + }, + { + "title": "timestamp", + "value": "timestamp" + }, + { + "title": "cascadeTimestamp", + "value": "cascadeTimestamp" + }, + { + "title": "employee", + "value": "employee" + }, + { + "title": "money", + "value": "money" + }, + { + "title": "moneyRange", + "value": "moneyRange" + } + ] + } + } + }, + { + "name": "editType", + "description": "编辑类型", + "setter": { + "componentName": "SelectSetter", + "props": { + "options": [ + { + "title": "select", + "value": "select" + }, + { + "title": "text", + "value": "text" + }, + { + "title": "radio", + "value": "radio" + }, + { + "title": "date", + "value": "date" + }, + { + "title": "employee", + "value": "employee" + } + ] + } + } + }, + { + "name": "lock", + "description": "锁定位置", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "左", + "value": "left" + }, + { + "title": "右", + "value": "right" + }, + { + "title": "无", + "value": "" + } + ] + }, + "initialValue": "" + } + }, + { + "description": "自定义渲染", + "name": "render", + "setter": { + "componentName": "SlotSetter", + "title": "单元格自定义", + "initialValue": { + "type": "JSSlot", + "params": [""], + "value": [ + { + "componentName": "Box" + } + ] + } + } + } + ] + } + }, + "initialValue": { + "title": "Title", + "dataKey": "Key", + "dataType": "text", + "editType": "text", + "width": 200, + "lock": "" + } + } + } + } + ] + } + } + }, + { + "name": "data", + "title": "数据源", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["JsonSetter", "ExpressionSetter"] + } + } + }, + { + "name": "action", + "title": "操作列选项", + "type": "group", + "extraProps": { + "display": "entry" + }, + "items": [ + { + "name": "actionTitle", + "title": "操作列标题", + "setter": "StringSetter" + }, + { + "name": "actionWidth", + "title": "操作列宽度", + "setter": "NumberSetter" + }, + { + "name": "actionType", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "link", + "value": "link" + }, + { + "title": "button", + "value": "button" + } + ] + } + } + }, + { + "name": "actionFixed", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "right", + "value": "right" + }, + { + "title": "none", + "value": "none" + } + ] + } + } + }, + { + "name": "actionHidden", + "setter": "BoolSetter", + "initialValue": false + } + ] + }, + { + "name": "actionColumn", + "title": "操作列", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "title", + "description": "列标题", + "setter": "StringSetter", + "initialValue": "Title" + }, + { + "name": "callback", + "description": "callback", + "setter": { + "componentName": "FunctionSetter" + } + } + ] + } + }, + "initialValue": { + "title": "Title", + "callback": { + "type": "JSFunction", + "value": "(rowData, action, table) => {\n return table.editRow(rowData).then((row) => {\n console.log(row);\n })}" + } + } + } + } + } + } + ], + "supports": { + "style": true, + "events": [ + "onFetchData", + "onSelect", + "onRowClick", + "onRowMouseEnter", + "onRowMouseLeave", + "onResizeChange", + "onColumnsChange", + "onRowOpen", + "onShowSearch", + "onHideSearch" + ] + } + }, + "icon": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png", + "category": "内容" + }, + { + "componentName": "NextText", + "title": "文本", + "category": "常用", + "npm": { + "package": "@alife/container", + "version": "0.3.7", + "exportName": "Text", + "main": "lib/index.js", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "classname", + "propType": "bool", + "defaultValue": true + }, + { + "name": "type", + "title": "字体大小", + "extraProps": { + "defaultValue": "body2" + }, + "defaultValue": "body2", + "initialValue": "body2", + "setter": { + "componentName": "SelectSetter", + "initialValue": "body2", + "props": { + "defaultValue": "body2", + "options": [ + { + "title": "默认", + "value": "inherit" + }, + { + "title": "h1", + "value": "h1" + }, + { + "title": "h2", + "value": "h2" + }, + { + "title": "h3", + "value": "h3" + }, + { + "title": "h4", + "value": "h4" + }, + { + "title": "h5", + "value": "h5" + }, + { + "title": "h6", + "value": "h6" + }, + { + "title": "body1", + "value": "body1" + }, + { + "title": "body2", + "value": "body2" + }, + { + "title": "caption", + "value": "caption" + }, + { + "title": "overline", + "value": "overline" + } + ] + } + } + }, + { + "name": "children", + "propType": "string" + }, + { + "name": "mark", + "title": "标记", + "propType": "bool", + "description": "添加标记样式", + "defaultValue": false + }, + { + "name": "code", + "title": "代码", + "propType": "bool", + "description": "添加代码样式", + "defaultValue": false + }, + { + "name": "delete", + "title": "删除线", + "propType": "bool", + "description": "添加删除线样式", + "defaultValue": false + }, + { + "name": "underline", + "title": "下划线", + "propType": "bool", + "description": "添加下划线样式", + "defaultValue": false + }, + { + "name": "strong", + "propType": "bool", + "description": "是否加粗", + "defaultValue": false + }, + { + "name": "onClick", + "propType": "func", + "description": "鼠标点击" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "classname", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文本内容", + "en_US": "Text" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性：children | 说明：文本内容", + "en_US": "prop: children | description: text of the content" + } + }, + "setter": "TextAreaSetter" + } + ] + } + } + }, + { + "componentName": "Wrapper", + "title": "备注容器", + "category": "Others", + "npm": { + "package": "@alifd/ali-lowcode-components", + "version": "latest", + "exportName": "NoteWrapper", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "note", + "propType": "string", + "defaultValue": "这是一个备注" + } + ], + "configure": { + "component": { + "isContainer": true, + "isModal": false + }, + "props": [ + { + "name": "style", + "setter": "StyleSetter" + }, + { + "name": "note", + "propType": "string", + "setter": "StringSetter" + } + ] + }, + "icon": "" + }, + { + "componentName": "NumberPicker", + "title": "数字输入框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "NumberPicker", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["large", "medium"] + }, + "description": "大小", + "defaultValue": "medium" + }, + { + "name": "type", + "propType": { + "type": "oneOf", + "value": ["normal", "inline"] + }, + "description": "设置类型", + "defaultValue": "normal" + }, + { + "name": "value", + "propType": "number", + "description": "当前值" + }, + { + "name": "defaultValue", + "propType": "number", + "description": "默认值" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "step", + "propType": "number", + "description": "步长", + "defaultValue": 1 + }, + { + "name": "precision", + "propType": "number", + "description": "保留小数点后位数", + "defaultValue": 0 + }, + { + "name": "editable", + "propType": "bool", + "description": "用户是否可以输入", + "defaultValue": true + }, + { + "name": "autoFocus", + "propType": "bool", + "description": "自动焦点" + }, + { + "name": "max", + "propType": "number", + "description": "最大值", + "defaultValue": null + }, + { + "name": "min", + "propType": "number", + "description": "最小值", + "defaultValue": null + }, + { + "name": "format", + "propType": "func", + "description": "格式化当前值" + }, + { + "name": "upBtnProps", + "propType": "object", + "description": "增加按钮的props" + }, + { + "name": "downBtnProps", + "propType": "object", + "description": "减少按钮的props" + }, + { + "name": "label", + "propType": "string", + "description": "内联 label" + }, + { + "name": "innerAfter", + "propType": { + "type": "oneOfType", + "value": ["string", "icon"] + }, + "description": "inner after" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态" + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {number} value 评分值" + }, + { + "name": "onChange", + "propType": "func", + "description": "数值被改变的事件\n@param {Number} value 数据\n@param {Event} e DOM事件对象" + }, + { + "name": "onKeyDown", + "propType": "func", + "description": "键盘按下" + }, + { + "name": "onFocus", + "propType": "func", + "description": "焦点获得" + }, + { + "name": "onBlur", + "propType": "func", + "description": "焦点失去" + }, + { + "name": "onCorrect", + "propType": "func", + "description": "数值订正后的回调\n@param {Object} obj {currentValue,oldValue:String}" + }, + { + "name": "onDisabled", + "propType": "func" + }, + { + "name": "className", + "propType": "string", + "description": "自定义class" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + } + ], + "configure": { + "props": [ + { + "name": "value", + "title": "当前值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "defaultValue", + "title": "默认值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 尺寸\n@enumdesc 小, 中, 大", + "en_US": "prop: size | description: size" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "defaultValue": "medium" + }, + { + "name": "type", + "title": "类型", + "defaultValue": "normal", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "普通", + "value": "normal" + }, + { + "title": "内联", + "value": "inline" + } + ] + } + }, + "ExpressionSetter" + ] + } + } + }, + { + "name": "innerAfter", + "title": "单位", + "setter": ["StringSetter", "ExpressionSetter"] + }, + { + "name": "step", + "title": "步长", + "defaultValue": 1, + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "precision", + "title": "小数位数", + "defaultValue": 0, + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "max", + "title": "最大值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "min", + "title": "最小值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "editable", + "title": "可以输入", + "defaultValue": true, + "setter": ["BoolSetter", "ExpressionSetter"] + }, + { + "name": "format", + "title": "格式化", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + } + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + }, + { + "name": "style", + "setter": { + "componentName": "StyleSetter" + } + } + ], + "supports": { + "events": ["onChange", "onKeyDown", "onFocus", "onBlur", "onCorrect"] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Page", + "title": "页面", + "props": [ + { + "name": "style", + "propType": "object", + "defaultValue": { + "padding": 12 + } + } + ], + "configure": { + "supports": { + "style": true + }, + "component": { + "isContainer": true, + "disableBehaviors": "*", + "nestingRule": { + "childWhitelist": ["NextPage"] + } + } + }, + "category": "基础" + }, + { + "componentName": "Pagination", + "title": "翻页器", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Pagination", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "type", + "title": { + "label": "组件类型", + "tip": "分页组件类型" + }, + "propType": { + "type": "oneOf", + "value": ["normal", "simple", "mini"] + }, + "description": "分页组件类型", + "defaultValue": "normal" + }, + { + "name": "shape", + "title": { + "label": "按钮样式", + "tip": "前进后退按钮样式" + }, + "propType": { + "type": "oneOf", + "value": ["normal", "arrow-only", "arrow-prev-only", "no-border"] + }, + "description": "前进后退按钮样式", + "defaultValue": "normal" + }, + { + "name": "size", + "title": { + "label": "尺寸", + "tip": "分页组件大小" + }, + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "分页组件大小", + "defaultValue": "medium" + }, + { + "name": "current", + "propType": "number", + "description": "（受控）当前页码" + }, + { + "name": "defaultCurrent", + "title": { + "label": "初始页码", + "tip": "（非受控）初始页码" + }, + "propType": "number", + "description": "（非受控）初始页码", + "defaultValue": 1 + }, + { + "name": "onChange", + "propType": "func", + "description": "页码发生改变时的回调函数\n@param {Number} current 改变后的页码数\n@param {Object} e 点击事件对象" + }, + { + "name": "total", + "propType": "number", + "description": "总记录数", + "defaultValue": 100 + }, + { + "name": "totalRender", + "propType": "func", + "title": { + "label": "总数渲染", + "tip": "总数的渲染函数\n@param {Number} total 总数\n@param {Array} range 当前数据在总数中的区间" + } + }, + { + "name": "pageShowCount", + "propType": "number", + "title": { + "label": "显示页数", + "tip": "页码显示的数量，更多的使用...代替" + }, + "defaultValue": 5 + }, + { + "name": "pageSize", + "title": { + "label": "单页记录", + "tip": "一页中的记录数" + }, + "propType": "number", + "description": "一页中的记录数", + "defaultValue": 10 + }, + { + "name": "pageSizeSelector", + "title": { + "label": "选择器类型", + "tip": "每页显示选择器类型" + }, + "propType": { + "type": "oneOf", + "value": [false, "filter", "dropdown"] + }, + "description": "每页显示选择器类型", + "defaultValue": false + }, + { + "name": "pageNumberRender", + "propType": "func", + "title": { + "label": "自定义页码", + "tip": "自定义页码渲染函数，函数作用于页码button以及当前页/总页数的数字渲染\n@param {Number} index 分页的页码，从1开始\n@return {ReactNode} 返回渲染结果" + } + }, + { + "name": "pageSizePosition", + "title": { + "label": "选择器位置", + "tip": "每页显示选择器在组件中的位置" + }, + "propType": { + "type": "oneOf", + "value": ["start", "end"] + }, + "description": "每页显示选择器在组件中的位置", + "defaultValue": "start" + }, + { + "name": "onPageSizeChange", + "propType": "func", + "description": "每页显示记录数量改变时的回调函数\n@param {Number} pageSize 改变后的每页显示记录数" + }, + { + "name": "hideOnlyOnePage", + "propType": "bool", + "title": { + "label": "单页隐藏", + "tip": "当分页数为1时，是否隐藏分页器" + }, + "defaultValue": false + }, + { + "name": "showJump", + "propType": "bool", + "title": { + "label": "显示跳转", + "tip": "type 设置为 normal 时，在页码数超过5页后，会显示跳转输入框与按钮，当设置 showJump 为 false 时，不再显示该跳转区域" + }, + "defaultValue": true + }, + { + "name": "link", + "title": { + "label": "跳转链接", + "tip": "设置页码按钮的跳转链接，它的值为一个包含 {page} 的模版字符串" + }, + "propType": "string", + "description": "设置页码按钮的跳转链接，它的值为一个包含 {page} 的模版字符串" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "rtl", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "current", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "title": { + "label": "当前页面", + "tip": "（受控）当前页码" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["NumberSetter", "ExpressionSetter"] + } + } + }, + { + "name": "total", + "title": { + "label": "总记录数", + "tip": "总记录数" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["NumberSetter", "ExpressionSetter"] + } + } + } + ] + } + }, + "icon": "", + "category": "导航" + }, + { + "componentName": "Paragraph", + "title": "Paragraph", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Typography", + "main": "", + "destructuring": true, + "subName": "Paragraph" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "component", + "propType": { + "type": "instanceOf", + "value": "elementType" + }, + "description": "设置标签类型", + "defaultValue": "p" + }, + { + "name": "type", + "defaultValue": "long" + }, + { + "name": "size", + "defaultValue": "medium" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "title": "饼图", + "category": "常用图表(试验)", + "componentName": "PieChart", + "icon": "https://unpkg.alibaba-inc.com/@ali/vc-bizcharts@1.1.4/src/vc-PieChart/logo.svg", + "npm": { + "package": "bizcharts", + "version": "4.0.14", + "exportName": "PieChart", + "main": "", + "destructuring": true, + "subName": "" + }, + "configure": { + "props": [ + { + "name": "angleField", + "title": "占比字段", + "tip": "扇形切片大小（弧度）所对应的数据字段名", + "setter": "StringSetter" + }, + { + "name": "colorField", + "title": "颜色字段", + "tip": "扇形颜色映射对应的数据字段名", + "setter": "StringSetter" + }, + { + "name": "titleConfig", + "title": "标题配置", + "display": "block", + "type": "group", + "items": [ + { + "name": "title.text", + "title": "标题", + "setter": "StringSetter" + }, + { + "name": "title.visible", + "title": "是否展示", + "setter": "BoolSetter" + } + ] + }, + { + "name": "descriptionConfig", + "title": "描述配置", + "display": "block", + "type": "group", + "items": [ + { + "name": "description.text", + "title": "描述", + "setter": "StringSetter" + }, + { + "name": "description.visible", + "title": "是否展示", + "setter": "BoolSetter" + } + ] + }, + { + "name": "data", + "title": "图表数据", + "tip": "配置图表数据", + "setter": "JsonSetter" + } + ], + "supports": { + "style": true + } + } + }, + { + "componentName": "PopupItem", + "title": "PopupItem", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Nav", + "main": "", + "destructuring": true, + "subName": "PopupItem" + }, + "props": [ + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "icon", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "instanceOf", + "value": "node" + } + ] + }, + "description": "自定义图标，可以使用 Icon 的 type, 也可以使用组件 ``" + }, + { + "name": "label", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "标签内容" + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "弹出内容" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "Progress", + "title": "进度指示器", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Progress", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "shape", + "propType": { + "type": "oneOf", + "value": ["circle", "line"] + }, + "description": "形态", + "defaultValue": "line" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "尺寸", + "defaultValue": "medium" + }, + { + "name": "percent", + "title": "百分比", + "propType": "number", + "description": "所占百分比", + "defaultValue": 0 + }, + { + "name": "state", + "title": "进度状态", + "propType": { + "type": "oneOf", + "value": ["normal", "success", "error"] + }, + "description": "进度状态, 显示优先级: color > progressive > state", + "defaultValue": "normal" + }, + { + "name": "progressive", + "title": { + "label": "色阶变化", + "tip": "是否为色彩阶段变化模式, 显示优先级: color > progressive > state" + }, + "propType": "bool", + "description": "是否为色彩阶段变化模式, 显示优先级: color > progressive > state", + "defaultValue": false + }, + { + "name": "hasBorder", + "title": "边框", + "propType": "bool", + "description": "是否添加 Border（只适用于 Line Progress)", + "defaultValue": false + }, + { + "name": "textRender", + "title": { + "label": "文本渲染", + "tip": "文本渲染函数\n@param {Number} percent 当前的进度信息\n@param {Object} option 额外的参数\n@property {Boolean} option.rtl 是否在rtl 模式下渲染\n@return {ReactNode} 返回文本节点" + }, + "propType": "func", + "description": "文本渲染函数\n@param {Number} percent 当前的进度信息\n@param {Object} option 额外的参数\n@property {Boolean} option.rtl 是否在rtl 模式下渲染\n@return {ReactNode} 返回文本节点" + }, + { + "name": "color", + "propType": "string", + "description": "进度条颜色, 显示优先级: color > progressive > state" + }, + { + "name": "backgroundColor", + "propType": "string", + "description": "背景色" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "rtl", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "color", + "title": { + "label": "进度条颜色", + "tip": "color|进度条颜色, 显示优先级: color > progressive > state" + }, + "setter": { + "componentName": "ColorSetter" + } + }, + { + "name": "backgroundColor", + "title": { + "label": "背景色", + "tip": "backgroundColor|背景色" + }, + "setter": { + "componentName": "ColorSetter" + } + } + ] + } + }, + "icon": "", + "category": "反馈" + }, + { + "componentName": "RadioItem", + "title": "单选菜单项", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Menu", + "main": "", + "destructuring": true, + "subName": "RadioItem" + }, + "props": [ + { + "name": "checked", + "propType": "bool", + "description": "是否选中", + "defaultValue": false + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "onChange", + "propType": "func", + "description": "选中或取消选中触发的回调函数\n@param {Boolean} checked 是否选中\n@param {Object} event 选中事件对象" + }, + { + "name": "helper", + "propType": "node", + "description": "帮助文本" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["Menu", "SubMenu", "Menu.Group", "MenuButton"] + } + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Radio.Group", + "title": "单选框组", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Radio", + "main": "", + "destructuring": true, + "subName": "Group" + }, + "props": [ + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "name", + "propType": "string", + "description": "name" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["large", "medium", "small"] + }, + "description": "尺寸", + "defaultValue": "medium" + }, + { + "name": "shape", + "propType": { + "type": "oneOf", + "value": ["normal", "button"] + }, + "description": "展示形态" + }, + { + "name": "value", + "propType": { + "type": "oneOfType", + "value": ["string", "number", "bool"] + }, + "description": "选中项的值" + }, + { + "name": "defaultValue", + "propType": { + "type": "oneOfType", + "value": ["string", "number", "bool"] + }, + "description": "默认值" + }, + { + "name": "component", + "propType": "string", + "description": "设置标签类型", + "defaultValue": "div" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否被禁用" + }, + { + "name": "dataSource", + "propType": "object", + "description": "可选项列表" + }, + { + "name": "itemDirection", + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "子项目的排列方式", + "defaultValue": "hoz" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态", + "defaultValue": false + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {number} value 评分值" + }, + { + "name": "onChange", + "propType": "func", + "description": "选中值改变时的事件\n@param {String/Number} value 选中项的值\n@param {Event} e Dom 事件对象" + } + ], + "configure": { + "props": [ + { + "name": "shape", + "title": "展示形状", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "默认", + "value": "normal" + }, + { + "title": "按钮", + "value": "button" + } + ] + } + }, + "defaultValue": "normal" + }, + { + "name": "disabled", + "title": "是否禁用", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + } + }, + { + "name": "itemDirection", + "title": "排列方式", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "水平排列", + "value": "hoz" + }, + { + "title": "垂直排列", + "value": "ver" + } + ] + } + }, + "defaultValue": "hoz" + }, + { + "name": "isPreview", + "title": "预览态", + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "defaultValue", + "title": "默认值", + "defaultValue": "", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + } + }, + { + "name": "dataSource", + "display": "block", + "title": "选项", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "label", + "title": "label", + "setter": "StringSetter" + }, + { + "name": "value", + "title": "value", + "setter": "StringSetter" + } + ] + } + }, + "initialValue": { + "label": "选项一", + "value": "1" + } + } + } + }, + "ExpressionSetter" + ] + } + } + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ], + "supports": { + "style": true, + "events": ["onChange"] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Radio", + "title": "单选框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Radio", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "id", + "propType": "string", + "description": "input元素id" + }, + { + "name": "name", + "propType": "string", + "description": "name" + }, + { + "name": "checked", + "propType": "bool", + "description": "是否选中" + }, + { + "name": "defaultChecked", + "propType": "bool", + "description": "是否默认选中" + }, + { + "name": "label", + "propType": "string", + "description": "通过属性配置label" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否被禁用" + }, + { + "name": "value", + "propType": { + "type": "oneOfType", + "value": ["string", "number", "bool"] + }, + "description": "value" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态", + "defaultValue": false + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容" + }, + { + "name": "onChange", + "propType": "func", + "description": "状态变化时触发的事件\n@param {Boolean} checked 是否选中\n@param {Event} e Dom 事件对象" + }, + { + "name": "onMouseEnter", + "propType": "func", + "description": "鼠标进入enter事件\n@param {Event} e Dom 事件对象" + }, + { + "name": "onMouseLeave", + "propType": "func", + "description": "鼠标离开事件\n@param {Event} e Dom 事件对象" + } + ], + "icon": "", + "category": "内容" + }, + { + "componentName": "RangeCalendar", + "title": "RangeCalendar", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Calendar", + "main": "", + "destructuring": true, + "subName": "RangeCalendar" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "description": "样式前缀", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "defaultStartValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "默认的开始日期" + }, + { + "name": "defaultEndValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "默认的结束日期" + }, + { + "name": "startValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "开始日期（moment 对象）" + }, + { + "name": "endValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "结束日期（moment 对象）" + }, + { + "name": "disableChangeMode", + "propType": "bool", + "defaultValue": false + }, + { + "name": "format", + "propType": "string", + "defaultValue": "YYYY-MM-DD" + }, + { + "name": "showOtherMonth", + "propType": "bool", + "description": "是否显示非本月的日期", + "defaultValue": false + }, + { + "name": "defaultVisibleMonth", + "propType": "func", + "description": "模板展示的月份（起始月份）" + }, + { + "name": "onVisibleMonthChange", + "propType": "func", + "description": "展现的月份变化时的回调\n@param {Object} value 显示的月份 (moment 对象)\n@param {String} reason 触发月份改变原因" + }, + { + "name": "disabledDate", + "propType": "func", + "description": "不可选择的日期\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\n@returns {Boolean}" + }, + { + "name": "onSelect", + "propType": "func", + "description": "选择日期单元格时的回调\n@param {Object} value 对应的日期值 (moment 对象)" + }, + { + "name": "dateCellRender", + "propType": "func", + "description": "自定义日期单元格渲染" + }, + { + "name": "monthCellRender", + "propType": "func", + "description": "自定义月份渲染函数\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@returns {ReactNode}" + }, + { + "name": "yearCellRender", + "propType": "func" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "startValue", + "setter": "DateSetter" + }, + { + "name": "defaultStartValue", + "setter": "DateSetter" + }, + { + "name": "defaultEndValue", + "setter": "DateSetter" + }, + { + "name": "endValue", + "setter": "DateSetter" + } + ] + } + }, + "category": "基础" + }, + { + "componentName": "RangePicker", + "title": "日期区段选择", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "DatePicker", + "main": "", + "destructuring": true, + "subName": "RangePicker" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "type", + "propType": { + "type": "oneOf", + "value": ["date", "month", "year"] + }, + "description": "日期范围类型", + "defaultValue": "date" + }, + { + "name": "defaultVisibleMonth", + "propType": "func", + "description": "默认展示的起始月份\n@return {MomentObject} 返回包含指定月份的 moment 对象实例" + }, + { + "name": "onVisibleMonthChange", + "propType": "func" + }, + { + "name": "value", + "propType": "array", + "description": "日期范围值数组 [moment, moment]" + }, + { + "name": "defaultValue", + "propType": "array", + "description": "初始的日期范围值数组 [moment, moment]" + }, + { + "name": "format", + "propType": "string", + "description": "日期格式", + "defaultValue": "YYYY-MM-DD" + }, + { + "name": "showTime", + "propType": "bool", + "description": "是否使用时间控件，支持传入 TimePicker 的属性", + "defaultValue": false + }, + { + "name": "resetTime", + "propType": "bool", + "description": "每次选择是否重置时间（仅在 showTime 开启时有效）", + "defaultValue": false + }, + { + "name": "disabledDate", + "propType": "func", + "description": "禁用日期函数\n@param {MomentObject} 日期值\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\n@return {Boolean} 是否禁用" + }, + { + "name": "footerRender", + "propType": "func", + "description": "自定义面板页脚\n@return {Node} 自定义的面板页脚组件" + }, + { + "name": "onChange", + "propType": "func", + "description": "日期范围值改变时的回调 [ MomentObject|String, MomentObject|String ]\n@param {Array} value 日期值" + }, + { + "name": "onOk", + "propType": "func", + "description": "点击确认按钮时的回调 返回开始时间和结束时间`[ MomentObject|String, MomentObject|String ]`\n@return {Array} 日期范围" + }, + { + "name": "label", + "propType": "string", + "description": "输入框内置标签" + }, + { + "name": "state", + "propType": { + "type": "oneOf", + "value": ["error", "loading", "success"] + }, + "description": "输入框状态" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "输入框尺寸", + "defaultValue": "medium" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "hasClear", + "propType": "bool", + "description": "是否显示清空按钮", + "defaultValue": true + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层显示状态" + }, + { + "name": "defaultVisible", + "propType": "bool", + "description": "弹层默认是否显示", + "defaultValue": false + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层展示状态变化时的回调\n@param {Boolean} visible 弹层是否显示\n@param {String} type 触发弹层显示和隐藏的来源 okBtnClick 表示由确认按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "popupTriggerType", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "弹层触发方式", + "defaultValue": "click" + }, + { + "name": "popupAlign", + "propType": "string", + "description": "弹层对齐方式, 具体含义见 OverLay文档", + "defaultValue": "tl tl" + }, + { + "name": "popupContainer", + "propType": "node", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹层自定义样式类" + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "startDateInputAriaLabel", + "propType": "string", + "description": "开始日期输入框的 aria-label 属性" + }, + { + "name": "startTimeInputAriaLabel", + "propType": "string", + "description": "开始时间输入框的 aria-label 属性" + }, + { + "name": "endDateInputAriaLabel", + "propType": "string", + "description": "结束日期输入框的 aria-label 属性" + }, + { + "name": "endTimeInputAriaLabel", + "propType": "string", + "description": "结束时间输入框的 aria-label 属性" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "name", + "propType": "string" + }, + { + "name": "popupComponent", + "propType": "string" + }, + { + "name": "popupContent", + "propType": "node" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "supports": { + "style": true, + "events": ["onVisibleMonthChange", "onChange", "onOk", "onVisibleChange"] + }, + "props": [ + { + "name": "defaultValue", + "title": { + "label": "默认值", + "tip": "初始的日期范围值数组 [moment, moment]" + }, + "setter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": 0, + "title": "开始时间", + "setter": "DateSetter" + }, + { + "name": 1, + "title": "结束时间", + "setter": "DateSetter" + } + ] + } + } + } + }, + { + "name": "type", + "title": "日期类型", + "setter": { + "setter": "RadioGroupSetter", + "props": { + "options": ["date", "month", "year"] + } + }, + "description": "日期范围类型", + "defaultValue": "date" + }, + { + "name": "label", + "title": "内置标签", + "setter": "StringSetter", + "description": "输入框内置标签" + }, + { + "name": "state", + "title": "输入状态", + "setter": { + "setter": "RadioGroupSetter", + "props": { + "options": ["error", "loading", "success"] + } + }, + "description": "输入框状态" + }, + { + "name": "size", + "title": "尺寸", + "setter": { + "setter": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "description": "输入框尺寸", + "defaultValue": "medium" + }, + { + "name": "disabled", + "setter": "BoolSetter", + "title": "是否禁用" + }, + { + "name": "hasClear", + "setter": "BoolSetter", + "title": "清空按钮", + "defaultValue": true + }, + { + "name": "defaultVisible", + "setter": "BoolSetter", + "title": "显示弹层", + "defaultValue": false + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ] + }, + "category": "内容", + "icon": "" + }, + { + "componentName": "Range", + "title": "区段选择器", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Range", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "id", + "propType": "string" + }, + { + "name": "name", + "propType": "string", + "description": "name" + }, + { + "name": "value", + "propType": "number", + "description": "分值" + }, + { + "name": "slider", + "title": { + "label": "滑块个数", + "tip": "滑块个数: 单个, 两个" + }, + "propType": { + "type": "oneOf", + "value": ["single", "double"] + }, + "description": "滑块个数\n@enumdesc 单个, 两个", + "defaultValue": "single" + }, + { + "name": "min", + "title": { + "label": "最小值" + }, + "propType": "number", + "description": "最小值", + "defaultValue": 0 + }, + { + "name": "max", + "title": { + "label": "最大值" + }, + "propType": "number", + "description": "最大值", + "defaultValue": 100 + }, + { + "name": "step", + "title": { + "label": "步长", + "tip": "步长，取值必须大于 0，并且可被 (max - min) 整除。" + }, + "propType": "number", + "description": "步长，取值必须大于 0，并且可被 (max - min) 整除。", + "defaultValue": 1 + }, + { + "name": "marksPosition", + "title": { + "label": "Marks 位置", + "tip": "marksPosition|marks显示在上方('above')or下方('below')" + }, + "propType": { + "type": "oneOf", + "value": ["above", "below"] + }, + "description": "marks显示在上方('above')or下方('below')", + "defaultValue": "above" + }, + { + "name": "disabled", + "propType": "bool", + "description": "值为 `true` 时，滑块为禁用状态", + "defaultValue": false + }, + { + "name": "onChange", + "propType": "func", + "description": "当 Range 的值发生改变后，会触发 onChange 事件，并把改变后的值作为参数传入, 如果设置了value, 要配合此函数做受控使用\n@param {String/number} value" + }, + { + "name": "onProcess", + "propType": "func", + "description": "滑块拖动的时候触发的事件,不建议在这里setState, 一般情况下不需要用, 滑动时有特殊需求时使用\n@param {String/number} value" + }, + { + "name": "hasTip", + "title": { + "label": "是否显示 tip", + "tip": "hasTip" + }, + "propType": "bool", + "description": "是否显示 tip", + "defaultValue": true + }, + { + "name": "reverse", + "title": { + "label": "选中态反转", + "tip": "reverse" + }, + "propType": "bool", + "description": "选中态反转", + "defaultValue": false + }, + { + "name": "pure", + "propType": "bool", + "description": "是否pure render", + "defaultValue": false + }, + { + "name": "fixedWidth", + "propType": "bool", + "description": "是否为拖动线段类型,默认slider为double, defaultValue必传且指定区间", + "defaultValue": false + }, + { + "name": "tooltipVisible", + "propType": "bool", + "description": "tooltip是否默认展示", + "defaultValue": false + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态", + "defaultValue": false + } + ], + "configure": { + "props": [ + { + "name": "value", + "title": "当前值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "defaultValue", + "title": "默认值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "min", + "title": { + "label": "最小值" + }, + "setter": "NumberSetter", + "description": "最小值", + "defaultValue": 0 + }, + { + "name": "max", + "title": { + "label": "最大值" + }, + "setter": "NumberSetter", + "description": "最大值", + "defaultValue": 100 + }, + { + "name": "step", + "title": { + "label": "步长", + "tip": "步长，取值必须大于 0，并且可被 (max - min) 整除。" + }, + "setter": "NumberSetter", + "description": "步长，取值必须大于 0，并且可被 (max - min) 整除。", + "defaultValue": 1 + }, + { + "name": "slider", + "title": { + "label": "滑块个数", + "tip": "滑块个数: 单个, 两个" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["single", "double"] + } + }, + "description": "滑块个数\n@enumdesc 单个, 两个", + "defaultValue": "single" + }, + { + "name": "marksPosition", + "title": { + "label": "Marks 位置", + "tip": "marksPosition|marks显示在上方('above')or下方('below')" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["above", "below"] + } + }, + "description": "marks显示在上方('above')or下方('below')", + "defaultValue": "above" + }, + { + "name": "disabled", + "title": "是否禁用", + "setter": "BoolSetter", + "description": "值为 `true` 时，滑块为禁用状态", + "defaultValue": false + }, + { + "name": "hasTip", + "title": { + "label": "显示 Tip", + "tip": "hasTip" + }, + "setter": "BoolSetter", + "description": "是否显示 tip", + "defaultValue": true + }, + { + "name": "fixedWidth", + "title": "固定宽度", + "setter": "BoolSetter", + "description": "是否为拖动线段类型,默认slider为double, defaultValue必传且指定区间", + "defaultValue": false + }, + { + "name": "tooltipVisible", + "display": "block", + "setter": "BoolSetter", + "title": "tooltip是否默认展示", + "defaultValue": false + }, + { + "name": "reverse", + "display": "block", + "title": { + "label": "选中态反转", + "tip": "reverse" + }, + "setter": "BoolSetter", + "description": "选中态反转", + "defaultValue": false + }, + { + "name": "isPreview", + "display": "block", + "setter": "BoolSetter", + "title": "是否为预览态", + "defaultValue": false + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ] + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Rating", + "title": "评分", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Rating", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "name", + "propType": "string", + "description": "name" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "defaultValue", + "propType": "number", + "description": "默认值", + "defaultValue": 0 + }, + { + "name": "value", + "propType": "number", + "description": "值" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "尺寸", + "defaultValue": "medium" + }, + { + "name": "count", + "propType": "number", + "description": "评分的总数", + "defaultValue": 5 + }, + { + "name": "showGrade", + "propType": "bool", + "description": "是否显示 grade", + "defaultValue": false + }, + { + "name": "allowHalf", + "propType": "bool", + "description": "是否允许半星评分", + "defaultValue": false + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态", + "defaultValue": false + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容" + }, + { + "name": "readOnly", + "propType": "bool", + "description": "是否为只读态，效果上同 disabeld", + "defaultValue": false + }, + { + "name": "onChange", + "propType": "func", + "description": "用户点击评分时触发的回调\n@param {String} value 评分值" + }, + { + "name": "onHoverChange", + "propType": "func", + "description": "用户hover评分时触发的回调\n@param {String} value 评分值" + } + ], + "configure": { + "props": [ + { + "name": "value", + "title": "当前值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "defaultValue", + "title": "默认值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 尺寸\n@enumdesc 小, 中, 大", + "en_US": "prop: size | description: size" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "defaultValue": "medium" + }, + { + "name": "count", + "title": "评分总数", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "allowHalf", + "title": "半星评分", + "setter": ["BoolSetter", "ExpressionSetter"] + }, + { + "name": "showGrade", + "title": "显示分数", + "setter": ["BoolSetter", "ExpressionSetter"] + }, + { + "name": "readAs", + "title": "评分文案生成方法", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + } + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + }, + { + "name": "style", + "setter": { + "componentName": "StyleSetter" + } + } + ], + "supports": { + "events": ["onChange", "onHoverChange"] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "ResponsiveGrid.Cell", + "title": "布局容器 Cell", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "ResponsiveGrid", + "main": "", + "destructuring": true, + "subName": "Cell" + }, + "props": [ + { + "name": "colSpan", + "propType": "number", + "description": "横向，占据几列" + }, + { + "name": "rowSpan", + "propType": "number", + "description": "纵向，占据几行" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + } + }, + "experimental": { + "getResizingHandlers": { + "type": "JSFunction", + "value": "node => {\n const currentNodeIndex = node.getIndex();\n const parent = node.getParent();\n if (!parent) return [];\n let layout = parent.getPropValue(\"layout\");\n if (!layout) return [];\n layout = layout.split(\":\").map(item => parseInt(item, 10));\n \n if (currentNodeIndex >= layout.length - 1) {\n return [];\n }\n return [\"e\"];\n }" + }, + "callbacks": { + "onResizeStart": { + "type": "JSFunction", + "value": "(e, currentNode) => {\n const { trigger } = e;\n let nodeIndex = currentNode.getIndex();\n let startLayout = currentNode.getParent().getPropValue(\"layout\");\n startLayout = startLayout.split(\":\").map(item => parseInt(item, 10));\n let eachWidth = currentNode.getRect().width / startLayout[nodeIndex];\n \n currentNode.nodeIndex = nodeIndex;\n currentNode.startLayout = startLayout;\n currentNode.eachWidth = eachWidth;\n }" + }, + "onResize": { + "type": "JSFunction", + "value": "(e, currentNode) => {\n const { trigger, deltaX, deltaY } = e;\n const { nodeIndex, startLayout, eachWidth } = currentNode;\n let moveColumn = Math.round(deltaX / eachWidth);\n const layout = [...startLayout]; \n if (moveColumn > 0) {\n moveColumn = Math.min(moveColumn, layout[nodeIndex + 1] - 1);\n } else {\n moveColumn = -Math.min(-moveColumn, layout[nodeIndex] - 1);\n }\n layout[nodeIndex] += moveColumn;\n layout[nodeIndex + 1] -= moveColumn;\n \n let nextNode = currentNode\n .getParent()\n .getChildren()\n .filter((c, index) => {\n return index === nodeIndex + 1;\n });\n \n currentNode.setPropValue(\"colSpan\", layout[nodeIndex]);\n \n if (nextNode && nextNode[0]) {\n nextNode[0].setPropValue(\"colSpan\", layout[nodeIndex + 1]);\n }\n \n currentNode.getParent().setPropValue(\"layout\", layout.join(\":\"));\n }" + } + } + }, + "icon": "", + "category": "容器" + }, + { + "componentName": "ResponsiveGrid", + "title": "布局容器", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "ResponsiveGrid", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "any" + }, + { + "name": "device", + "propType": { + "type": "oneOf", + "value": ["phone", "tablet", "desktop"] + }, + "description": "设备，用来做自适应，默认为PC", + "defaultValue": "desktop" + }, + { + "name": "columns", + "propType": "number", + "description": "分为几列", + "defaultValue": 12 + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": [ + { + "name": "layout", + "title": "布局", + "defaultValue": "6:6", + "setter": { + "componentName": "StringSetter" + }, + "extraProps": { + "setValue": { + "type": "JSFunction", + "value": "setValue(target, value) {\n \n let arrValue = value.split(\":\");\n arrValue = arrValue.filter(item => {\n return item && item.trim(); \n });\n const flag = arrValue.find(item => {\n return isNaN(Number(item));\n });\n if (flag) {\n return;\n }\n const node = target.getNode();\n node.children.mergeChildren(\n (child, index) => {\n child.setPropValue(\"colSpan\", arrValue[index]);\n return index >= arrValue.length;\n },\n children => {\n let l = children.length;\n const items = [];\n while (l++ < arrValue.length) {\n items.push({\n componentName: \"ResponsiveGrid.Cell\",\n props: {\n colSpan: arrValue[l - 1] || 1\n }\n });\n }\n return items;\n },\n null\n );\n }" + } + } + }, + { + "name": "gap", + "title": "列间距", + "defaultValue": 0, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "NumberSetter", + "props": { + "defaultValue": 8 + } + }, + { + "componentName": "JsonSetter", + "props": { + "defaultValue": [8, 4] + } + }, + "ExpressionSetter" + ] + } + } + }, + { + "name": "dense", + "title": "紧密模式", + "defaultValue": false, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + } + }, + { + "name": "style", + "setter": { + "componentName": "StyleSetter" + } + } + ] + }, + "icon": "", + "category": "容器" + }, + { + "componentName": "RichText", + "title": "需求占位", + "npm": { + "package": "@alifd/ali-lowcode-components", + "version": "latest", + "exportName": "RichText", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "override": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "maxHeight", + "title": "最大高度", + "propType": "number", + "setter": "NumberSetter", + "description": "最大高度" + }, + { + "name": "content", + "title": "需求内容", + "display": "inline", + "supportVariable": true, + "setter": { + "componentName": "EditSetter", + "props": { + "title": "点击编辑需求内容" + } + } + } + ] + } + }, + "experimental": { + "getResizingHandlers": { + "type": "JSFunction", + "value": "() => {\n return [\"e\"];\n }" + }, + "callbacks": { + "onResizeStart": { + "type": "JSFunction", + "value": "(e, currentNode) => {\n const parent = currentNode.getParent();\n if (parent) {\n const parentNode = parent.getDOMNode();\n if (parentNode) {\n currentNode.parentRect = parentNode.getBoundingClientRect();\n }\n }\n currentNode.beforeSpan = currentNode.getPropValue(\"colSpan\") || 12;\n currentNode.startRect = currentNode.getRect();\n }" + }, + "onResize": { + "type": "JSFunction", + "value": "(e, currentNode) => {\n const { deltaX } = e;\n const startWidth = currentNode.startRect\n ? currentNode.startRect.width\n : currentNode.beforeSpan * (currentNode.parentRect.width / 12);\n let width = startWidth + deltaX;\n if (!currentNode.startRect) {\n currentNode.startRect = {\n width\n };\n }\n width = Math.max(0, width); \n width = Math.min(width, currentNode.parentRect.width); \n currentNode.getDOMNode().style[\"width\"] = `${Math.round(width)}px`;\n }" + }, + "onResizeEnd": { + "type": "JSFunction", + "value": "(e, currentNode) => {\n currentNode.setPropValue(\"style.width\", currentNode.getDOMNode().style[\"width\"]);\n }" + } + } + }, + "icon": "https://img.alicdn.com/imgextra/i3/O1CN01G7Lc8e1pZL7p4cdKc_!!6000000005374-2-tps-112-112.png", + "category": "常用" + }, + { + "componentName": "Search", + "title": "搜索", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Search", + "main": "", + "destructuring": true, + "subName": "" + }, + "configure": { + "supports": { + "style": true, + "events": ["onChange", "onSearch", "onFilterChange"] + }, + "props": [ + { + "name": "placeholder", + "title": "提示文字", + "setter": "StringSetter", + "description": "默认提示" + }, + { + "name": "defaultValue", + "title": "默认值", + "setter": "StringSetter", + "description": "搜索框默认值" + }, + { + "name": "searchText", + "title": "按钮文案", + "setter": "StringSetter", + "description": "button 的内容" + }, + { + "name": "size", + "title": { + "label": "尺寸", + "tip": "size|'大', '小'" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "large", + "value": "large" + }, + { + "title": "medium", + "value": "medium" + } + ] + } + }, + "description": "大小\n@enumdesc '大', '小'", + "defaultValue": "medium" + }, + { + "name": "shape", + "title": { + "label": "形状", + "tip": "shape|形状" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["normal", "simple"] + } + }, + "description": "形状", + "defaultValue": "normal" + }, + { + "name": "type", + "title": { + "label": "类型", + "tip": "type|类型 shape=normal: primary/secondary; shape=simple: normal/dark;" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["primary", "secondary", "normal", "dark"] + } + }, + "description": "类型 shape=normal: primary/secondary; shape=simple: normal/dark;", + "defaultValue": "normal" + }, + { + "name": "hasClear", + "title": "清除按钮", + "setter": "BoolSetter", + "description": "是否显示清除按钮", + "defaultValue": false + }, + { + "name": "hasIcon", + "title": "搜索图标", + "setter": "BoolSetter", + "description": "是否显示搜索按钮", + "defaultValue": true + }, + { + "name": "disabled", + "title": "是否禁用", + "setter": "BoolSetter", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "dataSource", + "display": "block", + "title": { + "label": "搜索框下拉联想列表", + "tip": "dataSource | 搜索框下拉联想列表" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["JsonSetter", "ExpressionSetter"] + } + } + }, + { + "name": "filter", + "display": "block", + "title": { + "label": "选择器数据", + "tip": "filter|选择器数据" + }, + "setter": { + "componentName": "JsonSetter" + } + }, + { + "name": "defaultFilterValue", + "display": "block", + "title": "选择器默认值", + "setter": "StringSetter", + "description": "选择器默认值" + } + ] + }, + "experimental": { + "initials": [ + { + "name": "dataSource", + "initial": { + "type": "JSFunction", + "value": "() => [\n {\n label: \"Recent\",\n value: \"Recent\"\n },\n {\n label: \"dress\",\n value: \"dress\"\n },\n {\n label: \"sunglasses\",\n value: \"sunglasses\"\n },\n {\n label: \"t-shirt\",\n value: \"t-shirt\"\n }\n ]" + } + } + ] + }, + "icon": "", + "category": "导航" + }, + { + "componentName": "Select.Option", + "title": "Select.Option", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Select", + "main": "", + "destructuring": true, + "subName": "Option" + }, + "props": [ + { + "name": "value", + "propType": "string", + "description": "选项值", + "defaultValue": "test" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + } + ], + "configure": { + "component": { + "isContainer": true + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Select", + "title": "选择器", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Select", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "placeholder", + "title": { + "label": "占位提示", + "tip": "属性: placeholder" + }, + "defaultValue": "请选择", + "propType": "string" + }, + { + "name": "mode", + "propType": { + "type": "oneOf", + "value": ["single", "multiple", "tag"] + }, + "description": "选择器模式" + }, + { + "name": "hasClear", + "title": { + "label": "清除按钮", + "tip": "属性: hasClear" + }, + "propType": "bool", + "defaultValue": false + }, + { + "name": "showSearch", + "title": { + "label": "可搜索", + "tip": "属性: showSearch" + }, + "propType": "bool", + "defaultValue": false + }, + { + "name": "dataSource" + }, + { + "type": "group", + "title": "其他配置", + "display": "block", + "items": [ + { + "name": "id", + "setter": "StringSetter", + "title": "ID" + }, + { + "name": "notFoundContent", + "title": { + "label": "空文案", + "tip": "notFoundContent|弹层内容为空的文案" + }, + "setter": "StringSetter", + "description": "弹层内容为空的文案" + }, + { + "name": "hasBorder", + "title": { + "label": "边框", + "tip": "是否有边框" + }, + "propType": "bool", + "setter": "BoolSetter", + "description": "是否有边框" + }, + { + "name": "autoWidth", + "title": "下拉等宽", + "propType": "bool", + "setter": "BoolSetter" + }, + { + "name": "hasArrow", + "title": "下拉箭头", + "propType": "bool", + "setter": "BoolSetter", + "description": "是否有下拉箭头", + "defaultValue": true + } + ] + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "dataSource", + "display": "block", + "title": "选项", + "tip": { + "title": "数据格式", + "url": "" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "label", + "title": "label", + "setter": "StringSetter" + }, + { + "name": "value", + "title": "value", + "setter": "StringSetter" + } + ] + } + }, + "initialValue": { + "title": "Title" + } + } + } + }, + "ExpressionSetter" + ] + } + } + }, + { + "name": "mode", + "title": { + "label": "模式", + "tip": "属性: mode" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "defaultValue": "single", + "options": [ + { + "value": "single", + "title": "单选" + }, + { + "value": "multiple", + "title": "多选" + }, + { + "value": "tag", + "title": "标签" + } + ] + } + } + } + ] + }, + "supports": { + "style": true, + "events": [ + { + "name": "onChange", + "propType": "func", + "description": "值发生变化" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层显示隐藏变化" + }, + { + "name": "onRemove", + "propType": "func", + "description": "Tag 被删除" + }, + { + "name": "onSearch", + "propType": "func", + "description": "搜索" + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Slider", + "title": "图片轮播", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Slider", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "className", + "propType": "any", + "description": "自定义传入的样式" + }, + { + "name": "slidesToShow", + "title": { + "label": "图片数量", + "tip": "slidesToShow|同时展示的图片数量" + }, + "propType": "number", + "description": "同时展示的图片数量", + "defaultValue": 1 + }, + { + "name": "slidesToScroll", + "title": { + "label": "同时滑动的图片数量", + "tip": "slidesToScroll" + }, + "propType": "number", + "description": "同时滑动的图片数量", + "defaultValue": 1 + }, + { + "name": "speed", + "title": { + "label": "轮播速度", + "tip": "speed" + }, + "propType": "number", + "description": "轮播速度", + "defaultValue": 600 + }, + { + "name": "activeIndex", + "title": { + "label": "指定轮播图", + "tip": "activeIndex|跳转到指定的轮播图（受控）" + }, + "propType": "number", + "description": "跳转到指定的轮播图（受控）" + }, + { + "name": "adaptiveHeight", + "title": { + "label": "自适应高度", + "tip": "adaptiveHeight" + }, + "propType": "bool", + "description": "是否使用自适应高度", + "defaultValue": false + }, + { + "name": "animation", + "title": { + "label": "动效类型", + "tip": "animation" + }, + "propType": { + "type": "oneOfType", + "value": ["string", "bool"] + }, + "description": "动效类型，默认是'slide'", + "defaultValue": "slide" + }, + { + "name": "arrows", + "title": { + "label": "箭头", + "tip": "arrows|是否显示箭头" + }, + "propType": "bool", + "description": "是否显示箭头", + "defaultValue": true + }, + { + "name": "arrowSize", + "title": { + "label": "箭头大小", + "tip": "arrowSize|导航箭头大小 可选值: 'medium', 'large'" + }, + "propType": { + "type": "oneOf", + "value": ["medium", "large"] + }, + "description": "导航箭头大小 可选值: 'medium', 'large'", + "defaultValue": "medium" + }, + { + "name": "arrowPosition", + "title": { + "label": "箭头位置", + "tip": "arrowPosition|导航箭头位置 可选值: 'inner', 'outer'" + }, + "propType": { + "type": "oneOf", + "value": ["inner", "outer"] + }, + "description": "导航箭头位置 可选值: 'inner', 'outer'", + "defaultValue": "inner" + }, + { + "name": "arrowDirection", + "title": { + "label": "箭头方向", + "tip": "arrowDirection|导航箭头的方向 可选值: 'hoz', 'ver'" + }, + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "导航箭头的方向 可选值: 'hoz', 'ver'", + "defaultValue": "hoz" + }, + { + "name": "autoplay", + "title": { + "label": "自动播放", + "tip": "autoplay" + }, + "propType": "bool", + "description": "是否自动播放", + "defaultValue": false + }, + { + "name": "autoplaySpeed", + "title": { + "label": "自动播放的速度", + "tip": "autoplaySpeed, 默认 3000 毫秒" + }, + "propType": "number", + "description": "自动播放的速度", + "defaultValue": 3000 + }, + { + "name": "nextArrow", + "propType": "node", + "description": "向后箭头", + "defaultValue": null + }, + { + "name": "prevArrow", + "propType": "node", + "description": "向前箭头", + "defaultValue": null + }, + { + "name": "centerMode", + "title": { + "label": "居中模式", + "tip": "centerMode" + }, + "propType": "bool", + "description": "是否启用居中模式", + "defaultValue": false + }, + { + "name": "dots", + "title": { + "label": "导航锚点", + "tip": "dots|是否显示导航锚点" + }, + "propType": "bool", + "description": "是否显示导航锚点", + "defaultValue": true + }, + { + "name": "dotsDirection", + "title": { + "label": "导航锚点位置", + "tip": "dotsDirection" + }, + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "导航锚点位置", + "defaultValue": "hoz" + }, + { + "name": "draggable", + "title": { + "label": "可拖拽", + "tip": "draggable" + }, + "propType": "bool", + "description": "是否可拖拽", + "defaultValue": true + }, + { + "name": "infinite", + "title": { + "label": "无穷循环", + "tip": "infinite" + }, + "propType": "bool", + "description": "是否使用无穷循环模式", + "defaultValue": true + }, + { + "name": "defaultActiveIndex", + "title": { + "label": "初始轮播图", + "tip": "defaultActiveIndex|初始被激活的轮播图" + }, + "propType": "number", + "description": "初始被激活的轮播图", + "defaultValue": 0 + }, + { + "name": "lazyLoad", + "title": { + "label": "懒加载", + "tip": "lazyLoad|是否启用懒加载" + }, + "propType": "bool", + "description": "是否启用懒加载", + "defaultValue": false + }, + { + "name": "slideDirection", + "title": { + "label": "轮播方向", + "tip": "slideDirection" + }, + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "轮播方向", + "defaultValue": "hoz" + }, + { + "name": "triggerType", + "title": { + "label": "触发方式", + "tip": "triggerType|锚点导航触发方式" + }, + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "锚点导航触发方式", + "defaultValue": "click" + }, + { + "name": "onChange", + "propType": "func", + "description": "轮播切换的回调函数\n@param {Number} index 幻灯片的索引" + }, + { + "name": "onBeforeChange", + "propType": "func" + }, + { + "name": "style", + "propType": "object", + "description": "自定义传入的class", + "defaultValue": null + }, + { + "name": "focusOnSelect", + "title": { + "label": "自动居中", + "tip": "focusOnSelect|多图轮播时，点击选中后自动居中" + }, + "propType": "bool", + "description": "多图轮播时，点击选中后自动居中", + "defaultValue": false + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "rtl", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "SplitButton", + "title": "分隔按钮", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "SplitButton", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "label", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "主按钮的文案" + }, + { + "name": "type", + "title": "按钮类型", + "propType": { + "type": "oneOf", + "value": ["normal", "primary", "secondary"] + }, + "description": "按钮的类型", + "defaultValue": "normal" + }, + { + "name": "size", + "title": "按钮尺寸", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "按钮组的尺寸", + "defaultValue": "medium" + }, + { + "name": "component", + "title": "标签类型", + "propType": { + "type": "oneOf", + "value": ["button", "a"] + }, + "defaultValue": "button", + "description": "设置标签类型" + }, + { + "name": "ghost", + "title": "幽灵按钮", + "propType": { + "type": "oneOf", + "value": ["light", "dark", false, true] + }, + "description": "是否为幽灵按钮" + }, + { + "name": "defaultSelectedKeys", + "propType": { + "type": "instanceOf", + "value": "array" + }, + "description": "默认激活的菜单项（用法同 Menu 非受控）", + "defaultValue": [] + }, + { + "name": "selectedKeys", + "propType": { + "type": "instanceOf", + "value": "array" + }, + "description": "激活的菜单项（用法同 Menu 受控）" + }, + { + "name": "selectMode", + "title": "单选多选", + "propType": { + "type": "oneOf", + "value": ["single", "multiple"] + }, + "defaultValue": "single", + "description": "菜单的选择模式" + }, + { + "name": "onSelect", + "propType": "func", + "description": "选择菜单项时的回调，参考 Menu" + }, + { + "name": "onItemClick", + "propType": "func", + "description": "点击菜单项时的回调，参考 Menu" + }, + { + "name": "triggerProps", + "propType": "object", + "description": "触发按钮的属性（支持 Button 的所有属性透传）" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层显示状态变化时的回调函数\n@param {Boolean} visible 弹层显示状态\n@param {String} type 触发弹层显示或隐藏的来源 menuSelect 表示由menu触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "popupTriggerType", + "title": "弹层触发", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "弹层的触发方式", + "defaultValue": "click" + }, + { + "name": "popupAlign", + "title": "弹层对齐", + "propType": "string", + "description": "弹层对齐方式, 详情见Overlay align" + }, + { + "name": "popupStyle", + "propType": "object", + "description": "弹层自定义样式" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹层自定义样式类" + }, + { + "name": "popupProps", + "propType": "object", + "description": "透传给弹层的属性" + }, + { + "name": "autoWidth", + "title": "自动宽度", + "propType": "bool", + "description": "弹层菜单的宽度是否与按钮组一致", + "defaultValue": true + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层是否显示" + }, + { + "name": "defaultVisible", + "title": "默认显示", + "defaultValue": true, + "propType": "bool", + "description": "弹层默认是否显示" + }, + { + "name": "followTrigger", + "title": "跟随滚动", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "menuProps", + "propType": "object", + "description": "透传给 Menu 的属性" + }, + { + "name": "leftButtonProps", + "propType": "object", + "description": "透传给 左侧按钮 的属性" + }, + { + "name": "className", + "propType": "string" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "defaultSelectedKeys", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "selectedKeys", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "triggerProps", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "leftButtonProps", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "menuProps", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupStyle", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupClassName", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupProps", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "visible", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "label", + "title": "按钮文案", + "setter": "StringSetter" + }, + { + "name": "ghost", + "title": "幽灵按钮", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["light", "dark", false, true] + } + }, + "defaultValue": false + } + ] + } + }, + "experimental": { + "initials": [ + { + "name": "label", + "initial": { + "type": "JSFunction", + "value": "() => \"分隔按钮\"" + } + } + ] + }, + "icon": "", + "category": "常用" + }, + { + "componentName": "Step.Item", + "title": "步骤项", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Step", + "main": "", + "destructuring": true, + "subName": "Item" + }, + "props": [ + { + "name": "icon", + "propType": "string", + "description": "图标" + }, + { + "name": "title", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "标题" + }, + { + "name": "content", + "title": { + "label": "内容", + "tip": "content|内容填充, shape为 arrow 时无效" + }, + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "内容填充, shape为 arrow 时无效" + }, + { + "name": "status", + "title": { + "label": "状态", + "tip": "status|步骤的状态，如不传，会根据外层的 Step 的 current 属性生成，可选值为 `wait`, `process`, `finish`" + }, + "propType": { + "type": "oneOf", + "value": ["wait", "process", "finish"] + }, + "description": "步骤的状态，如不传，会根据外层的 Step 的 current 属性生成，可选值为 `wait`, `process`, `finish`" + }, + { + "name": "percent", + "propType": "number", + "description": "百分比" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "onClick", + "propType": "func", + "description": "点击步骤时的回调\n@param {Number} index 节点索引" + }, + { + "name": "className", + "propType": "string", + "description": "自定义样式" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "icon", + "title": { + "label": "图标", + "tip": "icon|图标" + }, + "setter": { + "componentName": "IconSetter" + } + }, + { + "name": "content", + "title": { + "label": "内容", + "tip": "content|内容" + }, + "setter": { + "componentName": "TextAreaSetter" + } + }, + { + "name": "status", + "title": { + "label": "状态", + "tip": "status|状态" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "等待", + "value": "wait" + }, + { + "title": "进行中", + "value": "process" + }, + { + "title": "结束", + "value": "finish" + }, + { + "title": "默认", + "value": "" + } + ] + } + } + } + ] + } + }, + "category": "null", + "icon": "" + }, + { + "componentName": "Step", + "title": "步骤条", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Step", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "current", + "propType": "number", + "description": "当前步骤", + "defaultValue": 0 + }, + { + "name": "direction", + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "展示方向", + "defaultValue": "hoz" + }, + { + "name": "labelPlacement", + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "横向布局时( direction 为 hoz )的内容排列", + "defaultValue": "ver" + }, + { + "name": "shape", + "propType": { + "type": "oneOf", + "value": ["circle", "arrow", "dot"] + }, + "description": "类型", + "defaultValue": "circle" + }, + { + "name": "readOnly", + "propType": "bool", + "description": "是否只读模式" + }, + { + "name": "animation", + "propType": "bool", + "description": "是否开启动效", + "defaultValue": true + }, + { + "name": "className", + "propType": "string", + "description": "自定义样式名" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": [ + { + "name": "items", + "title": "步骤项", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "icon", + "title": "图标", + "setter": "IconSetter", + "description": "图标" + }, + { + "name": "title", + "title": "标题", + "setter": "StringSetter", + "description": "标题" + }, + { + "name": "status", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["wait", "process", "finish"] + } + }, + "description": "步骤的状态，如不传，会根据外层的 Step 的 current 属性生成，可选值为 `wait`, `process`, `finish`" + }, + { + "name": "content", + "title": { + "label": "内容", + "tip": "content|内容填充, shape为 arrow 时无效" + }, + "setter": "TextAreaSetter", + "description": "内容填充, shape为 arrow 时无效" + }, + { + "name": "percent", + "title": "百分比", + "setter": "NumberSetter", + "description": "百分比" + }, + { + "name": "disabled", + "title": "是否禁用", + "setter": "BoolSetter", + "description": "是否禁用" + } + ] + } + }, + "initialValue": { + "type": "JSFunction", + "value": "() => {\n return {\n primaryKey: String(Math.floor(Math.random() * 10000)),\n title: \"StepItem\"\n };\n }" + } + } + } + }, + "extraProps": { + "getValue": { + "type": "JSFunction", + "value": "getValue(target, fieldValue) {\n \n \n const map = target.getNode().children.map(child => {\n const primaryKey = child.getPropValue(\"primaryKey\")\n ? String(child.getPropValue(\"primaryKey\"))\n : child.id;\n return {\n primaryKey: primaryKey,\n icon: child.getPropValue(\"icon\"),\n title: child.getPropValue(\"title\"),\n status: child.getPropValue(\"status\"),\n content: child.getPropValue(\"content\"),\n percent: child.getPropValue(\"percent\"),\n disabled: child.getPropValue(\"disabled\"),\n };\n });\n return map;\n }" + }, + "setValue": { + "type": "JSFunction", + "value": "setValue(target, value) {\n const node = target.getNode();\n const map = {};\n if (!Array.isArray(value)) {\n value = [];\n }\n value.forEach(item => {\n const tabitem = Object.assign({}, item);\n map[item.primaryKey] = tabitem;\n });\n\n node.children.mergeChildren(\n child => {\n const primaryKey = String(child.getPropValue(\"primaryKey\"));\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n child.setPropValue(\"icon\", map[primaryKey].icon);\n child.setPropValue(\"title\", map[primaryKey].title);\n child.setPropValue(\"content\", map[primaryKey].content);\n child.setPropValue(\"status\", map[primaryKey].status);\n child.setPropValue(\"percent\", map[primaryKey].percent);\n child.setPropValue(\"disabled\", map[primaryKey].disabled);\n delete map[primaryKey];\n return false;\n }\n return true;\n },\n () => {\n const items = [];\n for (const primaryKey in map) {\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n items.push({\n componentName: \"Step.Item\",\n props: map[primaryKey]\n });\n }\n }\n return items;\n },\n (child1, child2) => {\n const a = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child1.getPropValue(\"primaryKey\"))\n );\n const b = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child2.getPropValue(\"primaryKey\"))\n );\n return a - b;\n }\n );\n }" + } + } + }, + { + "name": "current", + "setter": { + "type": "JSFunction", + "value": "() => {\n const items = this.props.getPropValue('items');\n return {\n componentName: \"MixedSetter\",\n props: {\n setters: [\n {\n componentName: \"NumberSetter\",\n props: {\n min: 0,\n max: items.length - 1,\n defaultValue: 0\n }\n }, \n \"ExpressionSetter\"\n ]\n }\n };\n }" + }, + "title": "当前步骤", + "defaultValue": 0 + }, + { + "name": "direction", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["hoz", "ver"] + } + }, + "title": "展示方向", + "defaultValue": "hoz" + }, + { + "name": "labelPlacement", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["hoz", "ver"] + } + }, + "title": "内容排列", + "defaultValue": "ver" + }, + { + "name": "shape", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["circle", "arrow", "dot"] + } + }, + "title": "类型", + "defaultValue": "circle" + }, + { + "name": "readOnly", + "setter": "BoolSetter", + "title": "是否只读" + }, + { + "name": "animation", + "setter": "BoolSetter", + "title": "开启动效", + "defaultValue": true + } + ] + }, + "icon": "", + "category": "导航" + }, + { + "componentName": "SubMenu", + "title": "子菜单", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Menu", + "main": "", + "destructuring": true, + "subName": "SubMenu" + }, + "props": [ + { + "name": "key", + "propType": "string", + "description": "子菜单标识符" + }, + { + "name": "label", + "propType": "node", + "description": "标签内容" + }, + { + "name": "selectable", + "propType": "bool", + "description": "是否可选，该属性仅在设置 Menu 组件 selectMode 属性后生效", + "defaultValue": false + }, + { + "name": "mode", + "propType": { + "type": "oneOf", + "value": ["inline", "popup"] + }, + "description": "子菜单打开方式，如果设置会覆盖 Menu 上的同名属性\n@default Menu 的 mode 属性值" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["Menu", "SubMenu", "Menu.Group", "MenuButton"] + } + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "SubNav", + "title": "SubNav", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Nav", + "main": "", + "destructuring": true, + "subName": "SubNav" + }, + "props": [ + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "icon", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "instanceOf", + "value": "node" + } + ] + }, + "description": "自定义图标，可以使用 Icon 的 type，也可以使用组件 ``" + }, + { + "name": "label", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "标签内容" + }, + { + "name": "selectable", + "propType": "bool", + "description": "是否可选", + "defaultValue": false + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "导航项和子导航" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "Switch", + "title": "开关", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Switch", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "name", + "propType": "string", + "description": "name" + }, + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "checked", + "propType": "bool", + "description": "当前状态" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["medium", "small"] + }, + "description": "尺寸", + "defaultValue": "medium" + }, + { + "name": "checkedChildren", + "propType": "string", + "description": "打开时的内容" + }, + { + "name": "unCheckedChildren", + "propType": "string", + "description": "关闭时的内容" + }, + { + "name": "onChange", + "propType": "func", + "description": "开关状态改变是触发此事件\n@param {Boolean} checked 是否为打开状态\n@param {Event} e DOM事件对象" + }, + { + "name": "onClick", + "propType": "func", + "description": "鼠标点击事件\n@param {Event} e DOM事件对象" + }, + { + "name": "onKeyDown", + "propType": "func", + "description": "键盘按键事件\n@param {Event} e DOM事件对象" + } + ], + "configure": { + "props": [ + { + "name": "checked", + "title": { + "label": { + "type": "i18n", + "zh_CN": "当前状态", + "en_US": "Checked" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: checked | 说明: 当前状态", + "en_US": "prop: checked | description: current status" + } + }, + "setter": "BoolSetter" + }, + { + "name": "disabled", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否禁用", + "en_US": "Disabled" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: disabled | 说明: 是否被禁用", + "en_US": "prop: disabled | description: disabled" + } + }, + "setter": "BoolSetter", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 尺寸", + "en_US": "prop: size | description: size" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["medium", "small"] + } + }, + "defaultValue": "medium" + }, + { + "name": "checkedChildren", + "title": { + "label": { + "type": "i18n", + "zh_CN": "开启内容", + "en_US": "Checked Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: checkedChildren | 说明: 打开时的内容", + "en_US": "prop: checkedChildren | description: checked content" + } + }, + "setter": "StringSetter", + "description": "打开时的内容" + }, + { + "name": "unCheckedChildren", + "title": { + "label": { + "type": "i18n", + "zh_CN": "关闭内容", + "en_US": "UnChecked Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: unCheckedChildren | 说明: 关闭时的内容", + "en_US": "prop: unCheckedChildren | description: unchecked content" + } + }, + "setter": "StringSetter" + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ], + "supports": { + "style": true, + "events": ["onChange", "onClick", "onKeyDown"] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Tab.Item", + "title": "选项卡Item", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Tab", + "main": "", + "destructuring": true, + "subName": "Item" + }, + "props": [ + { + "name": "isAutoContainer", + "initialValue": true, + "defaultValue": true, + "setter": "BoolSetter", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "title", + "propType": "string", + "description": "选项卡标题" + }, + { + "name": "closeable", + "propType": "bool", + "description": "单个选项卡是否可关闭", + "defaultValue": false + }, + { + "name": "disabled", + "propType": "bool", + "description": "选项卡是否被禁用" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["Tab"] + } + } + }, + "icon": "", + "category": "null" + }, + { + "componentName": "Tab.TabPane", + "title": "Tab.TabPane", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Tab", + "main": "", + "destructuring": true, + "subName": "TabPane" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "title", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "选项卡标题" + }, + { + "name": "closeable", + "propType": "bool", + "description": "单个选项卡是否可关闭", + "defaultValue": false + }, + { + "name": "disabled", + "propType": "bool", + "description": "选项卡是否被禁用" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + } + }, + "category": "基础" + }, + { + "componentName": "Tab", + "title": "选项卡", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Tab", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "device", + "propType": { + "type": "oneOf", + "value": ["tablet", "desktop", "phone"] + } + }, + { + "name": "shape", + "propType": { + "type": "oneOf", + "value": ["pure", "wrapped", "text", "capsule"] + }, + "description": "外观形态", + "defaultValue": "pure" + }, + { + "name": "animation", + "propType": "bool", + "description": "是否开启动效", + "defaultValue": true + }, + { + "name": "excessMode", + "propType": { + "type": "oneOf", + "value": ["slide", "dropdown"] + }, + "description": "选项卡过多时的滑动模式", + "defaultValue": "slide" + }, + { + "name": "tabPosition", + "propType": { + "type": "oneOf", + "value": ["top", "bottom", "left", "right"] + }, + "description": "导航选项卡的位置，只适用于包裹型（wrapped）选项卡", + "defaultValue": "top" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium"] + }, + "description": "尺寸", + "defaultValue": "medium" + }, + { + "name": "triggerType", + "propType": { + "type": "oneOf", + "value": ["hover", "click"] + }, + "description": "激活选项卡的触发方式", + "defaultValue": "click" + }, + { + "name": "lazyLoad", + "propType": "bool", + "description": "是否延迟加载 TabPane 的内容, 默认开启, 即不提前渲染", + "defaultValue": true + }, + { + "name": "unmountInactiveTabs", + "propType": "bool", + "description": "是否自动卸载未处于激活状态的选项卡", + "defaultValue": false + }, + { + "name": "navClassName", + "propType": "string", + "description": "导航条的自定义样式类" + }, + { + "name": "contentClassName", + "propType": "string", + "description": "内容区容器的自定义样式类" + }, + { + "name": "extra", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "导航栏附加内容" + }, + { + "name": "onClick", + "propType": "func", + "description": "点击单个选项卡时触发的回调" + }, + { + "name": "onChange", + "propType": "func", + "description": "选项卡发生切换时的事件回调\n@param {String|Number} key 改变后的 key" + }, + { + "name": "onClose", + "propType": "func", + "description": "选项卡被关闭时的事件回调\n@param {String|Number} key 关闭的选项卡的 key" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": [ + { + "name": "items", + "title": "标签项", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "title", + "title": "名称", + "initialValue": "标签项", + "setter": "StringSetter" + }, + { + "name": "primaryKey", + "title": "项目编号", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "initialValue": { + "type": "JSFunction", + "value": "val => {\n if (val) return val;\n return String(Math.floor(Math.random() * 10000));\n }" + }, + "setter": "StringSetter" + }, + { + "name": "closeable", + "title": "可关闭", + "initialValue": false, + "setter": "BoolSetter" + }, + { + "name": "disabled", + "title": "是否禁用", + "initialValue": false, + "setter": "BoolSetter" + } + ] + } + }, + "initialValue": { + "type": "JSFunction", + "value": "() => {\n return {\n primaryKey: String(Math.floor(Math.random() * 10000)),\n title: \"标签项\",\n closeable: false,\n disabled: false\n };\n }" + } + } + } + }, + "extraProps": { + "getValue": { + "type": "JSFunction", + "value": "getValue(target, fieldValue) {\n \n \n const map = target.getNode().children.map(child => {\n const primaryKey = child.getPropValue(\"primaryKey\")\n ? String(child.getPropValue(\"primaryKey\"))\n : child.id;\n return {\n primaryKey: primaryKey,\n title: child.getPropValue(\"title\"),\n closeable: child.getPropValue(\"closeable\"),\n disabled: child.getPropValue(\"disabled\")\n };\n });\n return map;\n }" + }, + "setValue": { + "type": "JSFunction", + "value": "setValue(target, value) {\n const node = target.getNode();\n const map = {};\n if (!Array.isArray(value)) {\n value = [];\n }\n value.forEach(item => {\n const tabitem = Object.assign({}, item);\n map[item.primaryKey] = tabitem;\n });\n\n node.children.mergeChildren(\n child => {\n const primaryKey = String(child.getPropValue(\"primaryKey\"));\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n child.setPropValue(\"title\", map[primaryKey].title);\n child.setPropValue(\"closeable\", map[primaryKey].closeable);\n child.setPropValue(\"disabled\", map[primaryKey].disabled);\n delete map[primaryKey];\n return false;\n }\n return true;\n },\n () => {\n const items = [];\n for (const primaryKey in map) {\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n items.push({\n componentName: \"Tab.Item\",\n props: map[primaryKey]\n });\n }\n }\n return items;\n },\n (child1, child2) => {\n const a = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child1.getPropValue(\"primaryKey\"))\n );\n const b = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child2.getPropValue(\"primaryKey\"))\n );\n return a - b;\n }\n );\n }" + } + } + }, + { + "name": "shape", + "title": "形态", + "defaultValue": "pure", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "普通型", + "value": "pure" + }, + { + "title": "包裹型", + "value": "wrapped" + }, + { + "title": "文本型", + "value": "text" + }, + { + "title": "胶囊型", + "value": "capsule" + } + ] + } + } + }, + { + "name": "size", + "title": "尺寸", + "defaultValue": "medium", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "小", + "value": "small" + }, + { + "title": "中", + "value": "medium" + } + ] + } + } + }, + { + "name": "excessMode", + "title": "选项卡过多时的滑动模式", + "defaultValue": "slide", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "小", + "value": "slide" + }, + { + "title": "中", + "value": "dropdown" + } + ] + } + } + }, + { + "name": "advance", + "title": "高级", + "type": "group", + "extraProps": { + "display": "accordion" + }, + "items": [ + { + "name": "unmountInactiveTabs", + "title": "切换销毁", + "defaultValue": false, + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "needBadge", + "title": "开启徽标", + "defaultValue": false, + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "renderBadge", + "title": "徽标渲染", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + }, + "condition": { + "type": "JSFunction", + "value": "condition(target) {\n return target.getProps().getPropValue(\"needBadge\") || false;\n }" + } + }, + { + "name": "tabRender", + "title": "自定义渲染选项卡", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + } + }, + { + "name": "extraRender", + "title": "渲染导航栏附加内容", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + } + } + ] + }, + { + "name": "style", + "setter": { + "componentName": "StyleSetter" + } + } + ], + "supports": { + "events": ["onClick", "onChange", "onClose"] + } + }, + "experimental": { + "initialChildren": [ + { + "componentName": "Tab.Item", + "props": { + "primaryKey": "item1" + } + }, + { + "componentName": "Tab.Item", + "props": { + "primaryKey": "item2" + } + } + ] + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Table.Column", + "title": "Table.Column", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Table", + "main": "", + "destructuring": true, + "subName": "Column" + }, + "props": [ + { + "name": "title", + "propType": "string" + }, + { + "name": "dataIndex", + "propType": "string" + }, + { + "name": "cell", + "propType": "func" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "cell", + "setter": { + "componentName": "SlotSetter", + "props": { + "supportParams": true + } + }, + "extraProps": { + "display": "block" + } + } + ] + } + }, + "category": "基础" + }, + { + "componentName": "Table", + "title": "Table", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Table", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string" + }, + { + "name": "children", + "propType": "string" + }, + { + "name": "pure", + "propType": "bool" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "tableLayout", + "propType": { + "type": "oneOf", + "value": ["fixed", "auto"] + } + }, + { + "name": "tableWidth", + "propType": "number" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium"] + } + }, + { + "name": "dataSource", + "propType": { + "type": "arrayOf", + "value": "object" + } + }, + { + "name": "entireDataSource", + "propType": "array" + }, + { + "name": "onRowClick", + "propType": "func" + }, + { + "name": "onRowMouseEnter", + "propType": "func" + }, + { + "name": "rowProps", + "propType": "func" + }, + { + "name": "cellProps", + "propType": "func" + }, + { + "name": "hasBorder", + "propType": "bool" + }, + { + "name": "hasHeader", + "propType": "bool" + }, + { + "name": "isZebra", + "propType": "bool" + }, + { + "name": "loading", + "propType": "bool" + }, + { + "name": "filterParams", + "propType": "object" + }, + { + "name": "sort", + "propType": "object" + }, + { + "name": "sortIcons", + "propType": "object" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "components", + "propType": "object" + }, + { + "name": "columns", + "propType": { + "type": "arrayOf", + "value": { + "type": "shape", + "value": [ + { + "name": "title", + "description": "列标题", + "propType": "string" + }, + { + "name": "dataIndex", + "description": "列名称", + "propType": "string" + } + ] + } + } + }, + { + "name": "emptyContent", + "propType": "node" + }, + { + "name": "primaryKey", + "propType": "string" + }, + { + "name": "lockType", + "propType": { + "type": "oneOf", + "value": ["left", "right"] + } + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "wrapperContent", + "propType": "any" + }, + { + "name": "refs", + "propType": "object" + }, + { + "name": "expandedRowRender", + "propType": "func" + }, + { + "name": "expandedRowIndent", + "propType": "array" + }, + { + "name": "hasExpandedRowCtrl", + "propType": "bool" + }, + { + "name": "getExpandedColProps", + "propType": "func" + }, + { + "name": "openRowKeys", + "propType": "array" + }, + { + "name": "onRowOpen", + "propType": "func" + }, + { + "name": "onExpandedRowClick", + "propType": "func" + }, + { + "name": "fixedHeader", + "propType": "bool" + }, + { + "name": "rowSelection", + "propType": "object" + }, + { + "name": "stickyHeader", + "propType": "bool" + }, + { + "name": "offsetTop", + "propType": "number" + }, + { + "name": "affixProps", + "propType": "object" + }, + { + "name": "indent", + "propType": "number" + }, + { + "name": "isTree", + "propType": "bool" + }, + { + "name": "useVirtual", + "propType": "bool" + }, + { + "name": "onBodyScroll", + "propType": "func" + }, + { + "name": "expandedIndexSimulate", + "propType": "bool" + }, + { + "name": "crossline", + "propType": "bool" + }, + { + "name": "lengths", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "dataSource", + "setter": "JsonSetter" + }, + { + "name": "children", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "componentName", + "title": "子组件", + "defaultValue": "Table.Column", + "setter": { + "componentName": "StringSetter" + } + }, + { + "name": "props", + "title": "props", + "setter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "title", + "setter": { + "componentName": "StringSetter" + } + }, + { + "name": "dataIndex", + "setter": { + "componentName": "StringSetter" + } + } + ] + } + } + } + } + ] + } + } + } + } + }, + "extraProps": { + "defaultValue": "", + "onChange": { + "type": "JSFunction", + "value": "(val, field, editor) => {\n debugger;\n console.log('val', val);//field.nodes[0].children.import(val && {\"componentName\": \"Table.Column\", \"props\": {\"type\": val, \"style\": {\"marginRight\": 5}}}, true); //field.top.setPropValue('children', [{\"componentName\": \"Icon\", \"props\": {\"type\": val}}, (field.top.getPropValue('children') || []).slice(-1)]);\n}" + } + } + } + ] + } + }, + "category": "基础" + }, + { + "componentName": "Tag.Closeable", + "title": "可关闭标签", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Tag", + "main": "", + "destructuring": true, + "subName": "Closeable" + }, + "props": [ + { + "name": "closeArea", + "title": { + "label": { + "type": "i18n", + "zh_CN": "关闭区域", + "en_US": "Close Area" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: closeArea | 说明: closeable 标签的 onClose 响应区域, tag: 标签体, tail(默认): 关闭按钮", + "en_US": "prop: closeArea | description: close area" + } + }, + "propType": { + "type": "oneOf", + "value": ["tag", "tail"] + }, + "description": "closeable 标签的 onClose 响应区域, tag: 标签体, tail(默认): 关闭按钮" + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签尺寸", + "en_US": "Tag Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 标签的尺寸（large 尺寸为兼容表单场景 large = medium）", + "en_US": "prop: size | description: tag size" + } + }, + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "标签的尺寸（large 尺寸为兼容表单场景 large = medium）" + }, + { + "name": "onClose", + "propType": "func", + "description": "点击关闭按钮时的回调，返回值 true 则关闭, false 阻止关闭" + }, + { + "name": "onClick", + "propType": "func", + "description": "点击回调" + }, + { + "name": "afterClose", + "propType": "func", + "description": "标签关闭后执行的回调" + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签文本", + "en_US": "Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: children | 说明: 标签文本内容", + "en_US": "prop: children | description: tag content" + } + }, + "propType": "string", + "description": "内容" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": {}, + "icon": "", + "category": "内容" + }, + { + "componentName": "Tag.Selectable", + "title": "可选中标签", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Tag", + "main": "", + "destructuring": true, + "subName": "Selectable" + }, + "props": [ + { + "name": "checked", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否选中", + "en_US": "Checked" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: checked | 说明: 标签是否被选中，受控用法", + "en_US": "prop: checked | description: tag checked" + } + }, + "propType": "bool", + "description": "标签是否被选中，受控用法" + }, + { + "name": "defaultChecked", + "title": { + "label": { + "type": "i18n", + "zh_CN": "默认选中", + "en_US": "Default Checked" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: defaultChecked | 说明: 标签是否默认被选中，非受控用法", + "en_US": "prop: defaultChecked | description: tag default checked" + } + }, + "propType": "bool", + "description": "标签是否默认被选中，非受控用法" + }, + { + "name": "disabled", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否禁用", + "en_US": "Disabled" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: disabled | 说明: 标签是否被禁用", + "en_US": "prop: disabled | description: tag disabled" + } + }, + "propType": "bool", + "description": "标签是否被禁用" + }, + { + "name": "onChange", + "propType": "func", + "description": "选中状态变化时触发的事件 Function(checked: Boolean, e: Event) => void" + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签文本", + "en_US": "Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: children | 说明: 标签文本内容", + "en_US": "prop: children | description: tag content" + } + }, + "propType": "string", + "description": "内容" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": {}, + "icon": "", + "category": "内容" + }, + { + "componentName": "Tag", + "title": "标签", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Tag", + "main": "", + "destructuring": true + }, + "props": [ + { + "name": "type", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签类型", + "en_US": "Tag Type" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: type | 说明: 标签的类型", + "en_US": "prop: type | description: tag type" + } + }, + "propType": { + "type": "oneOf", + "value": ["normal", "primary"] + }, + "description": "标签的类型" + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签尺寸", + "en_US": "Tag Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 标签的尺寸（large 尺寸为兼容表单场景 large = medium）", + "en_US": "prop: size | description: tag size" + } + }, + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "标签的尺寸（large 尺寸为兼容表单场景 large = medium）" + }, + { + "name": "color", + "propType": "string", + "description": "标签颜色, 目前支持：blue、 green、 orange、red、 turquoise、 yellow 和 hex 颜色值 （`color keywords`作为 Tag 组件的保留字，请勿直接使用 ）, `1.19.0` 以上版本生效" + }, + { + "name": "animation", + "title": { + "label": { + "type": "i18n", + "zh_CN": "开启动效", + "en_US": "Animation" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: animation | 说明: 是否开启动效", + "en_US": "prop: animation | description: enable animation" + } + }, + "propType": "bool", + "description": "是否开启动效" + }, + { + "name": "afterAppear", + "propType": "func", + "description": "标签出现动画结束后执行的回调" + }, + { + "name": "onClick", + "propType": "func", + "description": "点击回调" + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签文本", + "en_US": "Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: children | 说明: 标签文本内容", + "en_US": "prop: children | description: tag content" + } + }, + "propType": "string", + "description": "内容" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "color", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签颜色", + "en_US": "Tag Color" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: color | 说明: 是否开启动效", + "en_US": "prop: color | description: 目前支持：blue、 green、 orange、red、 turquoise、 yellow 和 hex 颜色值 （`color keywords`作为 Tag 组件的保留字，请勿直接使用 ）, `1.19.0` 以上版本生效" + } + }, + "setter": { + "componentName": "ColorSetter" + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "TimePicker", + "title": "时间选择框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "TimePicker", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "name", + "title": { + "label": "名称", + "tip": "name|表单相关" + }, + "propType": "string", + "description": "name|表单相关" + }, + { + "name": "label", + "propType": "string", + "description": "按钮的文案" + }, + { + "name": "state", + "propType": { + "type": "oneOf", + "value": ["error", "success"] + }, + "description": "输入框状态" + }, + { + "name": "placeholder", + "propType": "string", + "description": "输入框提示" + }, + { + "name": "value", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "时间值（moment 对象或时间字符串，受控状态使用）" + }, + { + "name": "defaultValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "时间初值（moment 对象或时间字符串，非受控状态使用）" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "时间选择框的尺寸", + "defaultValue": "medium" + }, + { + "name": "hasClear", + "propType": "bool", + "description": "是否允许清空时间", + "defaultValue": true + }, + { + "name": "format", + "propType": "string", + "description": "时间的格式\nhttps://momentjs.com/docs/#/parsing/string-format/", + "defaultValue": "HH:mm:ss" + }, + { + "name": "hourStep", + "propType": "number", + "description": "小时选项步长" + }, + { + "name": "minuteStep", + "propType": "number", + "description": "分钟选项步长" + }, + { + "name": "secondStep", + "propType": "number", + "description": "秒钟选项步长" + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层是否显示（受控）" + }, + { + "name": "defaultVisible", + "propType": "bool", + "description": "弹层默认是否显示（非受控）" + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态" + }, + { + "name": "onChange", + "propType": "func", + "description": "时间值改变时的回调\n@param {Object|String} value 时间对象或时间字符串" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + } + ], + "configure": { + "props": [ + { + "name": "defaultValue", + "title": "默认值", + "setter": ["TimePicker", "ExpressionSetter"] + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 尺寸\n@enumdesc 小, 中, 大", + "en_US": "prop: size | description: size" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "defaultValue": "medium" + }, + { + "name": "format", + "title": "时间格式", + "defaultValue": "HH:mm:ss", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "HH:mm:ss", + "value": "HH:mm:ss" + }, + { + "title": "HH:mm", + "value": "HH:mm" + }, + { + "title": "mm:ss", + "value": "mm:ss" + } + ] + } + }, + "ExpressionSetter" + ] + } + } + }, + { + "name": "hourStep", + "title": "小时步长", + "defaultValue": 1, + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "minuteStep", + "title": "分钟步长", + "defaultValue": 1, + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "secondStep", + "title": "秒钟步长", + "defaultValue": 1, + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "hasClear", + "title": "清除按钮", + "defaultValue": true, + "setter": ["BoolSetter", "ExpressionSetter"] + }, + { + "name": "disabledHours", + "title": "禁用小时函数", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + } + }, + { + "name": "disabledMinutes", + "title": "禁用分钟函数", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + } + }, + { + "name": "disabledSeconds", + "title": "禁用秒钟函数", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + } + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + }, + { + "name": "style", + "setter": { + "componentName": "StyleSetter" + } + } + ], + "supports": { + "events": ["onChange", "onVisibleChange"] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Timeline.Item", + "title": "时间轴项", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Timeline", + "main": "", + "destructuring": true, + "subName": "Item" + }, + "props": [ + { + "name": "state", + "propType": { + "type": "oneOf", + "value": ["done", "process", "error", "success"] + }, + "description": "节点状态", + "defaultValue": "done" + }, + { + "name": "icon", + "propType": "string", + "description": "图标" + }, + { + "name": "dot", + "propType": "node", + "description": "自定义时间轴节点" + }, + { + "name": "time", + "propType": "string", + "description": "格式化后的时间" + }, + { + "name": "title", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "description": "标题" + }, + { + "name": "timeLeft", + "propType": "string", + "description": "左侧时间" + }, + { + "name": "content", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "description": "右侧内容" + }, + { + "name": "animation", + "propType": "bool", + "description": "动画", + "defaultValue": true + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": false, + "nestingRule": { + "parentWhitelist": ["Timeline"] + } + }, + "props": [ + { + "name": "title", + "setter": "StringSetter", + "title": "标题" + }, + { + "name": "icon", + "title": "图标", + "setter": "IconSetter", + "description": "图标" + }, + { + "name": "state", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["done", "process", "error", "success"] + } + }, + "title": "节点状态", + "defaultValue": "done" + }, + { + "name": "time", + "setter": "DateSetter", + "title": "右侧时间" + }, + { + "name": "timeLeft", + "setter": "DateSetter", + "title": "左侧时间" + }, + { + "name": "content", + "setter": "TextAreaSetter", + "title": "右侧内容" + }, + { + "name": "animation", + "setter": "BoolSetter", + "title": "启用动画", + "defaultValue": true + } + ] + }, + "icon": "", + "category": "null" + }, + { + "componentName": "Timeline", + "title": "时间轴", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Timeline", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "fold", + "propType": { + "type": "arrayOf", + "value": { + "type": "exact", + "value": [ + { + "name": "foldArea", + "propType": { + "type": "arrayOf", + "value": "number" + } + }, + { + "name": "foldShow", + "propType": "bool" + } + ] + } + }, + "description": "自定义折叠选项 示例`[{foldArea: [startIndex, endIndex], foldShow: boolean}]`", + "defaultValue": [] + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "childWhitelist": ["Timeline.Item"] + } + }, + "props": [ + { + "name": "items", + "title": "时间轴数据", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "title", + "setter": "StringSetter", + "title": "标题" + }, + { + "name": "icon", + "title": "图标", + "setter": "IconSetter", + "description": "图标" + }, + { + "name": "state", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["done", "process", "error", "success"] + } + }, + "title": "节点状态", + "defaultValue": "done" + }, + { + "name": "time", + "setter": "DateSetter", + "title": "右侧时间" + }, + { + "name": "timeLeft", + "setter": "DateSetter", + "title": "左侧时间" + }, + { + "name": "content", + "setter": "TextAreaSetter", + "title": "右侧内容" + }, + { + "name": "animation", + "setter": "BoolSetter", + "title": "启用动画", + "defaultValue": true + } + ] + } + }, + "initialValue": { + "type": "JSFunction", + "value": "() => {\n return {\n primaryKey: String(Math.floor(Math.random() * 10000)),\n title: \"TimelineItem\"\n };\n }" + } + } + } + }, + "extraProps": { + "getValue": { + "type": "JSFunction", + "value": "getValue(target, fieldValue) {\n \n \n const map = target.getNode().children.map(child => {\n const primaryKey = child.getPropValue(\"primaryKey\")\n ? String(child.getPropValue(\"primaryKey\"))\n : child.id;\n return {\n primaryKey: primaryKey,\n icon: child.getPropValue(\"icon\"),\n title: child.getPropValue(\"title\"),\n state: child.getPropValue(\"state\"),\n time: child.getPropValue(\"time\"),\n timeLeft: child.getPropValue(\"timeLeft\"),\n content: child.getPropValue(\"content\"),\n animation: child.getPropValue(\"animation\"),\n };\n });\n return map;\n }" + }, + "setValue": { + "type": "JSFunction", + "value": "setValue(target, value) {\n const node = target.getNode();\n const map = {};\n if (!Array.isArray(value)) {\n value = [];\n }\n value.forEach(item => {\n const tabitem = Object.assign({}, item);\n map[item.primaryKey] = tabitem;\n });\n\n node.children.mergeChildren(\n child => {\n const primaryKey = String(child.getPropValue(\"primaryKey\"));\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n child.setPropValue(\"icon\", map[primaryKey].icon);\n child.setPropValue(\"title\", map[primaryKey].title);\n child.setPropValue(\"content\", map[primaryKey].content);\n child.setPropValue(\"state\", map[primaryKey].state);\n child.setPropValue(\"time\", map[primaryKey].time);\n child.setPropValue(\"timeLeft\", map[primaryKey].timeLeft);\n child.setPropValue(\"animation\", map[primaryKey].animation);\n delete map[primaryKey];\n return false;\n }\n return true;\n },\n () => {\n const items = [];\n for (const primaryKey in map) {\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n items.push({\n componentName: \"Timeline.Item\",\n props: map[primaryKey]\n });\n }\n }\n return items;\n },\n (child1, child2) => {\n const a = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child1.getPropValue(\"primaryKey\"))\n );\n const b = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child2.getPropValue(\"primaryKey\"))\n );\n return a - b;\n }\n );\n }" + } + } + } + ] + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Message", + "title": "面包片", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Message", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "title", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标题", + "en_US": "Title" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: title | 说明: 标题", + "en_US": "prop: title | description: Title" + } + }, + "propType": "string", + "description": "标题", + "defaultValue": "标题" + }, + { + "name": "type", + "title": { + "label": { + "type": "i18n", + "zh_CN": "类型", + "en_US": "Type" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: type | 说明: 反馈类型", + "en_US": "prop: type | description: message type" + } + }, + "propType": { + "type": "oneOf", + "value": ["success", "warning", "error", "notice", "help", "loading"] + }, + "description": "反馈类型", + "defaultValue": "success" + }, + { + "name": "shape", + "title": { + "label": { + "type": "i18n", + "zh_CN": "形状", + "en_US": "Shape" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: shape | 说明: 外观", + "en_US": "prop: shape | description: message shape" + } + }, + "propType": { + "type": "oneOf", + "value": ["inline", "addon", "toast"] + }, + "description": "外观", + "defaultValue": "inline" + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 尺寸", + "en_US": "prop: size | description: message size" + } + }, + "propType": { + "type": "oneOf", + "value": ["medium", "large"] + }, + "description": "尺寸", + "defaultValue": "medium" + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文本", + "en_US": "Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: children | 说明: 文本内容", + "en_US": "prop: children | description: message content" + } + }, + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "description": "内容" + }, + { + "name": "visible", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否显示", + "en_US": "Visible" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: visible | 说明: 当前是否显示", + "en_US": "prop: visible | description: visible" + } + }, + "propType": "bool", + "description": "当前是否显示" + }, + { + "name": "iconType", + "propType": "string", + "description": "显示的图标类型，会覆盖内部设置的IconType" + }, + { + "name": "closeable", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示 Close", + "en_US": "Show Close" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: closeable | 说明: 显示关闭按钮", + "en_US": "prop: closeable | description: show close button" + } + }, + "propType": "bool", + "description": "显示关闭按钮", + "defaultValue": false + }, + { + "name": "onClose", + "propType": "func", + "description": "关闭按钮的回调" + }, + { + "name": "afterClose", + "propType": "func", + "description": "关闭之后调用的函数" + }, + { + "name": "animation", + "title": { + "label": { + "type": "i18n", + "zh_CN": "开启动效", + "en_US": "Animation" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: animation | 说明: 是否开启动效", + "en_US": "prop: animation | description: enable animation" + } + }, + "propType": "bool", + "description": "收起动画", + "defaultValue": true + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "iconType", + "title": { + "label": { + "type": "i18n", + "zh_CN": "图标", + "en_US": "Icon" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: iconType | 说明: 显示的图标类型", + "en_US": "prop: iconType | description: icon type" + } + }, + "setter": { + "componentName": "IconSetter" + } + } + ] + } + }, + "icon": "", + "category": "反馈" + }, + { + "componentName": "Tooltip", + "title": "Tooltip", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Balloon", + "main": "", + "destructuring": true, + "subName": "Tooltip" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "description": "样式类名的品牌前缀", + "defaultValue": "next-" + }, + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + }, + { + "name": "children", + "propType": "node", + "description": "tooltip的内容" + }, + { + "name": "align", + "propType": { + "type": "oneOf", + "value": ["t", "r", "b", "l", "tl", "tr", "bl", "br", "lt", "lb", "rt", "rb"] + }, + "description": "弹出层位置\n@enumdesc 上, 右, 下, 左, 上左, 上右, 下左, 下右, 左上, 左下, 右上, 右下 及其 两两组合", + "defaultValue": "b" + }, + { + "name": "trigger", + "propType": "node", + "description": "触发元素" + }, + { + "name": "triggerType", + "propType": { + "type": "oneOf", + "value": ["hover", "click"] + }, + "description": "触发行为\n鼠标悬浮, 鼠标点击('hover', 'click')或者它们组成的数组，如 ['hover', 'click'], 强烈不建议使用'focus'，若有复杂交互，推荐使用triggerType为click的Balloon组件", + "defaultValue": "hover" + }, + { + "name": "popupStyle", + "propType": "object", + "description": "弹层组件style，透传给Popup" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹层组件className，透传给Popup" + }, + { + "name": "popupProps", + "propType": "object", + "description": "弹层组件属性，透传给Popup" + }, + { + "name": "pure", + "propType": "bool", + "description": "是否pure render" + }, + { + "name": "popupContainer", + "propType": "string", + "description": "指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数。" + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "id", + "propType": "string", + "description": "弹层id, 传入值才会支持无障碍" + }, + { + "name": "delay", + "propType": "number", + "description": "如果需要让 Tooltip 内容可被点击，可以设置这个参数，例如 100", + "defaultValue": 0 + } + ], + "category": "基础" + }, + { + "componentName": "Transfer", + "title": "穿梭框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Transfer", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "id", + "propType": "string", + "description": "请设置 id 以保证transfer的可访问性" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "mode", + "propType": { + "type": "oneOf", + "value": ["normal", "simple"] + }, + "description": "移动选项模式", + "defaultValue": "normal" + }, + { + "name": "dataSource", + "propType": "array", + "description": "数据源" + }, + { + "name": "value", + "propType": "array", + "description": "当前值" + }, + { + "name": "defaultValue", + "propType": "array", + "description": "默认值" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "leftDisabled", + "propType": "bool", + "description": "是否禁用左侧面板", + "defaultValue": false + }, + { + "name": "rightDisabled", + "propType": "bool", + "description": "是否禁用右侧面板", + "defaultValue": false + }, + { + "name": "itemRender", + "propType": "func", + "description": "列表项渲染函数" + }, + { + "name": "showSearch", + "propType": "bool", + "description": "是否显示搜索框", + "defaultValue": false + }, + { + "name": "filter", + "propType": "func", + "description": "自定义搜索函数" + }, + { + "name": "searchPlaceholder", + "propType": "string", + "description": "搜索框占位符" + }, + { + "name": "notFoundContent", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "列表为空显示内容", + "defaultValue": "Not Found" + }, + { + "name": "titles", + "propType": "array", + "description": "左右面板标题" + }, + { + "name": "operations", + "propType": "array", + "description": "向右向左移动按钮显示内容" + }, + { + "name": "defaultLeftChecked", + "propType": "array", + "description": "左面板默认选中值" + }, + { + "name": "defaultRightChecked", + "propType": "array", + "description": "右面板默认选中值" + }, + { + "name": "listClassName", + "propType": "string", + "description": "左右面板列表自定义样式类名" + }, + { + "name": "listStyle", + "propType": "object", + "description": "左右面板列表自定义样式对象" + }, + { + "name": "sortable", + "propType": "bool", + "description": "是否允许拖拽排序", + "defaultValue": false + }, + { + "name": "children", + "propType": "func", + "description": "接收 children 自定义渲染列表" + }, + { + "name": "onChange", + "propType": "func", + "description": "值发生改变的时候触发的回调函数" + }, + { + "name": "onSearch", + "propType": "func", + "description": "搜索框输入时触发的回调函数" + }, + { + "name": "onSort", + "propType": "func", + "description": "拖拽排序时触发的回调函数" + } + ], + "configure": { + "props": [ + { + "name": "value", + "title": "当前值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "defaultValue", + "title": "默认值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "mode", + "title": "模式", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "normal", + "value": "normal" + }, + { + "title": "simple", + "value": "simple" + } + ] + } + }, + "ExpressionSetter" + ] + } + }, + "defaultValue": "simple" + }, + { + "name": "showCheckAll", + "title": "显示全选", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + }, + "defaultValue": true + }, + { + "name": "showSearch", + "title": "搜索框", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + }, + "defaultValue": false + }, + { + "name": "searchPlaceholder", + "title": "搜索框占位符", + "display": "block", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + }, + "condition": { + "type": "JSFunction", + "value": "condition(target) {\n return target.getProps().getPropValue(\"showSearch\") || false;\n }" + } + }, + { + "name": "filter", + "title": "自定义搜索函数", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + }, + "condition": { + "type": "JSFunction", + "value": "condition(target) {\n return target.getProps().getPropValue(\"showSearch\") || false;\n }" + } + }, + { + "name": "sortable", + "title": "拖拽排序", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + }, + "defaultValue": false + }, + { + "name": "dataSource", + "title": "数据源", + "display": "block", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "JsonSetter" + }, + "ExpressionSetter" + ] + } + }, + "defaultValue": [ + { + "label": "item0", + "value": "0", + "disabled": false + }, + { + "label": "item1", + "value": "1", + "disabled": false + }, + { + "label": "item2", + "value": "2", + "disabled": true + } + ] + }, + { + "name": "defaultLeftChecked", + "title": "左侧面板默认选中值", + "display": "block", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "JsonSetter" + }, + "ExpressionSetter" + ] + } + }, + "defaultValue": ["1"] + }, + { + "name": "defaultRightChecked", + "title": "右侧面板默认选中值", + "display": "block", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "JsonSetter" + }, + "ExpressionSetter" + ] + } + }, + "defaultValue": ["1"] + }, + { + "name": "titles", + "title": "面板标题", + "display": "block", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "JsonSetter" + }, + "ExpressionSetter" + ] + } + }, + "defaultValue": ["TitleLeft", "TitleRight"] + }, + { + "name": "notFountContent", + "title": "无数据时显示内容", + "display": "block", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "StringSetter" + }, + "ExpressionSetter" + ] + } + }, + "defaultValue": ["无数据"] + }, + { + "name": "itemRender", + "title": "列表项渲染函数", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + } + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + }, + { + "name": "style", + "setter": { + "componentName": "StyleSetter" + } + } + ], + "supports": { + "events": ["onChange", "onSearch", "onSort"] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "TreeNode", + "title": "树形控件节点", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Tree", + "main": "", + "destructuring": true, + "subName": "Node" + }, + "props": [ + { + "name": "className", + "propType": "string" + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "树节点" + }, + { + "name": "label", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "description": "节点文本内容", + "defaultValue": "---" + }, + { + "name": "selectable", + "propType": "bool", + "description": "单独设置是否支持选中，覆盖 Tree 的 selectable" + }, + { + "name": "checkable", + "propType": "bool", + "description": "单独设置是否出现复选框，覆盖 Tree 的 checkable" + }, + { + "name": "editable", + "propType": "bool", + "description": "单独设置是否支持编辑，覆盖 Tree 的 editable" + }, + { + "name": "draggable", + "propType": "bool", + "description": "单独设置是否支持拖拽，覆盖 Tree 的 draggable" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁止节点响应", + "defaultValue": false + }, + { + "name": "checkboxDisabled", + "propType": "bool", + "description": "是否禁止勾选节点复选框", + "defaultValue": false + }, + { + "name": "isLeaf", + "propType": "bool", + "description": "是否是叶子节点", + "defaultValue": false + } + ], + "icon": "", + "category": "内容" + }, + { + "componentName": "TreeSelect", + "title": "树型选择控件", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "TreeSelect", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "string" + }, + { + "name": "dataSource", + "propType": { + "type": "Json" + }, + "description": "数据源" + }, + { + "name": "size", + "title": "尺寸", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "选择框大小", + "defaultValue": "medium" + }, + { + "name": "placeholder", + "title": "占位提示", + "propType": "string", + "description": "选择框占位符" + }, + { + "name": "label", + "title": "内联文案", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "自定义内联label" + }, + { + "name": "notFoundContent", + "title": "空提示", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "无数据时显示内容", + "defaultValue": "Not Found" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "hasArrow", + "title": "下拉箭头", + "propType": "bool", + "description": "是否有下拉箭头", + "defaultValue": true + }, + { + "name": "hasBorder", + "title": "边框", + "propType": "bool", + "description": "是否有边框", + "defaultValue": true + }, + { + "name": "hasClear", + "title": "清空按钮", + "propType": "bool", + "description": "是否有清空按钮", + "defaultValue": false + }, + { + "name": "readOnly", + "propType": "bool", + "description": "是否只读" + }, + { + "name": "autoWidth", + "propType": "bool", + "description": "下拉框是否与选择器对齐", + "defaultValue": true + }, + { + "name": "onChange", + "propType": "func", + "description": "选中值改变时触发的回调函数\n@param {String|Array} value 选中的值，单选时返回单个值，多选时返回数组\n@param {Object|Array} data 选中的数据，包括 value, label, pos, key属性，单选时返回单个值，多选时返回数组，父子节点选中关联时，同时选中，只返回父节点" + }, + { + "name": "showSearch", + "propType": "bool", + "description": "搜索框", + "defaultValue": false + }, + { + "name": "onSearch", + "propType": "func", + "description": "在搜索框中输入时触发的回调函数\n@param {String} keyword 输入的关键字" + }, + { + "name": "onSearchClear", + "propType": "func" + }, + { + "name": "multiple", + "propType": "bool", + "description": "支持多选", + "defaultValue": false + }, + { + "name": "treeCheckable", + "propType": "bool", + "description": "下拉框中的树是否支持勾选节点的复选框", + "defaultValue": false + }, + { + "name": "treeCheckStrictly", + "propType": "bool", + "description": "下拉框中的树勾选节点复选框是否完全受控（父子节点选中状态不再关联）", + "defaultValue": false + }, + { + "name": "treeCheckedStrategy", + "propType": { + "type": "oneOf", + "value": ["all", "parent", "child"] + }, + "description": "定义选中时回填的方式\n@enumdesc 返回所有选中的节点, 父子节点都选中时只返回父节点, 父子节点都选中时只返回子节点", + "defaultValue": "parent" + }, + { + "name": "treeDefaultExpandAll", + "propType": "bool", + "description": "下拉框中的树是否默认展开所有节点", + "defaultValue": false + }, + { + "name": "treeLoadData", + "propType": "func", + "description": "下拉框中的树异步加载数据的函数，使用请参考[Tree的异步加载数据Demo](https://fusion.design/component/tree)\n@param {ReactElement} node 被点击展开的节点" + }, + { + "name": "treeProps", + "propType": { + "type": "Json" + }, + "description": "透传到 Tree 的属性对象" + }, + { + "name": "defaultVisible", + "title": "初始显示", + "propType": "bool", + "description": "初始下拉框是否显示", + "defaultValue": false + }, + { + "name": "visible", + "propType": "bool", + "description": "当前下拉框是否显示" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "下拉框显示或关闭时触发事件的回调函数\n@param {Boolean} visible 是否显示\n@param {String} type 触发显示关闭的操作类型" + }, + { + "name": "popupStyle", + "propType": { + "type": "object" + }, + "description": "下拉框自定义样式对象" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "下拉框样式自定义类名" + }, + { + "name": "popupContainer", + "propType": "any", + "description": "下拉框挂载的容器节点" + }, + { + "name": "popupProps", + "propType": { + "type": "object" + }, + "description": "透传到 Popup 的属性对象" + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "预览态" + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {Array} value 选择值 { label: , value:}" + }, + { + "name": "useVirtual", + "propType": "bool", + "description": "是否开启虚拟滚动" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "visible", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "autoWidth", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "useVirtual", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "renderPreview", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "followTrigger", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupStyle", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupClassName", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupContainer", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupProps", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "treeCheckable", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "treeCheckStrictly", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "treeCheckedStrategy", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "treeDefaultExpandAll", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "treeLoadData", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "treeProps", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "label", + "title": "内联文案", + "setter": { + "componentName": "StringSetter" + } + }, + { + "name": "dataSource", + "title": { + "label": "节点数据", + "tip": "数据源" + }, + "setter": "JsonSetter" + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Tree", + "title": "树形控件", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Tree", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "string" + }, + { + "name": "dataSource", + "propType": { + "type": "object" + }, + "description": "数据源，该属性优先级高于 children" + }, + { + "name": "showLine", + "propType": "bool", + "description": "是否显示树的线", + "defaultValue": false + }, + { + "name": "selectable", + "propType": "bool", + "description": "是否支持选中节点", + "defaultValue": true + }, + { + "name": "onSelect", + "propType": "func", + "description": "选中或取消选中节点时触发的回调函数\n@param {Array} selectedKeys 选中节点key的数组\n@param {Object} extra 额外参数\n@param {Array} extra.selectedNodes 选中节点的数组\n@param {Object} extra.node 当前操作的节点\n@param {Boolean} extra.selected 当前操作是否是选中" + }, + { + "name": "multiple", + "propType": "bool", + "description": "是否支持多选", + "defaultValue": false + }, + { + "name": "checkable", + "propType": "bool", + "description": "是否支持勾选节点的复选框", + "defaultValue": false + }, + { + "name": "checkStrictly", + "propType": "bool", + "description": "勾选节点复选框是否完全受控（父子节点选中状态不再关联）", + "defaultValue": false + }, + { + "name": "checkedStrategy", + "propType": { + "type": "oneOf", + "value": ["all", "parent", "child"] + }, + "description": "定义选中时回填的方式\n@enumdesc 返回所有选中的节点, 父子节点都选中时只返回父节点, 父子节点都选中时只返回子节点", + "defaultValue": "all" + }, + { + "name": "onCheck", + "propType": "func", + "description": "勾选或取消勾选复选框时触发的回调函数\n@param {Array} checkedKeys 勾选复选框节点key的数组\n@param {Object} extra 额外参数\n@param {Array} extra.checkedNodes 勾选复选框节点的数组\n@param {Array} extra.checkedNodesPositions 包含有勾选复选框节点和其位置的对象的数组\n@param {Array} extra.indeterminateKeys 半选复选框节点 key 的数组\n@param {Object} extra.node 当前操作的节点\n@param {Boolean} extra.checked 当前操作是否是勾选" + }, + { + "name": "defaultExpandAll", + "propType": "bool", + "description": "是否默认展开所有节点", + "defaultValue": false + }, + { + "name": "autoExpandParent", + "propType": "bool", + "description": "是否自动展开父节点，建议受控时设置为false", + "defaultValue": true + }, + { + "name": "onExpand", + "propType": "func", + "description": "展开或收起节点时触发的回调函数\n@param {Array} expandedKeys 展开的节点key的数组\n@param {Object} extra 额外参数\n@param {Object} extra.node 当前操作的节点\n@param {Boolean} extra.expanded 当前操作是否是展开" + }, + { + "name": "editable", + "propType": "bool", + "description": "是否支持编辑节点内容", + "defaultValue": false + }, + { + "name": "onEditFinish", + "propType": "func", + "description": "编辑节点内容完成时触发的回调函数\n@param {String} key 编辑节点的 key\n@param {String} label 编辑节点完成时节点的文本\n@param {Object} node 当前编辑的节点" + }, + { + "name": "draggable", + "propType": "bool", + "description": "是否支持拖拽节点", + "defaultValue": false + }, + { + "name": "onDragStart", + "propType": "func", + "description": "开始拖拽节点时触发的回调函数\n@param {Object} info 拖拽信息\n@param {Object} info.event 事件对象\n@param {Object} info.node 拖拽的节点" + }, + { + "name": "onDragEnter", + "propType": "func", + "description": "拖拽节点进入目标节点时触发的回调函数\n@param {Object} info 拖拽信息\n@param {Object} info.event 事件对象\n@param {Object} info.node 目标节点\n@param {Array} info.expandedKeys 当前展开的节点key的数组" + }, + { + "name": "onDragOver", + "propType": "func", + "description": "拖拽节点在目标节点上移动的时候触发的回调函数\n@param {Object} info 拖拽信息\n@param {Object} info.event 事件对象\n@param {Object} info.node 目标节点" + }, + { + "name": "onDragLeave", + "propType": "func", + "description": "拖拽节点离开目标节点时触发的回调函数\n@param {Object} info 拖拽信息\n@param {Object} info.event 事件对象\n@param {Object} info.node 目标节点" + }, + { + "name": "onDragEnd", + "propType": "func", + "description": "拖拽节点拖拽结束时触发的回调函数\n@param {Object} info 拖拽信息\n@param {Object} info.event 事件对象\n@param {Object} info.node 目标节点" + }, + { + "name": "onDrop", + "propType": "func", + "description": "拖拽节点放入目标节点内或前后触发的回调函数\n@param {Object} info 拖拽信息\n@param {Object} info.event 事件对象\n@param {Object} info.node 目标节点\n@param {Object} info.dragNode 拖拽的节点\n@param {Array} info.dragNodesKeys 拖拽的节点和其子节点 key 的数组\n@param {Number} info.dropPosition 放置位置，-1代表当前节点前，0代表当前节点里，1代表当前节点后" + }, + { + "name": "canDrop", + "propType": "func", + "description": "节点是否可被作为拖拽的目标节点" + }, + { + "name": "loadData", + "propType": "func", + "description": "异步加载数据的函数" + }, + { + "name": "filterTreeNode", + "propType": "func", + "description": "按需筛选高亮节点" + }, + { + "name": "onRightClick", + "propType": "func", + "description": "右键点击节点时触发的回调函数" + }, + { + "name": "isLabelBlock", + "propType": "bool", + "description": "设置节点是否占满剩余空间，一般用于统一在各节点右侧添加元素(借助 flex 实现，暂时只支持 ie10+)", + "defaultValue": false + }, + { + "name": "isNodeBlock", + "propType": "bool", + "description": "设置节点是否占满一行", + "defaultValue": false + }, + { + "name": "animation", + "propType": "bool", + "description": "是否开启展开收起动画", + "defaultValue": true + }, + { + "name": "focusedKey", + "propType": "string", + "description": "当前获得焦点的子菜单或菜单项 key 值" + }, + { + "name": "renderChildNodes", + "propType": "func", + "description": "渲染子节点" + }, + { + "name": "useVirtual", + "propType": "bool", + "description": "是否开启虚拟滚动" + }, + { + "name": "onItemFocus", + "propType": "func" + }, + { + "name": "onBlur", + "propType": "func" + }, + { + "name": "onItemKeyDown", + "propType": "func" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": [ + { + "name": "dataSource", + "title": "节点数据", + "setter": "JsonSetter" + }, + { + "name": "showLine", + "title": "显示线", + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "multiple", + "title": "支持多选", + "setter": { + "componentName": "BoolSetter" + }, + "description": "是否支持多选", + "defaultValue": false + }, + { + "name": "checkable", + "title": "复选框", + "setter": { + "componentName": "BoolSetter" + }, + "description": "是否支持勾选节点的复选框", + "defaultValue": false + }, + { + "name": "editable", + "title": "支持编辑", + "setter": { + "componentName": "BoolSetter" + }, + "defaultValue": false + }, + { + "name": "draggable", + "title": "支持拖拽", + "setter": { + "componentName": "BoolSetter" + }, + "defaultValue": false + }, + { + "name": "selectable", + "title": "支持选中", + "setter": { + "componentName": "BoolSetter" + }, + "defaultValue": false + }, + { + "name": "defaultExpandedKeys", + "display": "block", + "title": "默认展开的节点", + "setter": "JsonSetter" + }, + { + "name": "defaultSelectedKeys", + "display": "block", + "title": "默认选中的节点", + "setter": "JsonSetter" + } + ], + "supports": { + "style": true, + "events": ["onSelect", "onCheck", "onExpand"] + } + }, + "experimental": { + "initials": [ + { + "name": "showLine", + "initial": { + "type": "JSFunction", + "value": "()=> true" + } + }, + { + "name": "defaultExpandAll", + "initial": { + "type": "JSFunction", + "value": "()=> true" + } + }, + { + "name": "defaultExpandedKeys", + "initial": { + "type": "JSFunction", + "value": "()=> [\"1\"]" + } + }, + { + "name": "defaultSelectedKeys", + "initial": { + "type": "JSFunction", + "value": "()=> [\"2\"]" + } + }, + { + "name": "dataSource", + "initial": { + "type": "JSFunction", + "value": "() => [\n {\n label: \"Component\",\n key: \"1\",\n children: [\n {\n label: \"Form\",\n key: \"2\",\n selectable: false,\n children: [\n {\n label: \"Input\",\n key: \"4\"\n },\n {\n label: \"Select\",\n key: \"5\"\n }\n ]\n },\n {\n label: \"Display\",\n key: \"3\",\n children: [\n {\n label: \"Table\",\n key: \"6\"\n }\n ]\n }\n ]\n }\n ]" + } + } + ] + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Typography.Text", + "title": "Text", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Typography", + "main": "", + "destructuring": true, + "subName": "Text" + }, + "props": [ + { + "name": "children", + "propType": "string" + }, + { + "name": "delete", + "propType": "bool", + "description": "添加删除线样式", + "defaultValue": false + }, + { + "name": "mark", + "propType": "bool", + "description": "添加标记样式", + "defaultValue": false + }, + { + "name": "underline", + "propType": "bool", + "description": "添加下划线样式", + "defaultValue": false + }, + { + "name": "strong", + "propType": "bool", + "description": "是否加粗", + "defaultValue": false + }, + { + "name": "code", + "propType": "bool", + "description": "添加代码样式", + "defaultValue": false + }, + { + "name": "component", + "propType": { + "type": "oneOf", + "value": ["span", "h1", "h2", "h3", "h4"] + }, + "description": "设置标签类型", + "defaultValue": "span" + }, + { + "name": "onClick", + "propType": "func", + "description": "鼠标点击" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "children", + "setter": "TextAreaSetter" + } + ] + } + }, + "category": "基础" + }, + { + "componentName": "Typography", + "title": "Text", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Typography", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "component", + "propType": { + "type": "instanceOf", + "value": "elementType" + }, + "description": "设置标签类型", + "defaultValue": "article" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "children", + "title": "内容", + "propType": "string" + } + ], + "configure": { + "component": { + "isContainer": true + } + }, + "icon": "", + "category": "常用" + }, + { + "componentName": "Upload.Dragger", + "title": "Upload.Dragger", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Upload", + "main": "", + "destructuring": true, + "subName": "DragUpload" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "description": "样式前缀", + "defaultValue": "next-" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "shape", + "propType": "string" + }, + { + "name": "onDragOver", + "propType": "func" + }, + { + "name": "onDragLeave", + "propType": "func" + }, + { + "name": "onDrop", + "propType": "func" + }, + { + "name": "limit", + "propType": "number" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "defaultValue", + "propType": { + "type": "instanceOf", + "value": "array" + } + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "listType", + "propType": "string" + }, + { + "name": "timeout", + "propType": "number" + } + ], + "category": "基础" + }, + { + "componentName": "Upload.List", + "title": "Upload.List", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Upload", + "main": "", + "destructuring": true, + "subName": "List" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "locale", + "propType": "object", + "description": "多语言" + }, + { + "name": "listType", + "propType": { + "type": "oneOf", + "value": ["text", "image", "card"] + }, + "description": "文件列表，数据格式请参考 文件对象", + "defaultValue": "text" + }, + { + "name": "value", + "propType": { + "type": "instanceOf", + "value": "array" + }, + "description": "文件列表", + "defaultValue": [] + }, + { + "name": "closable", + "propType": "bool", + "defaultValue": false + }, + { + "name": "onRemove", + "propType": "func", + "description": "删除文件回调(支持Promise)" + }, + { + "name": "onCancel", + "propType": "func", + "description": "取消上传回调(支持Promise)" + }, + { + "name": "onImageError", + "propType": "func", + "description": "头像加载出错回调" + }, + { + "name": "onPreview", + "propType": "func", + "description": "listType=card时点击图片回调" + }, + { + "name": "extraRender", + "propType": "func", + "description": "自定义额外渲染" + }, + { + "name": "progressProps", + "propType": "object", + "description": "透传给Progress props" + }, + { + "name": "children", + "propType": "node" + }, + { + "name": "uploader", + "propType": "any" + }, + { + "name": "useDataURL", + "propType": "bool", + "description": "可选参数，是否本地预览" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "isPreview", + "propType": "bool" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "Upload.Selecter", + "title": "Upload.Selecter", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Upload", + "main": "", + "destructuring": true, + "subName": "Selecter" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用上传功能" + }, + { + "name": "multiple", + "propType": "bool", + "description": "是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件", + "defaultValue": false + }, + { + "name": "dragable", + "propType": "bool", + "description": "是否支持拖拽上传，`ie10+` 支持。" + }, + { + "name": "accept", + "propType": "string", + "description": "接受上传的文件类型 (image/png, image/jpg, .doc, .ppt) 详见 [input accept attribute](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input#attr-accept)" + }, + { + "name": "onSelect", + "propType": "func", + "description": "文件选择回调" + }, + { + "name": "onDragOver", + "propType": "func", + "description": "拖拽经过回调" + }, + { + "name": "onDragLeave", + "propType": "func", + "description": "拖拽离开回调" + }, + { + "name": "onDrop", + "propType": "func", + "description": "拖拽完成回调" + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "name", + "propType": "string", + "defaultValue": "file" + } + ], + "category": "基础" + }, + { + "componentName": "Upload", + "title": "上传", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Upload", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "action", + "propType": "string", + "description": "上传的地址" + }, + { + "name": "value", + "propType": { + "type": "Json" + }, + "description": "文件列表" + }, + { + "name": "defaultValue", + "propType": "object", + "description": "默认文件列表" + }, + { + "name": "shape", + "propType": { + "type": "oneOf", + "value": ["card"] + }, + "description": "上传按钮形状" + }, + { + "name": "listType", + "propType": { + "type": "oneOf", + "value": ["text", "image", "card"] + }, + "description": "上传列表的样式" + }, + { + "name": "name", + "propType": "string", + "description": "文件名字段" + }, + { + "name": "data", + "propType": { + "type": "oneOfType", + "value": ["object", "func"] + }, + "description": "上传额外传参" + }, + { + "name": "formatter", + "propType": "func", + "title": { + "label": "数据格式化函数", + "tip": "数据格式化函数，配合自定义 action 使用，参数为服务器的响应数据，详见 [formatter](#formater)\n@param {Object} response 返回\n@param {File} file 文件对象" + } + }, + { + "name": "limit", + "propType": "number", + "description": "最大文件上传个数", + "defaultValue": null + }, + { + "name": "timeout", + "propType": "number", + "description": "设置上传超时,单位ms" + }, + { + "name": "dragable", + "propType": "bool", + "description": "可选参数，是否支持拖拽上传，`ie10+` 支持。" + }, + { + "name": "useDataURL", + "propType": "bool", + "description": "可选参数，是否本地预览" + }, + { + "name": "disabled", + "propType": "bool", + "description": "可选参数，是否禁用上传功能" + }, + { + "name": "onSelect", + "propType": "func", + "description": "选择文件回调" + }, + { + "name": "onProgress", + "propType": "func", + "description": "上传中" + }, + { + "name": "onChange", + "propType": "func", + "description": "上传文件改变时的状态\n@param {Object} info 文件事件对象" + }, + { + "name": "onSuccess", + "propType": "func", + "description": "可选参数，上传成功回调函数，参数为请求下响应信息以及文件\n@param {Object} file 文件\n@param {Array} value 值" + }, + { + "name": "afterSelect", + "propType": "func", + "description": "可选参数, 用于校验文件,afterSelect仅在 autoUpload=false 的时候生效,autoUpload=true时,可以使用beforeUpload完全可以替代该功能.\n@param {Object} file\n@returns {Boolean} 返回false会阻止上传,其他则表示正常" + }, + { + "name": "onRemove", + "propType": "func", + "description": "移除文件回调函数\n@param {Object} file 文件\n@returns {Boolean|Promise} 返回 false、Promise.resolve(false)、 Promise.reject() 将阻止文件删除" + }, + { + "name": "onError", + "propType": "func", + "description": "可选参数，上传失败回调函数，参数为上传失败的信息、响应信息以及文件\n@param {Object} file 出错的文件\n@param {Array} value 当前值" + }, + { + "name": "beforeUpload", + "propType": "func", + "title": { + "label": "开始上传时回调", + "tip": "可选参数, 详见 [beforeUpload](#beforeUpload)\n@param {Object} file 所有文件\n@param {Object} options 参数\n@returns {Boolean|Object|Promise} 返回值作用见demo" + } + }, + { + "name": "onDrop", + "propType": "func", + "description": "放文件" + }, + { + "name": "className", + "propType": "string", + "description": "自定义class" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + }, + { + "name": "autoUpload", + "propType": "bool", + "description": "自动上传", + "defaultValue": true + }, + { + "name": "request", + "propType": "func", + "description": "自定义上传方法\n@param {Object} option\n@return {Object} object with abort method" + }, + { + "name": "progressProps", + "propType": "object", + "description": "透传给Progress props" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态" + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {number} value 评分值" + } + ], + "configure": { + "props": [ + { + "name": "title", + "title": "标题", + "setter": "StringSetter" + }, + { + "name": "title", + "title": "标题位置", + "setter": "StringSetter" + }, + { + "name": "defaultValue", + "title": "默认值", + "setter": { + "componentName": "JsonSetter" + } + }, + { + "name": "shape", + "title": "按钮形状", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "默认", + "value": "" + }, + { + "title": "卡片", + "value": "card" + } + ] + } + }, + "description": "上传按钮形状" + }, + { + "name": "listType", + "title": "列表样式", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["text", "image", "card"] + } + }, + "defaultValue": "text", + "description": "上传列表的样式" + }, + { + "name": "limit", + "title": "数量限制", + "setter": "NumberSetter" + }, + { + "name": "disabled", + "title": "是否禁用", + "setter": "BoolSetter" + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ] + }, + "experimental": { + "initials": [ + { + "name": "shape", + "initial": { + "type": "JSFunction", + "value": "() => \"card\"" + } + }, + { + "name": "defaultValue", + "initial": { + "type": "JSFunction", + "value": "() => []" + } + } + ] + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Video", + "title": "视频", + "npm": { + "package": "@alifd/ali-lowcode-components", + "version": "latest", + "exportName": "Video", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "src", + "title": { + "label": { + "type": "i18n", + "zh_CN": "视频链接", + "en_US": "Video Address" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: src | 说明: 视频链接", + "en_US": "prop: src | description: Video address" + } + }, + "propType": "string", + "defaultValue": "https://fusion.alicdn.com/fusion-site-2.0/fusion.mp4" + }, + { + "name": "autoPlay", + "title": { + "label": { + "type": "i18n", + "zh_CN": "自动播放", + "en_US": "autoPlay" + } + }, + "propType": "bool", + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "loop", + "title": { + "label": { + "type": "i18n", + "zh_CN": "循环播放", + "en_US": "loop" + } + }, + "propType": "bool" + }, + { + "name": "muted", + "title": { + "label": { + "type": "i18n", + "zh_CN": "静音", + "en_US": "muted" + } + }, + "propType": "bool" + }, + { + "name": "controls", + "title": { + "label": { + "type": "i18n", + "zh_CN": "控制条", + "en_US": "controls" + } + }, + "propType": "bool" + }, + { + "name": "poster", + "title": { + "label": { + "type": "i18n", + "zh_CN": "默认图URL", + "en_US": "poster" + } + }, + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "autoPlay", + "title": "自动播放", + "setter": { + "componentName": "BoolSetter" + }, + "extraProps": { + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n if (value) {\n target.getNode().setPropValue(\"muted\", true);\n }\n }" + } + } + }, + { + "name": "muted", + "title": "静音", + "setter": { + "componentName": "BoolSetter" + }, + "condition": { + "type": "JSFunction", + "value": "target => {\n return !target.getProps().getPropValue(\"autoPlay\");\n }" + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "WeekPicker", + "title": "WeekPicker", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "DatePicker", + "main": "", + "destructuring": true, + "subName": "WeekPicker" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "label", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "输入框内置标签" + }, + { + "name": "state", + "propType": { + "type": "oneOf", + "value": ["success", "loading", "error"] + }, + "description": "输入框状态" + }, + { + "name": "placeholder", + "propType": "string", + "description": "输入提示" + }, + { + "name": "defaultVisibleMonth", + "propType": "func", + "description": "默认展现的月\n@return {MomentObject} 返回包含指定月份的 moment 对象实例" + }, + { + "name": "onVisibleMonthChange", + "propType": "func" + }, + { + "name": "value", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "日期值（受控）moment 对象" + }, + { + "name": "defaultValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "初始日期值，moment 对象" + }, + { + "name": "format", + "propType": "string", + "description": "日期值的格式（用于限定用户输入和展示）", + "defaultValue": "YYYY-wo" + }, + { + "name": "disabledDate", + "propType": "func", + "description": "禁用日期函数\n@param {MomentObject} 日期值\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\n@return {Boolean} 是否禁用" + }, + { + "name": "footerRender", + "propType": "func", + "description": "自定义面板页脚\n@return {Node} 自定义的面板页脚组件" + }, + { + "name": "onChange", + "propType": "func", + "description": "日期值改变时的回调\n@param {MomentObject|String} value 日期值" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "输入框尺寸", + "defaultValue": "medium" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "hasClear", + "propType": "bool", + "description": "是否显示清空按钮", + "defaultValue": true + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层显示状态" + }, + { + "name": "defaultVisible", + "propType": "bool", + "description": "弹层默认是否显示", + "defaultValue": false + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层展示状态变化时的回调\n@param {Boolean} visible 弹层是否显示\n@param {String} type 触发弹层显示和隐藏的来源 calendarSelect 表示由日期表盘的选择触发； okBtnClick 表示由确认按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "popupTriggerType", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "弹层触发方式", + "defaultValue": "click" + }, + { + "name": "popupAlign", + "propType": "string", + "description": "弹层对齐方式,具体含义见 OverLay文档", + "defaultValue": "tl tl" + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + }, + { + "name": "popupStyle", + "propType": "object", + "description": "弹层自定义样式" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹层自定义样式类" + }, + { + "name": "popupProps", + "propType": "object", + "description": "弹层其他属性" + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "inputProps", + "propType": "object", + "description": "输入框其他属性" + }, + { + "name": "dateCellRender", + "propType": "func", + "description": "自定义日期渲染函数\n@param {Object} value 日期值（moment对象）\n@returns {ReactNode}" + }, + { + "name": "monthCellRender", + "propType": "func", + "description": "自定义月份渲染函数\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@returns {ReactNode}" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态" + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {MomentObject} value 年份" + }, + { + "name": "yearCellRender", + "propType": "func" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "name", + "propType": "string" + }, + { + "name": "popupComponent", + "propType": { + "type": "instanceOf", + "value": "elementType" + } + }, + { + "name": "popupContent", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "YearPicker", + "title": "YearPicker", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "DatePicker", + "main": "", + "destructuring": true, + "subName": "YearPicker" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "label", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "输入框内置标签" + }, + { + "name": "state", + "propType": { + "type": "oneOf", + "value": ["success", "loading", "error"] + }, + "description": "输入框状态" + }, + { + "name": "placeholder", + "propType": "string", + "description": "输入提示" + }, + { + "name": "value", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "日期值（受控）moment 对象" + }, + { + "name": "defaultValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "初始日期值，moment 对象" + }, + { + "name": "format", + "propType": "string", + "description": "日期值的格式（用于限定用户输入和展示）", + "defaultValue": "YYYY" + }, + { + "name": "disabledDate", + "propType": "func", + "description": "禁用日期函数\n@param {MomentObject} 日期值\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\n@return {Boolean} 是否禁用" + }, + { + "name": "footerRender", + "propType": "func", + "description": "自定义面板页脚\n@return {Node} 自定义的面板页脚组件" + }, + { + "name": "onChange", + "propType": "func", + "description": "日期值改变时的回调\n@param {MomentObject|String} value 日期值" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "输入框尺寸", + "defaultValue": "medium" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "hasClear", + "propType": "bool", + "description": "是否显示清空按钮", + "defaultValue": true + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层显示状态" + }, + { + "name": "defaultVisible", + "propType": "bool", + "description": "弹层默认是否显示" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层展示状态变化时的回调\n@param {Boolean} visible 弹层是否显示\n@param {String} reason 触发弹层显示和隐藏的来源 calendarSelect 表示由日期表盘的选择触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "popupTriggerType", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "弹层触发方式", + "defaultValue": "click" + }, + { + "name": "popupAlign", + "propType": "string", + "description": "弹层对齐方式, 具体含义见 OverLay文档", + "defaultValue": "tl tl" + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + }, + { + "name": "popupStyle", + "propType": "object", + "description": "弹层自定义样式" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹层自定义样式类" + }, + { + "name": "popupProps", + "propType": "object", + "description": "弹层其他属性" + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "inputProps", + "propType": "object", + "description": "输入框其他属性" + }, + { + "name": "yearCellRender", + "propType": "func" + }, + { + "name": "dateInputAriaLabel", + "propType": "string", + "description": "日期输入框的 aria-label 属性" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态" + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {MomentObject} value 年份" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "name", + "propType": "string" + }, + { + "name": "popupComponent", + "propType": { + "type": "instanceOf", + "value": "elementType" + } + }, + { + "name": "popupContent", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + } + ], + "componentList": [ + { + "title": "常用", + "icon": "", + "children": [ + { + "componentName": "Link", + "library": "Next", + "title": "链接", + "icon": "", + "snippets": [ + { + "title": "链接", + "screenshot": "https://img.alicdn.com/tfs/TB15DZVReL2gK0jSZFmXXc7iXXa-200-200.svg", + "schema": { + "componentName": "Link", + "title": "链接", + "props": { + "href": "https://fusion.design", + "target": "_blank", + "children": "这是一个超链接" + } + } + } + ] + }, + { + "componentName": "Button", + "library": "Next", + "title": "按钮", + "icon": "", + "snippets": [ + { + "title": "主要", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_button.png", + "schema": { + "componentName": "Button", + "props": { + "prefix": "next-", + "type": "primary", + "size": "medium", + "htmlType": "button", + "component": "button", + "children": "取消" + } + } + }, + { + "title": "次要", + "screenshot": "https://img.alicdn.com/tfs/TB1a.N1uVT7gK0jSZFpXXaTkpXa-112-64.png", + "schema": { + "componentName": "Button", + "props": { + "type": "secondary", + "size": "medium", + "htmlType": "button", + "component": "button", + "children": "提交" + } + } + }, + { + "title": "分隔按钮", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_split-button.png", + "schema": { + "componentName": "SplitButton", + "props": { + "prefix": "next-", + "type": "normal", + "size": "medium", + "defaultSelectedKeys": [], + "autoWidth": true, + "popupTriggerType": "click" + } + } + }, + { + "title": "按钮组", + "screenshot": "https://img.alicdn.com/tfs/TB1t6dhvV67gK0jSZPfXXahhFXa-310-122.png", + "schema": { + "componentName": "Button.Group", + "props": {}, + "children": [ + { + "componentName": "Button", + "props": { + "type": "primary", + "style": { + "margin": "0 5px 0 5px" + }, + "htmlType": "submit", + "children": "提交" + }, + "children": [ + { + "componentName": "Icon", + "props": { + "type": "success" + } + } + ] + }, + { + "componentName": "Button", + "props": { + "type": "normal", + "style": { + "margin": "0 5px 0 5px" + }, + "htmlType": "reset", + "children": "重置" + } + } + ] + } + } + ] + }, + { + "componentName": "Image", + "library": "Next", + "title": "图片", + "icon": "", + "snippets": [ + { + "title": "图片", + "screenshot": "https://img.alicdn.com/tfs/TB10nEur.Y1gK0jSZFCXXcwqXXa-234-230.png", + "schema": { + "title": "图片", + "componentName": "Image", + "props": { + "src": "https://img.alicdn.com/tps/TB16TQvOXXXXXbiaFXXXXXXXXXX-120-120.svg" + } + } + } + ] + }, + { + "componentName": "NextText", + "library": "Next", + "title": "文本", + "icon": "", + "snippets": [ + { + "title": "标题", + "screenshot": "https://img.alicdn.com/imgextra/i4/O1CN01E2PcPW1bKJV5QUVMg_!!6000000003446-55-tps-50-50.svg", + "schema": { + "componentName": "NextText", + "props": { + "type": "h5", + "children": "标题标题" + } + } + }, + { + "title": "正文", + "screenshot": "https://img.alicdn.com/imgextra/i3/O1CN01n5wpxc1bi862KuXFz_!!6000000003498-55-tps-50-50.svg", + "schema": { + "componentName": "NextText", + "props": { + "type": "inherit", + "children": "基于 Ali-Lowcode-Engine 快速打造高生产力的低代码研发平台, 基于自然布局体系快速搭建页面" + } + } + } + ] + }, + { + "componentName": "RichText", + "library": "Next", + "title": "需求占位", + "icon": "", + "snippets": [ + { + "title": "需求占位", + "screenshot": "https://img.alicdn.com/tfs/TB160cKkP39YK4jSZPcXXXrUFXa-112-64.png", + "schema": { + "title": "需求占位", + "componentName": "RichText", + "props": { + "title": "需求占位描述", + "content": "

需求标题

你可以在这里描述需求
或者粘贴需求截图

" + } + } + } + ] + } + ] + }, + { + "title": "容器", + "icon": "", + "children": [ + { + "componentName": "Balloon", + "library": "Next", + "title": "气泡框", + "icon": "", + "snippets": [ + { + "title": "气泡框", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_balloon.png", + "schema": { + "componentName": "Balloon", + "props": { + "defaultVisible": true, + "prefix": "next-", + "size": "medium", + "type": "normal", + "closable": true, + "align": "b", + "offset": [0, 0], + "triggerType": "hover", + "autoFocus": true, + "trigger": { + "type": "JSSlot", + "props": { + "title": "触发元素" + } + } + } + } + } + ] + }, + { + "componentName": "Dialog", + "library": "Next", + "title": "对话框", + "icon": "", + "snippets": [ + { + "title": "对话框", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_dialog.png", + "schema": { + "componentName": "Dialog", + "props": { + "prefix": "next-", + "footerAlign": "right", + "title": "Title", + "footer": true, + "footerActions": ["ok", "cancel"], + "closeable": "esc,close", + "hasMask": true, + "align": "cc cc", + "minMargin": 40, + "isAutoContainer": true, + "visible": true + } + } + }, + { + "title": "隐藏底部", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_dialog.png", + "schema": { + "componentName": "Dialog", + "props": { + "prefix": "next-", + "footerAlign": "right", + "title": "Title", + "footer": false, + "closeable": "esc,close", + "hasMask": true, + "align": "cc cc", + "minMargin": 40, + "isAutoContainer": true, + "visible": true + } + } + } + ] + }, + { + "componentName": "Drawer", + "library": "Next", + "title": "抽屉", + "icon": "", + "snippets": [ + { + "title": "侧抽屉", + "screenshot": "https://img.alicdn.com/tfs/TB1o0t4u9f2gK0jSZFPXXXsopXa-112-64.png", + "schema": { + "componentName": "Drawer", + "props": { + "prefix": "next-", + "triggerType": "click", + "closeable": true, + "placement": "right", + "hasMask": true, + "isAutoContainer": true, + "visible": true + } + } + }, + { + "title": "底部抽屉", + "screenshot": "https://img.alicdn.com/tfs/TB1YOd2u2b2gK0jSZK9XXaEgFXa-112-64.png", + "schema": { + "componentName": "Drawer", + "props": { + "prefix": "next-", + "triggerType": "click", + "closeable": true, + "placement": "bottom", + "hasMask": true, + "isAutoContainer": true, + "visible": true + } + } + } + ] + }, + { + "componentName": "NextBlock", + "library": "Next", + "title": "区块", + "icon": "", + "snippets": [ + { + "screenshot": "https://img.alicdn.com/imgextra/i4/O1CN018GSQoS1NfvZqx8kox_!!6000000001598-2-tps-504-244.png", + "title": "标准单列", + "schema": { + "componentName": "NextBlock", + "props": { + "childTotalColumns": 12, + "layoutmode": "O", + "mode": "inset" + }, + "children": [ + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 12, + "rowSpan": 1, + "isAutoContainer": true + } + } + ] + } + }, + { + "screenshot": "https://img.alicdn.com/imgextra/i2/O1CN01pGG2VZ1GM34oELm0S_!!6000000000607-2-tps-504-244.png", + "title": "标准模式", + "schema": { + "componentName": "NextBlock", + "props": { + "childTotalColumns": 12, + "layoutmode": "OOO", + "mode": "inset" + }, + "children": [ + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + }, + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + }, + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + } + ] + } + }, + { + "screenshot": "https://img.alicdn.com/imgextra/i4/O1CN01Vpmd151yx07vfE7Eh_!!6000000006644-55-tps-500-240.svg", + "title": "卡片模式", + "schema": { + "componentName": "NextBlock", + "props": { + "childTotalColumns": 12, + "layoutmode": "OOO", + "mode": "card" + }, + "children": [ + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + }, + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + }, + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + } + ] + } + }, + { + "screenshot": "https://img.alicdn.com/imgextra/i4/O1CN01jq8RX81fQVKA5wvjz_!!6000000004001-2-tps-1000-480.png", + "title": "透明模式", + "schema": { + "componentName": "NextBlock", + "props": { + "childTotalColumns": 12, + "layoutmode": "OOO", + "mode": "transparent" + }, + "children": [ + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + }, + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + }, + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + } + ] + } + } + ] + }, + { + "componentName": "NextP", + "library": "Next", + "title": "段落模板", + "icon": "", + "snippets": [ + { + "title": "左右布局", + "screenshot": "https://img.alicdn.com/imgextra/i2/O1CN01xhBoCx26lZ9kasMLa_!!6000000007702-2-tps-140-61.png", + "schema": { + "componentName": "NextP", + "title": "段落", + "props": { + "align": "space-between", + "flex": true, + "verAlign": "middle", + "textSpacing": true + }, + "children": [ + { + "componentName": "NextPCell", + "props": { + "primaryKey": "4903", + "direction": "hoz", + "align": "inherit", + "verAlign": "inherit" + } + }, + { + "componentName": "NextPCell", + "props": { + "primaryKey": "5240", + "direction": "hoz", + "align": "inherit", + "verAlign": "inherit" + } + } + ] + } + }, + { + "title": "行撑满", + "screenshot": "https://img.alicdn.com/imgextra/i1/O1CN01A0tcpZ1YY6ZrVtvtQ_!!6000000003070-2-tps-138-96.png", + "schema": { + "componentName": "NextP", + "title": "段落", + "props": { + "full": true, + "textSpacing": true + }, + "children": [ + { + "componentName": "NextPCell", + "props": { + "primaryKey": "4092", + "direction": "hoz", + "align": "inherit", + "verAlign": "inherit" + } + }, + { + "componentName": "NextPCell", + "props": { + "primaryKey": "1095", + "direction": "hoz", + "align": "inherit", + "verAlign": "inherit" + } + } + ] + } + }, + { + "title": "组", + "screenshot": "https://img.alicdn.com/imgextra/i3/O1CN01NMDPaR1pzu5MxtVGF_!!6000000005432-2-tps-576-180.png", + "schema": { + "componentName": "NextPCell", + "title": "组", + "props": { + "direction": "hoz", + "align": "inherit", + "verAlign": "inherit" + } + } + } + ] + }, + { + "componentName": "NextPage", + "library": "Next", + "title": "页面", + "icon": "", + "snippets": [ + { + "title": "页面", + "screenshot": "https://tianshu.alicdn.com/429f9a1d-3856-4e5c-8a9c-3013860c9708.png", + "schema": { + "componentName": "NextPage", + "title": "页面", + "props": { + "columns": 12, + "headerDivider": true, + "placeholderStyle": { + "gridRowEnd": "span 1", + "gridColumnEnd": "span 12" + }, + "placeholder": "页面主体内容：拖拽Block布局组件到这里", + "header": { + "type": "JSSlot", + "title": "header", + "value": [] + }, + "headerProps": { + "background": "surface" + }, + "footer": { + "type": "JSSlot", + "title": "footer", + "value": [] + } + }, + "children": [ + { + "componentName": "NextBlock", + "title": "区块", + "props": { + "prefix": "next-", + "placeholderStyle": { + "height": "100%" + }, + "noPadding": false, + "noBorder": false, + "background": "surface", + "layoutmode": "O", + "colSpan": 12, + "rowSpan": 1, + "childTotalColumns": 12 + } + } + ] + } + } + ] + } + ] + }, + { + "title": "导航", + "icon": "", + "children": [ + { + "componentName": "Breadcrumb", + "library": "Next", + "title": "面包屑", + "icon": "", + "snippets": [ + { + "title": "面包屑", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_breadcrumb.png", + "schema": { + "componentName": "Breadcrumb", + "props": { + "maxNode": 100, + "component": "nav" + }, + "children": [ + { + "componentName": "Breadcrumb.Item", + "props": { + "children": "一级", + "primaryKey": "breadcrumb-item-1", + "target": "_self" + } + }, + { + "componentName": "Breadcrumb.Item", + "props": { + "children": "二级", + "primaryKey": "breadcrumb-item-2", + "target": "_self" + } + }, + { + "componentName": "Breadcrumb.Item", + "props": { + "children": "三级", + "primaryKey": "breadcrumb-item-3", + "target": "_self" + } + } + ] + } + } + ] + }, + { + "componentName": "Pagination", + "library": "Next", + "title": "翻页器", + "icon": "", + "snippets": [ + { + "title": "翻页器", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_pagination.png", + "schema": { + "componentName": "Pagination", + "props": { + "prefix": "next-", + "type": "normal", + "shape": "normal", + "size": "medium", + "defaultCurrent": 1, + "total": 100, + "pageShowCount": 5, + "pageSize": 10, + "pageSizePosition": "start", + "showJump": true + } + } + } + ] + }, + { + "componentName": "Search", + "library": "Next", + "title": "搜索", + "icon": "", + "snippets": [ + { + "title": "搜索", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_search.png", + "schema": { + "componentName": "Search", + "props": { + "followTrigger": true, + "searchText": "搜索", + "prefix": "next-", + "shape": "normal", + "type": "normal", + "size": "medium", + "hasIcon": true + } + } + }, + { + "title": "带分类", + "screenshot": "https://img.alicdn.com/tfs/TB1rRaLu5_1gK0jSZFqXXcpaXXa-112-64.png", + "schema": { + "componentName": "Search", + "props": { + "followTrigger": true, + "defaultFilterValue": "Products", + "filter": [ + { + "label": "Products", + "value": "Products" + }, + { + "label": "Products1", + "value": "Products1" + } + ], + "searchText": "搜索", + "prefix": "next-", + "shape": "normal", + "type": "normal", + "size": "medium", + "hasIcon": true + } + } + } + ] + }, + { + "componentName": "Step", + "library": "Next", + "title": "步骤条", + "icon": "", + "snippets": [ + { + "title": "步骤", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_step.png", + "schema": { + "componentName": "Step", + "props": { + "prefix": "next-", + "direction": "hoz", + "labelPlacement": "ver", + "shape": "circle", + "animation": true + }, + "children": [ + { + "componentName": "Step.Item", + "props": { + "title": "步骤1", + "icon": "smile", + "content": "内容1", + "status": "" + } + }, + { + "componentName": "Step.Item", + "props": { + "title": "步骤2", + "icon": "smile", + "content": "内容2", + "status": "" + } + }, + { + "componentName": "Step.Item", + "props": { + "title": "步骤3", + "icon": "smile", + "content": "内容3", + "status": "" + } + } + ] + } + } + ] + } + ] + }, + { + "title": "内容", + "icon": "", + "children": [ + { + "componentName": "Avatar", + "library": "Next", + "title": "头像", + "icon": "", + "snippets": [ + { + "title": "头像", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_avatar.png", + "schema": { + "componentName": "Avatar", + "props": { + "prefix": "next-", + "size": "medium", + "shape": "circle", + "icon": "smile" + } + } + } + ] + }, + { + "componentName": "Badge", + "library": "Next", + "title": "徽标数", + "icon": "", + "snippets": [ + { + "title": "徽标数", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_badge.png", + "schema": { + "componentName": "Badge", + "props": { + "prefix": "next-", + "showZero": true + } + } + } + ] + }, + { + "componentName": "Balloon.Tooltip", + "library": "Next", + "title": "文字提示", + "icon": "", + "snippets": [ + { + "title": "文字提示", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_balloon.png", + "schema": { + "componentName": "Balloon.Tooltip", + "props": { + "defaultVisible": true, + "prefix": "next-", + "size": "medium", + "type": "normal", + "closable": true, + "align": "b", + "offset": [0, 0], + "triggerType": "hover", + "autoFocus": true, + "trigger": { + "type": "JSSlot", + "props": { + "title": "触发元素" + } + }, + "children": "文字提示信息" + } + } + } + ] + }, + { + "componentName": "Calendar", + "library": "Next", + "title": "日历", + "icon": "", + "snippets": [ + { + "screenshot": "https://img.alicdn.com/tfs/TB158yMu4v1gK0jSZFFXXb0sXXa-112-64.png", + "title": "卡片型", + "schema": { + "componentName": "Calendar", + "props": { + "shape": "card" + } + } + }, + { + "screenshot": "https://img.alicdn.com/tfs/TB1PRmJu7P2gK0jSZPxXXacQpXa-112-64.png", + "title": "面板型", + "schema": { + "componentName": "Calendar", + "props": { + "shape": "panel" + } + } + }, + { + "screenshot": "https://img.alicdn.com/tfs/TB10JuKu.T1gK0jSZFhXXaAtVXa-112-64.png", + "title": "全屏型", + "schema": { + "componentName": "Calendar", + "props": { + "shape": "fullscreen" + } + } + } + ] + }, + { + "componentName": "Card", + "library": "Next", + "title": "卡片", + "icon": "", + "snippets": [ + { + "screenshot": "https://img.alicdn.com/tfs/TB1CHN3u4z1gK0jSZSgXXavwpXa-112-64.png", + "title": "普通型", + "schema": { + "componentName": "Card", + "props": { + "title": "普通型卡片" + }, + "children": [] + } + }, + { + "screenshot": "https://img.alicdn.com/tfs/TB1.Ut6u4D1gK0jSZFKXXcJrVXa-112-64.png", + "title": "自定义", + "schema": { + "componentName": "Card", + "props": { + "title": "自定义卡片", + "extra": { + "type": "JSSlot" + } + }, + "children": [] + } + } + ] + }, + { + "componentName": "CascaderSelect", + "library": "Next", + "title": "级联选择器", + "icon": "", + "snippets": [ + { + "title": "收起模式", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_cascader-select.png", + "schema": { + "componentName": "CascaderSelect", + "props": { + "prefix": "next-", + "size": "medium", + "hasArrow": true, + "hasBorder": true, + "expandTriggerType": "click", + "resultAutoWidth": true, + "notFoundContent": "Not Found", + "dataSource": [ + { + "value": "2974", + "label": "西安", + "children": [ + { + "value": "2975", + "label": "西安市" + }, + { + "value": "2976", + "label": "高陵县" + }, + { + "value": "2977", + "label": "蓝田县" + } + ] + } + ] + } + } + }, + { + "title": "展开模式", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_cascader.png", + "schema": { + "componentName": "Cascader", + "props": { + "prefix": "next-", + "expandTriggerType": "click", + "dataSource": [ + { + "value": "2974", + "label": "西安", + "children": [ + { + "value": "2975", + "label": "西安市" + }, + { + "value": "2976", + "label": "高陵县" + }, + { + "value": "2977", + "label": "蓝田县" + } + ] + } + ] + } + } + } + ] + }, + { + "componentName": "Checkbox", + "library": "Next", + "title": "复选按钮", + "icon": "", + "snippets": [ + { + "title": "复选按钮", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_menu.png", + "schema": { + "componentName": "Checkbox", + "props": { + "label": "Check Option" + } + } + }, + { + "title": "复选按钮组", + "screenshot": "https://img.alicdn.com/tfs/TB1EJN7uYY1gK0jSZTEXXXDQVXa-112-64.png", + "schema": { + "componentName": "CheckboxGroup", + "props": { + "prefix": "next-", + "dataSource": [ + { + "label": "选项一", + "value": "1" + }, + { + "label": "选项二", + "value": "2" + }, + { + "label": "选项三", + "value": "3" + } + ] + } + } + } + ] + }, + { + "componentName": "DatePicker", + "library": "Next", + "title": "日期选择框", + "icon": "", + "snippets": [ + { + "title": "日期选择框", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_date-picker.png", + "schema": { + "componentName": "DatePicker", + "props": { + "prefix": "next-", + "format": "YYYY-MM-DD", + "size": "medium", + "hasClear": false, + "popupTriggerType": "click", + "popupAlign": "tl tl", + "followTrigger": true + } + } + }, + { + "title": "日期区间", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_date-picker.png", + "schema": { + "componentName": "RangePicker", + "props": { + "prefix": "next-", + "format": "YYYY-MM-DD", + "size": "medium", + "type": "date", + "hasClear": false, + "popupTriggerType": "click", + "popupAlign": "tl tl", + "followTrigger": true + } + } + } + ] + }, + { + "componentName": "Divider", + "library": "Next", + "title": "分隔符", + "icon": "", + "snippets": [ + { + "title": "分隔线", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_divider.png", + "schema": { + "componentName": "Divider", + "props": { + "prefix": "next-", + "direction": "hoz", + "orientation": "center", + "children": "分隔符" + } + } + } + ] + }, + { + "componentName": "Form", + "library": "Next", + "title": "表单容器", + "icon": "", + "snippets": [ + { + "title": "表单容器", + "screenshot": "https://img.alicdn.com/tfs/TB1oH02u2b2gK0jSZK9XXaEgFXa-112-64.png", + "schema": { + "componentName": "Form", + "props": { + "labelCol": { + "span": 2, + "labelAlign": "left" + }, + "role": "grid" + }, + "children": [ + { + "componentName": "Form.Item", + "props": { + "label": "Email: ", + "required": true + }, + "children": [ + { + "componentName": "Input", + "props": { + "name": "email", + "size": "medium", + "placeholder": "用户名" + } + } + ] + }, + { + "componentName": "Form.Item", + "props": { + "label": "Password: ", + "required": true + }, + "children": [ + { + "componentName": "Input.Password", + "props": { + "name": "password", + "placeholder": "请输入密码", + "size": "medium" + } + } + ] + }, + { + "componentName": "Form.Item", + "props": { + "wrapperCol": { + "offset": 7 + } + }, + "children": [ + { + "componentName": "Form.Submit", + "props": { + "type": "primary", + "validate": true, + "onClick": { + "type": "JSFunction", + "value": "(v, e) => { console.log(v, e) }" + }, + "children": "Submit" + } + }, + { + "componentName": "Form.Reset", + "props": { + "style": { + "marginLeft": 10 + }, + "children": "Reset" + } + } + ] + } + ] + } + } + ] + }, + { + "componentName": "Icon", + "library": "Next", + "title": "图标", + "icon": "", + "snippets": [ + { + "title": "图标", + "screenshot": "", + "schema": { + "componentName": "Icon", + "props": { + "type": "smile" + } + } + } + ] + }, + { + "componentName": "Input", + "library": "Next", + "title": "输入框", + "icon": "", + "snippets": [ + { + "title": "输入框", + "screenshot": "https://img.alicdn.com/tfs/TB1ysp3u8v0gK0jSZKbXXbK2FXa-112-64.png", + "schema": { + "componentName": "Input", + "props": { + "hasBorder": true, + "size": "medium", + "autoComplete": "off" + } + } + }, + { + "title": "密码框", + "screenshot": "https://img.alicdn.com/tfs/TB1ikF3u7P2gK0jSZPxXXacQpXa-112-64.png", + "schema": { + "componentName": "Input.Password", + "props": { + "hasBorder": true, + "size": "medium", + "autoComplete": "off" + } + } + }, + { + "title": "TextArea", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_input.png", + "schema": { + "componentName": "Input.TextArea", + "props": { + "hasBorder": true, + "size": "medium", + "autoComplete": "off" + } + } + } + ] + }, + { + "componentName": "NextTable", + "library": "Next", + "title": "表格", + "icon": "", + "snippets": [ + { + "title": "NextTable", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png", + "schema": { + "componentName": "NextTable", + "title": "表格", + "props": { + "setEmptyContent": true, + "emptyContent": { + "type": "JSSlot", + "title": "EmptyContent", + "value": [ + { + "componentName": "Typography.Text", + "props": { + "children": "No Data" + } + } + ] + }, + "showMiniPager": true, + "showActionBar": true, + "actionBar": [ + { + "title": "新增", + "type": "primary" + }, + { + "title": "编辑" + } + ], + "columns": [ + { + "dataKey": "name", + "width": 200, + "align": "center", + "title": "姓名", + "editType": "text" + }, + { + "dataKey": "age", + "width": 200, + "align": "center", + "title": "年龄" + }, + { + "dataKey": "role", + "width": 200, + "align": "center", + "title": "职责" + } + ], + "data": [ + { + "name": "王小", + "id": "1", + "age": 15000, + "role": "开发" + }, + { + "name": "王中", + "id": "2", + "age": 25000, + "role": "产品" + }, + { + "name": "王大", + "id": "3", + "age": 35000, + "role": "设计" + } + ], + "actionTitle": "操作", + "actionWidth": 180, + "actionType": "link", + "actionFixed": "right", + "actionHidden": false, + "maxWebShownActionCount": 2, + "actionColumn": [ + { + "title": "编辑", + "callback": { + "type": "JSFunction", + "value": "(rowData, action, table) => {\n return table.editRow(rowData).then((row) => {\n console.log(row);\n });\n }" + } + }, + { + "title": "保存", + "callback": { + "type": "JSFunction", + "value": "(rowData, action, table) => { \nreturn table.saveRow(rowData).then((row) => { \nconsole.log(row); \n}); \n}" + }, + "mode": "EDIT" + } + ] + } + } + } + ] + }, + { + "componentName": "NumberPicker", + "library": "Next", + "title": "数字输入框", + "icon": "", + "snippets": [ + { + "title": "数字输入框", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_number-picker.png", + "schema": { + "componentName": "NumberPicker", + "props": { + "prefix": "next-", + "type": "normal", + "size": "medium", + "step": 1, + "editable": true + } + } + } + ] + }, + { + "componentName": "Radio", + "library": "Next", + "title": "单选框", + "icon": "", + "snippets": [ + { + "title": "单选按钮", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_radio.png", + "schema": { + "componentName": "Radio", + "props": { + "label": "选项一", + "value": "1" + } + } + }, + { + "title": "单选按钮组", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_radio.png", + "schema": { + "componentName": "Radio.Group", + "props": { + "dataSource": [ + { + "label": "选项一", + "value": "1" + }, + { + "label": "选项二", + "value": "2" + }, + { + "label": "选项三", + "value": "3" + } + ] + } + } + } + ] + }, + { + "componentName": "Range", + "library": "Next", + "title": "区段选择器", + "icon": "", + "snippets": [ + { + "title": "区段选择器", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_range.png", + "schema": { + "componentName": "Range", + "props": { + "prefix": "next-", + "slider": "single", + "max": 100, + "step": 1, + "marksPosition": "above", + "hasTip": true + } + } + } + ] + }, + { + "componentName": "Rating", + "library": "Next", + "title": "评分", + "icon": "", + "snippets": [ + { + "title": "评分", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_rating.png", + "schema": { + "componentName": "Rating", + "props": { + "prefix": "next-", + "count": 5, + "size": "medium" + } + } + } + ] + }, + { + "componentName": "Select", + "library": "Next", + "title": "选择器", + "icon": "", + "snippets": [ + { + "title": "选择器", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_select.png", + "schema": { + "componentName": "Select", + "props": { + "mode": "single", + "hasArrow": true, + "cacheValue": true, + "dataSource": [ + { + "value": "1", + "label": "选项1" + }, + { + "value": "2", + "label": "选项2" + }, + { + "value": "3", + "label": "选项3" + } + ] + } + } + } + ] + }, + { + "componentName": "Slider", + "library": "Next", + "title": "图片轮播", + "icon": "", + "snippets": [ + { + "title": "图片轮播", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_slider.png", + "schema": { + "componentName": "Slider", + "props": { + "prefix": "next-", + "animation": "slide", + "arrows": true, + "arrowSize": "medium", + "arrowPosition": "inner", + "arrowDirection": "hoz", + "autoplaySpeed": 3000, + "dots": true, + "dotsDirection": "hoz", + "draggable": true, + "infinite": true, + "slide": "div", + "slideDirection": "hoz", + "slidesToShow": 1, + "slidesToScroll": 1, + "speed": 600, + "triggerType": "click", + "centerPadding": "50px", + "cssEase": "ease", + "edgeFriction": 0.35, + "swipe": true, + "touchMove": true, + "touchThreshold": 5, + "useCSS": true, + "waitForAnimate": true + }, + "children": [ + { + "componentName": "Image", + "props": { + "src": "https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png" + } + }, + { + "componentName": "Image", + "props": { + "src": "https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg" + } + }, + { + "componentName": "Image", + "props": { + "src": "https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg" + } + }, + { + "componentName": "Image", + "props": { + "src": "https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg" + } + } + ] + } + } + ] + }, + { + "componentName": "Switch", + "library": "Next", + "title": "开关", + "icon": "", + "snippets": [ + { + "title": "开关组件", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_switch.png", + "schema": { + "componentName": "Switch", + "props": { + "prefix": "next-", + "size": "medium" + } + } + } + ] + }, + { + "componentName": "Tab", + "library": "Next", + "title": "选项卡", + "icon": "", + "snippets": [ + { + "title": "普通型", + "screenshot": "https://img.alicdn.com/tfs/TB1D0p2u.z1gK0jSZLeXXb9kVXa-112-64.png", + "schema": { + "componentName": "Tab", + "props": { + "shape": "pure", + "size": "medium", + "excessMode": "slide" + }, + "children": [ + { + "componentName": "Tab.Item", + "props": { + "title": "标签项1", + "primaryKey": "tab-item-1", + "isAutoContainer": true + } + }, + { + "componentName": "Tab.Item", + "props": { + "title": "标签项2", + "primaryKey": "tab-item-2", + "isAutoContainer": true + } + } + ] + } + }, + { + "title": "胶囊型", + "screenshot": "https://img.alicdn.com/tfs/TB1C0pZuWL7gK0jSZFBXXXZZpXa-112-64.png", + "schema": { + "componentName": "Tab", + "props": { + "shape": "capsule", + "size": "medium", + "excessMode": "slide" + }, + "children": [ + { + "componentName": "Tab.Item", + "props": { + "title": "标签项1", + "primaryKey": "tab-item-1", + "isAutoContainer": true + } + }, + { + "componentName": "Tab.Item", + "props": { + "title": "标签项2", + "primaryKey": "tab-item-2", + "isAutoContainer": true + } + } + ] + } + } + ] + }, + { + "componentName": "Tag", + "library": "Next", + "title": "标签", + "icon": "", + "snippets": [ + { + "title": "标签", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_tag.png", + "schema": { + "componentName": "Tag", + "props": { + "prefix": "next-", + "type": "normal", + "size": "medium", + "animation": false, + "children": "Tag" + } + } + }, + { + "title": "可关闭标签", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_tag.png", + "schema": { + "componentName": "Tag.Closeable", + "props": { + "prefix": "next-", + "closeArea": "tail", + "size": "medium", + "children": "Tag" + } + } + }, + { + "title": "可选中标签", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_tag.png", + "schema": { + "componentName": "Tag.Selectable", + "props": { + "prefix": "next-", + "children": "Tag" + } + } + } + ] + }, + { + "componentName": "TimePicker", + "library": "Next", + "title": "时间选择框", + "icon": "", + "snippets": [ + { + "title": "时间选择框", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_time-picker.png", + "schema": { + "componentName": "TimePicker", + "props": { + "prefix": "next-", + "size": "medium", + "hasClear": true, + "format": "HH:mm:ss", + "popupAlign": "tl tl", + "popupTriggerType": "click" + } + } + } + ] + }, + { + "componentName": "Timeline", + "library": "Next", + "title": "时间轴", + "icon": "", + "snippets": [ + { + "title": "时间轴", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_timeline.png", + "schema": { + "componentName": "Timeline", + "props": { + "prefix": "next-", + "fold": [], + "animation": true + }, + "children": [ + { + "componentName": "Timeline.Item", + "props": { + "state": "process", + "title": "12344" + } + }, + { + "componentName": "Timeline.Item", + "props": { + "title": "Ship" + } + }, + { + "componentName": "Timeline.Item", + "props": { + "title": "Order" + } + } + ] + } + } + ] + }, + { + "componentName": "Transfer", + "library": "Next", + "title": "穿梭框", + "icon": "", + "snippets": [ + { + "title": "穿梭框", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_transfer.png", + "schema": { + "componentName": "Transfer", + "props": { + "prefix": "next-", + "mode": "normal", + "notFoundContent": "Not Found" + } + } + } + ] + }, + { + "componentName": "TreeSelect", + "library": "Next", + "title": "树型选择控件", + "icon": "", + "snippets": [ + { + "title": "树型选择控件", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_tree-select.png", + "schema": { + "componentName": "TreeSelect", + "props": { + "prefix": "next-", + "size": "medium", + "hasArrow": true, + "hasBorder": true, + "autoWidth": true, + "notFoundContent": "Not Found", + "treeCheckedStrategy": "parent" + } + } + }, + { + "title": "树形控件", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_tree.png", + "schema": { + "componentName": "Tree", + "props": { + "prefix": "next-", + "selectable": true, + "checkedStrategy": "all", + "autoExpandParent": true, + "animation": true, + "focusable": true + } + } + } + ] + }, + { + "componentName": "Upload", + "library": "Next", + "title": "上传", + "icon": "", + "snippets": [ + { + "title": "上传组件", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_upload.png", + "schema": { + "componentName": "Upload", + "props": { + "prefix": "next-", + "closable": true, + "autoUpload": true + } + } + } + ] + }, + { + "componentName": "Video", + "library": "Next", + "title": "视频", + "icon": "", + "snippets": [ + { + "title": "视频", + "screenshot": "https://img.alicdn.com/imgextra/i3/O1CN01KPVpSS1FaPsvoag2F_!!6000000000503-55-tps-200-200.svg", + "schema": { + "title": "视频", + "componentName": "Video", + "props": { + "src": "https://fusion.alicdn.com/images/page-1.mp4", + "controls": true, + "style": { + "width": "600px" + } + } + } + } + ] + } + ] + }, + { + "title": "Feedback 反馈", + "icon": "", + "children": [] + }, + { + "title": "反馈", + "icon": "", + "children": [ + { + "componentName": "Message", + "library": "Next", + "title": "提示", + "icon": "", + "snippets": [ + { + "title": "提示", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_message.png", + "schema": { + "componentName": "Message", + "props": { + "title": "Alert", + "type": "warning", + "shape": "inline", + "size": "medium", + "visible": true, + "animation": true + } + } + } + ] + }, + { + "componentName": "Loading", + "library": "Next", + "title": "加载", + "icon": "", + "snippets": [ + { + "title": "加载", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_loading.png", + "schema": { + "componentName": "Loading", + "props": { + "color": "red", + "prefix": "next-", + "tipAlign": "bottom", + "visible": true, + "size": "large", + "inline": true + } + } + } + ] + }, + { + "componentName": "Progress", + "library": "Next", + "title": "进度指示器", + "icon": "", + "snippets": [ + { + "title": "进度指示器", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_progress.png", + "schema": { + "componentName": "Progress", + "props": { + "prefix": "next-", + "shape": "line", + "size": "medium", + "state": "normal", + "color": "blue", + "percent": 30 + } + } + } + ] + }, + { + "componentName": "Message", + "library": "Next", + "title": "面包片", + "icon": "", + "snippets": [ + { + "title": "面包片", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_message.png", + "schema": { + "componentName": "Message", + "props": { + "title": "Toast", + "type": "success", + "shape": "toast", + "size": "medium", + "visible": true, + "animation": true + } + } + } + ] + } + ] + }, + { + "title": "基础", + "icon": "", + "children": [] + }, + { + "title": "常用图表(试验)", + "icon": "", + "children": [ + { + "componentName": "ColumnChart", + "library": "Next", + "title": "柱状图", + "icon": "", + "snippets": [ + { + "title": "柱状图", + "componentName": "ColumnChart", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*C554SqAGfuMAAAAAAAAAAABkARQnAQ", + "schema": { + "title": "柱状图", + "componentName": "ColumnChart", + "props": { + "title": "基础柱状图", + "isMaterial": true, + "autoFit": true, + "padding": "auto", + "xField": "type", + "yField": "sales", + "meta": { + "type": { + "alias": "类别" + }, + "sales": { + "alias": "销售额(万)" + } + }, + "data": [ + { + "type": "家具家电", + "sales": 38 + }, + { + "type": "粮油副食", + "sales": 52 + }, + { + "type": "生鲜水果", + "sales": 61 + }, + { + "type": "美容洗护", + "sales": 145 + }, + { + "type": "母婴用品", + "sales": 48 + }, + { + "type": "进口食品", + "sales": 38 + }, + { + "type": "食品饮料", + "sales": 38 + }, + { + "type": "家庭清洁", + "sales": 38 + } + ] + } + } + } + ] + }, + { + "componentName": "LineChart", + "library": "Next", + "title": "折线图", + "icon": "", + "snippets": [ + { + "title": "折线图", + "componentName": "LineChart", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*YMGnQoh_jSAAAAAAAAAAAABkARQnAQ", + "schema": { + "title": "折线图", + "componentName": "LineChart", + "props": { + "title": "折线图标题", + "isMaterial": true, + "description": "折线图描述", + "xField": "year", + "yField": "value", + "renderer": "svg", + "data": [ + { + "year": "1991", + "value": 3 + }, + { + "year": "1992", + "value": 4 + }, + { + "year": "1993", + "value": 3.5 + }, + { + "year": "1994", + "value": 5 + }, + { + "year": "1995", + "value": 4.9 + }, + { + "year": "1996", + "value": 6 + }, + { + "year": "1997", + "value": 7 + }, + { + "year": "1998", + "value": 9 + }, + { + "year": "1999", + "value": 13 + } + ] + } + } + } + ] + }, + { + "componentName": "LiquidChart", + "library": "Next", + "title": "水位图", + "icon": "", + "snippets": [ + { + "title": "水位图", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*DKvMTrrWdAQAAAAAAAAAAABkARQnAQ", + "schema": { + "title": "水位图", + "category": "常用图表(试验)", + "componentName": "LiquidChart", + "props": { + "title": "水位图标题", + "description": "水位图描述", + "isMaterial": true, + "outline": { + "border": 2, + "distance": 6 + }, + "min": 0, + "max": 100, + "value": 49 + } + } + } + ] + }, + { + "componentName": "PieChart", + "library": "Next", + "title": "饼图", + "icon": "", + "snippets": [ + { + "title": "饼图", + "componentName": "PieChart", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*93XzToUe1OQAAAAAAAAAAABkARQnAQ", + "schema": { + "title": "饼图", + "componentName": "PieChart", + "props": { + "isMaterial": true, + "title": { + "visible": true, + "text": "基础饼图" + }, + "description": { + "visible": true, + "text": "基础饼图描述" + }, + "meta": { + "type": { + "alias": "类别" + }, + "sales": { + "alias": "销售额(万)" + } + }, + "angleField": "value", + "colorField": "type", + "data": [ + { + "type": "分类一", + "value": 27 + }, + { + "type": "分类二", + "value": 25 + }, + { + "type": "分类三", + "value": 18 + }, + { + "type": "分类四", + "value": 15 + }, + { + "type": "分类五", + "value": 10 + }, + { + "type": "其它", + "value": 5 + } + ] + } + } + } + ] + } + ] + }, + { + "title": "Others", + "icon": "", + "children": [] + }, + { + "title": "null", + "icon": "", + "children": [] + } + ] +} diff --git a/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion/index.ts b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion/index.ts new file mode 100644 index 0000000..798cbee --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion/index.ts @@ -0,0 +1,45 @@ +import { init, plugins } from '@alilc/lowcode-engine'; +import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler'; +import registerPlugins from './plugin'; +import { scenarioSwitcher } from '../../sample-plugins/scenario-switcher'; +import '../../universal/global.scss'; + +const preference = new Map(); +preference.set('DataSourcePane', { + importPlugins: [], + dataSourceTypes: [ + { + type: 'fetch', + }, + { + type: 'jsonp', + }, + ], +}); + +(async function main() { + await plugins.register(scenarioSwitcher); + await registerPlugins(); + + init( + document.getElementById('lce-container')!, + { + // designMode: 'live', + // locale: 'zh-CN', + enableCondition: true, + enableCanvasLock: true, + // 默认绑定变量 + supportVariableGlobally: true, + // simulatorUrl 在当 engine-core.js 同一个父路径下时是不需要配置的！！！ + // 这里因为用的是 alifd cdn，在不同 npm 包，engine-core.js 和 react-simulator-renderer.js 是不同路径 + simulatorUrl: [ + 'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/css/react-simulator-renderer.css', + 'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/js/react-simulator-renderer.js', + ], + requestHandlersMap: { + fetch: createFetchHandler(), + }, + } as any, + preference + ); +})(); diff --git a/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion/plugin.tsx b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion/plugin.tsx new file mode 100644 index 0000000..8e7103f --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion/plugin.tsx @@ -0,0 +1,272 @@ +import React from 'react'; +import { + plugins, + skeleton, + project, + setters, +} from '@alilc/lowcode-engine'; +import AliLowCodeEngineExt from '@alilc/lowcode-engine-ext'; +import { Button } from '@alifd/next'; +// import UndoRedoPlugin from '@alilc/lowcode-plugin-undo-redo'; +import ComponentsPane from '@alilc/lowcode-plugin-components-pane'; +import ZhEnPlugin from '@alilc/lowcode-plugin-zh-en'; +// import DataSourcePanePlugin from '@alilc/lowcode-plugin-datasource-pane'; +import SchemaPlugin from '@alilc/lowcode-plugin-schema'; +// import CodeEditor from '@alilc/lowcode-plugin-code-editor'; +import ManualPlugin from '@alilc/lowcode-plugin-manual'; +import Inject, { injectAssets } from '@alilc/lowcode-plugin-inject'; +import SimulatorResizer from '@alilc/lowcode-plugin-simulator-select'; + +// 注册到引擎 +import TitleSetter from '@alilc/lowcode-setter-title'; +import BehaviorSetter from '../../setters/behavior-setter'; +import CustomSetter from '../../setters/custom-setter'; +import Logo from '../../sample-plugins/logo'; + +import { + loadIncrementalAssets, + getPageSchema, + saveSchema, + resetSchema, + preview, + getProjectSchemaFromLocalStorage, +} from '../../universal/utils'; +import assets from './assets.json'; +import schema from './schema.json'; + +export default async function registerPlugins() { + await plugins.register(ManualPlugin); + + await plugins.register(Inject); + + // plugin API 见 https://yuque.antfin.com/ali-lowcode/docs/cdukce + SchemaPlugin.pluginName = 'SchemaPlugin'; + await plugins.register(SchemaPlugin); + + (SimulatorResizer as any).pluginName = 'SimulatorResizer'; + plugins.register(SimulatorResizer); + + const editorInit = (ctx: any) => { + return { + name: 'editor-init', + async init() { + // 修改面包屑组件的分隔符属性setter + // const assets = await ( + // await fetch( + // `https://alifd.alicdn.com/npm/@alilc/lowcode-materials/build/lowcode/assets-prod.json` + // ) + // ).json(); + // 设置物料描述 + const { material, project } = ctx; + + material.setAssets(await injectAssets(assets)); + + // 加载 schema + project.openDocument( + getProjectSchemaFromLocalStorage('basic-fusion') + .componentsTree?.[0] || schema + ); + }, + }; + }; + editorInit.pluginName = 'editorInit'; + await plugins.register(editorInit); + + const builtinPluginRegistry = (ctx: any) => { + return { + name: 'builtin-plugin-registry', + async init() { + const { skeleton } = ctx; + // 注册 logo 面板 + skeleton.add({ + area: 'topArea', + type: 'Widget', + name: 'logo', + content: Logo, + contentProps: { + logo: 'https://img.alicdn.com/imgextra/i4/O1CN013w2bmQ25WAIha4Hx9_!!6000000007533-55-tps-137-26.svg', + href: 'https://lowcode-engine.cn', + }, + props: { + align: 'left', + }, + }); + + // 注册组件面板 + const componentsPane = skeleton.add({ + area: 'leftArea', + type: 'PanelDock', + name: 'componentsPane', + content: ComponentsPane, + contentProps: {}, + props: { + align: 'top', + icon: 'zujianku', + description: '组件库', + }, + }); + componentsPane?.disable?.(); + project.onSimulatorRendererReady(() => { + componentsPane?.enable?.(); + }); + }, + }; + }; + builtinPluginRegistry.pluginName = 'builtinPluginRegistry'; + await plugins.register(builtinPluginRegistry); + + // 设置内置 setter 和事件绑定、插件绑定面板 + const setterRegistry = (ctx: any) => { + const { setterMap, pluginMap } = AliLowCodeEngineExt; + return { + name: 'ext-setters-registry', + async init() { + const { setters, skeleton } = ctx; + // 注册setterMap + setters.registerSetter(setterMap as any); + // 注册插件 + // 注册事件绑定面板 + skeleton.add({ + area: 'centerArea', + type: 'Widget', + content: pluginMap.EventBindDialog, + name: 'eventBindDialog', + props: {}, + }); + + // 注册变量绑定面板 + skeleton.add({ + area: 'centerArea', + type: 'Widget', + content: pluginMap.VariableBindDialog, + name: 'variableBindDialog', + props: {}, + }); + }, + }; + }; + setterRegistry.pluginName = 'setterRegistry'; + await plugins.register(setterRegistry); + + // 注册回退/前进 + // await plugins.register(UndoRedoPlugin); + + // 注册中英文切换 + await plugins.register(ZhEnPlugin); + + const loadAssetsSample = (ctx: any) => { + return { + name: 'loadAssetsSample', + async init() { + const { skeleton } = ctx; + + skeleton.add({ + name: 'loadAssetsSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + width: 80, + }, + content: ( + + ), + }); + }, + }; + }; + loadAssetsSample.pluginName = 'loadAssetsSample'; + await plugins.register(loadAssetsSample); + + // 注册保存面板 + const saveSample = (ctx: any) => { + return { + name: 'saveSample', + async init() { + const { skeleton, hotkey } = ctx; + + skeleton.add({ + name: 'saveSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + skeleton.add({ + name: 'resetSchema', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + hotkey.bind('command+s', (e) => { + e.preventDefault(); + saveSchema('basic-fusion'); + }); + }, + }; + }; + saveSample.pluginName = 'saveSample'; + await plugins.register(saveSample); + + // DataSourcePanePlugin.pluginName = 'DataSourcePane'; + // await plugins.register(DataSourcePanePlugin); + + // CodeEditor.pluginName = 'CodeEditor'; + // await plugins.register(CodeEditor); + + // 注册出码插件 + // CodeGenPlugin.pluginName = 'CodeGenPlugin'; + // await plugins.register(CodeGenPlugin); + + const previewSample = (ctx: any) => { + return { + name: 'previewSample', + async init() { + const { skeleton } = ctx; + skeleton.add({ + name: 'previewSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + }, + }; + }; + previewSample.pluginName = 'previewSample'; + await plugins.register(previewSample); + + const customSetter = (ctx: any) => { + return { + name: '___registerCustomSetter___', + async init() { + const { setters } = ctx; + + setters.registerSetter('TitleSetter', TitleSetter); + setters.registerSetter('BehaviorSetter', BehaviorSetter); + setters.registerSetter('CustomSetter', CustomSetter); + }, + }; + }; + customSetter.pluginName = 'customSetter'; + await plugins.register(customSetter); +} diff --git a/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion/schema.json b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion/schema.json new file mode 100644 index 0000000..96d6820 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion/schema.json @@ -0,0 +1,73 @@ +{ + "componentName": "Page", + "id": "node_dockcviv8fo1", + "props": { + "ref": "outerView", + "style": { + "height": "100%" + } + }, + "fileName": "/", + "dataSource": { + "list": [ + { + "type": "fetch", + "isInit": true, + "options": { + "params": {}, + "method": "GET", + "isCors": true, + "timeout": 5000, + "headers": {}, + "uri": "mock/info.json" + }, + "id": "info", + "shouldFetch": { + "type": "JSFunction", + "value": "function() { \n console.log('should fetch.....');\n return true; \n}" + } + } + ] + }, + "state": { + "text": { + "type": "JSExpression", + "value": "\"outer\"" + }, + "isShowDialog": { + "type": "JSExpression", + "value": "false" + } + }, + "css": "body {\n font-size: 12px;\n}\n\n.button {\n width: 100px;\n color: #ff00ff\n}", + "lifeCycles": { + "componentDidMount": { + "type": "JSFunction", + "value": "function componentDidMount() {\n console.log('did mount');\n}" + }, + "componentWillUnmount": { + "type": "JSFunction", + "value": "function componentWillUnmount() {\n console.log('will unmount');\n}" + } + }, + "methods": { + "testFunc": { + "type": "JSFunction", + "value": "function testFunc() {\n console.log('test func');\n}" + }, + "onClick": { + "type": "JSFunction", + "value": "function onClick() {\n this.setState({\n isShowDialog: true\n });\n}" + }, + "closeDialog": { + "type": "JSFunction", + "value": "function closeDialog() {\n this.setState({\n isShowDialog: false\n });\n}" + } + }, + "originCode": "class LowcodeComponent extends Component {\n state = {\n \"text\": \"outer\",\n \"isShowDialog\": false\n }\n componentDidMount() {\n console.log('did mount');\n }\n componentWillUnmount() {\n console.log('will unmount');\n }\n testFunc() {\n console.log('test func');\n }\n onClick() {\n this.setState({\n isShowDialog: true\n })\n }\n closeDialog() {\n this.setState({\n isShowDialog: false\n })\n }\n}", + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "" +} \ No newline at end of file diff --git a/packages/plugin-multiple-editor/src/dev-config/scenarios/custom-initialization/index.tsx b/packages/plugin-multiple-editor/src/dev-config/scenarios/custom-initialization/index.tsx new file mode 100644 index 0000000..6b16bae --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/custom-initialization/index.tsx @@ -0,0 +1,62 @@ +import { common, plugins, config } from '@alilc/lowcode-engine'; +import React, { useEffect, useState } from 'react'; +import ReactDOM from 'react-dom'; +import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler'; +import { scenarioSwitcher } from '../../sample-plugins/scenario-switcher'; +import registerPlugins from '../../universal/plugin'; +import '../../universal/global.scss'; + +const preference = new Map(); +preference.set('DataSourcePane', { + importPlugins: [], + dataSourceTypes: [ + { + type: 'fetch', + }, + { + type: 'jsonp', + }, + ], +}); + +(async function main() { + await plugins.register(scenarioSwitcher); + await registerPlugins(); + + const Workbench = common.skeletonCabin.Workbench; + function EditorView() { + /** 插件是否已初始化成功，因为必须要等插件初始化后才能渲染 Workbench */ + const [hasPluginInited, setHasPluginInited] = useState(false); + + useEffect(() => { + plugins + .init(preference) + .then(() => { + setHasPluginInited(true); + }) + .catch((err) => console.error(err)); + }, []); + + return hasPluginInited && ; + } + + config.setConfig({ + // designMode: 'live', + // locale: 'zh-CN', + enableCondition: true, + enableCanvasLock: true, + // 默认绑定变量 + supportVariableGlobally: true, + // simulatorUrl 在当 engine-core.js 同一个父路径下时是不需要配置的！！！ + // 这里因为用的是 alifd cdn，在不同 npm 包，engine-core.js 和 react-simulator-renderer.js 是不同路径 + simulatorUrl: [ + 'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/css/react-simulator-renderer.css', + 'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/js/react-simulator-renderer.js', + ], + requestHandlersMap: { + fetch: createFetchHandler(), + }, + }); + // @ts-ignore + ReactDOM.render(, document.getElementById('lce-container')!); +})(); diff --git a/packages/plugin-multiple-editor/src/dev-config/scenarios/index/index.ts b/packages/plugin-multiple-editor/src/dev-config/scenarios/index/index.ts new file mode 100644 index 0000000..bf465a4 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/index/index.ts @@ -0,0 +1,45 @@ +import { init, plugins } from '@alilc/lowcode-engine'; +import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler'; +import registerPlugins from '../../universal/plugin'; +import { scenarioSwitcher } from '../../sample-plugins/scenario-switcher'; +import '../../universal/global.scss'; + +const preference = new Map(); +preference.set('DataSourcePane', { + importPlugins: [], + dataSourceTypes: [ + { + type: 'fetch', + }, + { + type: 'jsonp', + }, + ], +}); + +(async function main() { + await plugins.register(scenarioSwitcher); + await registerPlugins(); + + init( + document.getElementById('lce-container')!, + { + // designMode: 'live', + // locale: 'zh-CN', + enableCondition: true, + enableCanvasLock: true, + // 默认绑定变量 + supportVariableGlobally: true, + // simulatorUrl 在当 engine-core.js 同一个父路径下时是不需要配置的！！！ + // 这里因为用的是 alifd cdn，在不同 npm 包，engine-core.js 和 react-simulator-renderer.js 是不同路径 + simulatorUrl: [ + 'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/css/react-simulator-renderer.css', + 'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/js/react-simulator-renderer.js', + ], + requestHandlersMap: { + fetch: createFetchHandler(), + }, + } as any, + preference + ); +})(); diff --git a/packages/plugin-multiple-editor/src/dev-config/scenarios/next-pro/assets.json b/packages/plugin-multiple-editor/src/dev-config/scenarios/next-pro/assets.json new file mode 100644 index 0000000..6b08b64 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/next-pro/assets.json @@ -0,0 +1,82 @@ +{ + "packages": [ + { + "package": "moment", + "version": "2.24.0", + "urls": ["https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"], + "library": "moment" + }, + { + "package": "lodash", + "library": "_", + "urls": ["https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js"] + }, + { + "title": "fusion组件库", + "package": "@alifd/next", + "version": "1.24.18", + "urls": [ + "https://g.alicdn.com/code/lib/alifd__next/1.24.18/next.min.css", + "https://g.alicdn.com/code/lib/alifd__next/1.24.18/next-with-locales.min.js" + ], + "library": "Next" + }, + { + "package": "@dogtiti/next-pro-lowcode-materials", + "version": "0.2.1", + "library": "NextProLowcodeMaterials", + "urls": [ + "https://unpkg.com/@dogtiti/next-pro-lowcode-materials@0.2.1/build/lowcode/render/default/view.js", + "https://unpkg.com/@dogtiti/next-pro-lowcode-materials@0.2.1/build/lowcode/render/default/view.css" + ], + "editUrls": [ + "https://unpkg.com/@dogtiti/next-pro-lowcode-materials@0.2.1/build/lowcode/view.js", + "https://unpkg.com/@dogtiti/next-pro-lowcode-materials@0.2.1/build/lowcode/view.css" + ], + "advancedUrls": { + "default": [ + "https://unpkg.com/@dogtiti/next-pro-lowcode-materials@0.2.1/build/lowcode/render/default/view.js", + "https://unpkg.com/@dogtiti/next-pro-lowcode-materials@0.2.1/build/lowcode/render/default/view.css" + ] + }, + "advancedEditUrls": {} + } + ], + "components": [ + { + "exportName": "DogtitiNextProLowcodeMaterialsMeta", + "npm": { + "package": "@dogtiti/next-pro-lowcode-materials", + "version": "0.2.1" + }, + "url": "https://unpkg.com/@dogtiti/next-pro-lowcode-materials@0.2.1/build/lowcode/meta.js", + "urls": { + "default": "https://unpkg.com/@dogtiti/next-pro-lowcode-materials@0.2.1/build/lowcode/meta.js" + }, + "advancedUrls": { + "default": [ + "https://unpkg.com/@dogtiti/next-pro-lowcode-materials@0.2.1/build/lowcode/meta.js" + ] + } + } + ], + "sort": { + "groupList": ["精选组件", "原子组件"], + "categoryList": [ + "基础元素", + "布局容器类", + "表格类", + "表单详情类", + "帮助类", + "对话框类", + "业务类", + "通用", + "引导", + "信息输入", + "信息展示", + "信息反馈" + ] + }, + "groupList": ["精选组件", "原子组件"], + "ignoreComponents": {} +} diff --git a/packages/plugin-multiple-editor/src/dev-config/scenarios/next-pro/index.ts b/packages/plugin-multiple-editor/src/dev-config/scenarios/next-pro/index.ts new file mode 100644 index 0000000..7e4aee9 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/next-pro/index.ts @@ -0,0 +1,41 @@ +import { init, plugins } from '@alilc/lowcode-engine'; +import registerPlugins from './plugin'; +import { scenarioSwitcher } from '../../sample-plugins/scenario-switcher'; +import '../../universal/global.scss'; + +const preference = new Map(); +preference.set('DataSourcePane', { + importPlugins: [], + dataSourceTypes: [ + { + type: 'fetch', + }, + { + type: 'jsonp', + }, + ], +}); + +(async function main() { + await plugins.register(scenarioSwitcher); + await registerPlugins(); + + init( + document.getElementById('lce-container')!, + { + // designMode: 'live', + // locale: 'zh-CN', + enableCondition: true, + enableCanvasLock: true, + // 默认绑定变量 + supportVariableGlobally: true, + // simulatorUrl 在当 engine-core.js 同一个父路径下时是不需要配置的！！！ + // 这里因为用的是 alifd cdn，在不同 npm 包，engine-core.js 和 react-simulator-renderer.js 是不同路径 + simulatorUrl: [ + 'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/css/react-simulator-renderer.css', + 'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/js/react-simulator-renderer.js', + ], + }, + preference, + ); +})(); diff --git a/packages/plugin-multiple-editor/src/dev-config/scenarios/next-pro/plugin.tsx b/packages/plugin-multiple-editor/src/dev-config/scenarios/next-pro/plugin.tsx new file mode 100644 index 0000000..ab2d80c --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/next-pro/plugin.tsx @@ -0,0 +1,270 @@ +import React from 'react'; +import { + plugins, + skeleton, + project, + setters, +} from '@alilc/lowcode-engine'; +import AliLowCodeEngineExt from '@alilc/lowcode-engine-ext'; +import { Button } from '@alifd/next'; +// import UndoRedoPlugin from '@alilc/lowcode-plugin-undo-redo'; +import ComponentsPane from '@alilc/lowcode-plugin-components-pane'; +import ZhEnPlugin from '@alilc/lowcode-plugin-zh-en'; +// import DataSourcePanePlugin from '@alilc/lowcode-plugin-datasource-pane'; +import SchemaPlugin from '@alilc/lowcode-plugin-schema'; +// import CodeEditor from '@alilc/lowcode-plugin-code-editor'; +import ManualPlugin from '@alilc/lowcode-plugin-manual'; +import Inject, { injectAssets } from '@alilc/lowcode-plugin-inject'; +import SimulatorResizer from '@alilc/lowcode-plugin-simulator-select'; + +// 注册到引擎 +import TitleSetter from '@alilc/lowcode-setter-title'; +import BehaviorSetter from '../../setters/behavior-setter'; +import CustomSetter from '../../setters/custom-setter'; +import Logo from '../../sample-plugins/logo'; +import { registerRefProp } from '../../sample-plugins/set-ref-prop'; +import { deleteHiddenTransducer } from '../../sample-plugins/delete-hidden-transducer'; + +import { + loadIncrementalAssets, + getPageSchema, + saveSchema, + resetSchema, + preview, + getProjectSchemaFromLocalStorage, +} from '../../universal/utils'; +import assets from './assets.json'; +import schema from './schema.json'; + +export default async function registerPlugins() { + await plugins.register(ManualPlugin); + + await plugins.register(Inject); + + await plugins.register(registerRefProp); + + await plugins.register(deleteHiddenTransducer); + + // plugin API 见 https://yuque.antfin.com/ali-lowcode/docs/cdukce + SchemaPlugin.pluginName = 'SchemaPlugin'; + await plugins.register(SchemaPlugin); + + (SimulatorResizer as any).pluginName = 'SimulatorResizer'; + plugins.register(SimulatorResizer); + + const editorInit = (ctx: any) => { + return { + name: 'editor-init', + async init() { + // 修改面包屑组件的分隔符属性setter + // const assets = await ( + // await fetch( + // `https://alifd.alicdn.com/npm/@alilc/lowcode-materials/build/lowcode/assets-prod.json` + // ) + // ).json(); + // 设置物料描述 + const { material, project } = ctx; + + material.setAssets(await injectAssets(assets)); + + // 加载 schema + project.openDocument( + getProjectSchemaFromLocalStorage('next-pro').componentsTree?.[0] || + schema + ); + }, + }; + }; + editorInit.pluginName = 'editorInit'; + await plugins.register(editorInit); + + const builtinPluginRegistry = (ctx: any) => { + return { + name: 'builtin-plugin-registry', + async init() { + const { skeleton } = ctx; + // 注册 logo 面板 + skeleton.add({ + area: 'topArea', + type: 'Widget', + name: 'logo', + content: Logo, + contentProps: { + logo: 'https://img.alicdn.com/imgextra/i4/O1CN013w2bmQ25WAIha4Hx9_!!6000000007533-55-tps-137-26.svg', + href: 'https://lowcode-engine.cn', + }, + props: { + align: 'left', + }, + }); + + // 注册组件面板 + const componentsPane = skeleton.add({ + area: 'leftArea', + type: 'PanelDock', + name: 'componentsPane', + content: ComponentsPane, + contentProps: {}, + props: { + align: 'top', + icon: 'zujianku', + description: '组件库', + }, + }); + componentsPane?.disable?.(); + project.onSimulatorRendererReady(() => { + componentsPane?.enable?.(); + }); + }, + }; + }; + builtinPluginRegistry.pluginName = 'builtinPluginRegistry'; + await plugins.register(builtinPluginRegistry); + + // 设置内置 setter 和事件绑定、插件绑定面板 + const setterRegistry = (ctx: any) => { + const { setterMap, pluginMap } = AliLowCodeEngineExt; + return { + name: 'ext-setters-registry', + async init() { + const { setters, skeleton } = ctx; + // 注册setterMap + setters.registerSetter(setterMap as any); + // 注册插件 + // 注册事件绑定面板 + skeleton.add({ + area: 'centerArea', + type: 'Widget', + content: pluginMap.EventBindDialog, + name: 'eventBindDialog', + props: {}, + }); + + // 注册变量绑定面板 + skeleton.add({ + area: 'centerArea', + type: 'Widget', + content: pluginMap.VariableBindDialog, + name: 'variableBindDialog', + props: {}, + }); + }, + }; + }; + setterRegistry.pluginName = 'setterRegistry'; + await plugins.register(setterRegistry); + + // 注册回退/前进 + // await plugins.register(UndoRedoPlugin); + + // 注册中英文切换 + await plugins.register(ZhEnPlugin); + + const loadAssetsSample = (ctx: any) => { + return { + name: 'loadAssetsSample', + async init() { + const { skeleton } = ctx; + + skeleton.add({ + name: 'loadAssetsSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + width: 80, + }, + content: ( + + ), + }); + }, + }; + }; + loadAssetsSample.pluginName = 'loadAssetsSample'; + await plugins.register(loadAssetsSample); + + // 注册保存面板 + const saveSample = (ctx: any) => { + return { + name: 'saveSample', + async init() { + const { skeleton, hotkey } = ctx; + + skeleton.add({ + name: 'saveSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + skeleton.add({ + name: 'resetSchema', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + hotkey.bind('command+s', (e) => { + e.preventDefault(); + saveSchema('next-pro'); + }); + }, + }; + }; + saveSample.pluginName = 'saveSample'; + await plugins.register(saveSample); + + // DataSourcePanePlugin.pluginName = 'DataSourcePane'; + // await plugins.register(DataSourcePanePlugin); + + // CodeEditor.pluginName = 'CodeEditor'; + // await plugins.register(CodeEditor); + + const previewSample = (ctx: any) => { + return { + name: 'previewSample', + async init() { + const { skeleton } = ctx; + skeleton.add({ + name: 'previewSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + }, + }; + }; + previewSample.pluginName = 'previewSample'; + await plugins.register(previewSample); + + const customSetter = (ctx: any) => { + return { + name: '___registerCustomSetter___', + async init() { + const { setters } = ctx; + + setters.registerSetter('TitleSetter', TitleSetter); + setters.registerSetter('BehaviorSetter', BehaviorSetter); + setters.registerSetter('CustomSetter', CustomSetter); + }, + }; + }; + customSetter.pluginName = 'customSetter'; + await plugins.register(customSetter); +} diff --git a/packages/plugin-multiple-editor/src/dev-config/scenarios/next-pro/schema.json b/packages/plugin-multiple-editor/src/dev-config/scenarios/next-pro/schema.json new file mode 100644 index 0000000..08bc692 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/next-pro/schema.json @@ -0,0 +1,69 @@ +{ + "componentName": "Page", + "id": "node_dockcviv8fo1", + "props": { + "ref": "outerView", + "style": { + "height": "100%" + } + }, + "fileName": "/", + "dataSource": { + "list": [ + { + "type": "fetch", + "isInit": true, + "options": { + "params": {}, + "method": "GET", + "isCors": true, + "timeout": 5000, + "headers": {}, + "uri": "mock/info.json" + }, + "id": "info" + } + ] + }, + "state": { + "text": { + "type": "JSExpression", + "value": "\"outer\"" + }, + "isShowDialog": { + "type": "JSExpression", + "value": "false" + } + }, + "css": "body {\n font-size: 12px;\n}\n\n.button {\n width: 100px;\n color: #ff00ff\n}", + "lifeCycles": { + "componentDidMount": { + "type": "JSFunction", + "value": "function componentDidMount() {\n console.log('did mount');\n}" + }, + "componentWillUnmount": { + "type": "JSFunction", + "value": "function componentWillUnmount() {\n console.log('will unmount');\n}" + } + }, + "methods": { + "testFunc": { + "type": "JSFunction", + "value": "function testFunc() {\n console.log('test func');\n}" + }, + "onClick": { + "type": "JSFunction", + "value": "function onClick() {\n this.setState({\n isShowDialog: true\n });\n}" + }, + "closeDialog": { + "type": "JSFunction", + "value": "function closeDialog() {\n this.setState({\n isShowDialog: false\n });\n}" + } + }, + "originCode": "class LowcodeComponent extends Component {\n state = {\n \"text\": \"outer\",\n \"isShowDialog\": false\n }\n componentDidMount() {\n console.log('did mount');\n }\n componentWillUnmount() {\n console.log('will unmount');\n }\n testFunc() {\n console.log('test func');\n }\n onClick() {\n this.setState({\n isShowDialog: true\n })\n }\n closeDialog() {\n this.setState({\n isShowDialog: false\n })\n }\n}", + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "" +} \ No newline at end of file diff --git a/packages/plugin-multiple-editor/src/dev-config/scenarios/node-extended-actions/assets.json b/packages/plugin-multiple-editor/src/dev-config/scenarios/node-extended-actions/assets.json new file mode 100644 index 0000000..b5791a8 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/node-extended-actions/assets.json @@ -0,0 +1,23601 @@ +{ + "version": "1.1.13", + "packages": [ + { + "package": "moment", + "version": "2.24.0", + "urls": ["https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"], + "library": "moment" + }, + { + "package": "lodash", + "urls": ["https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js"], + "library": "lodash" + }, + { + "title": "fusion组件库", + "package": "@alifd/next", + "version": "1.23.0", + "urls": [ + "https://g.alicdn.com/code/lib/alifd__next/1.23.18/next.min.css", + "https://g.alicdn.com/code/lib/alifd__next/1.23.18/next-with-locales.min.js" + ], + "library": "Next" + }, + { + "title": "NextTable", + "package": "NextTable", + "version": "1.0.1", + "urls": [ + "https://g.alicdn.com/fusion-platform/pro-table/1.0.1/next-table.js", + "https://g.alicdn.com/fusion-platform/pro-table/1.0.1/next-table.css" + ], + "library": "NextTable" + }, + { + "title": "AliLowCodeComponents", + "package": "@alifd/ali-lowcode-components", + "version": "latest", + "urls": [ + "https://gw.alipayobjects.com/os/lib/alifd/ali-lowcode-components/0.1.4/dist/ali-lowcode-components.js", + "https://gw.alipayobjects.com/os/lib/alifd/ali-lowcode-components/0.1.4/dist/ali-lowcode-components.css" + ], + "library": "AliLowCodeComponents" + }, + { + "title": "BizCharts", + "package": "bizcharts", + "version": "4.1.11", + "urls": ["https://g.alicdn.com/code/lib/bizcharts/4.1.11/BizCharts.min.js"], + "library": "BizCharts" + }, + { + "title": "Container", + "package": "@alife/container", + "version": "0.3.7", + "urls": [ + "https://g.alicdn.com/fusion-design/auto-layout/0.3.7/dist/container.css", + "https://g.alicdn.com/fusion-design/auto-layout/0.3.7/dist/container.js" + ], + "library": "Container" + } + ], + "components": [ + { + "componentName": "Link", + "title": "链接", + "npm": { + "package": "@alifd/ali-lowcode-components", + "version": "latest", + "exportName": "Link", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "href", + "title": { + "label": { + "type": "i18n", + "zh_CN": "超链接", + "en_US": "Link" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性：href | 说明：超链接地址", + "en_US": "prop: href | description: link address" + } + }, + "propType": "string", + "defaultValue": "https://fusion.design" + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "链接文案", + "en_US": "Text" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性：children | 说明：超链接文案", + "en_US": "prop: children | description: text of the link" + } + }, + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "defaultValue": "这是一个超链接" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "target", + "title": { + "label": { + "type": "i18n", + "zh_CN": "页面目标", + "en_US": "Target" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性：target | 说明：跳转页面目标", + "en_US": "prop: target | description: target of new page" + } + }, + "propType": { + "type": "oneOf", + "value": ["_blank", "_self"] + } + } + ], + "configure": { + "supports": { + "style": true, + "events": ["onClick"] + }, + "component": { + "isContainer": true + }, + "props": [ + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "链接文案", + "en_US": "Text" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性：children | 说明：超链接文案", + "en_US": "prop: children | description: text of the link" + } + }, + "setter": "StringSetter", + "defaultValue": "这是一个超链接" + }, + { + "name": "linkType", + "title": "跳转类型", + "condition": { + "type": "JSFunction", + "value": "condition(target) {\n const _pages_ = target.getProps().getPropValue(\"_pages_\");\n console.log('_pages_: ', _pages_);\n return !!_pages_;\n }" + }, + "defaultValue": "page", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "value": "page", + "title": "内部页面" + }, + { + "value": "link", + "title": "外部链接" + } + ] + } + } + }, + { + "name": "_redirect_url", + "title": "跳转页面", + "extraProps": { + "getValue": { + "type": "JSFunction", + "value": "(target, value) => {\n return target.getProps().getPropValue('href');\n }" + }, + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n return target.getProps().setPropValue('href', value);\n }" + } + }, + "setter": { + "type": "JSFunction", + "value": "(target) => {\n const data = ((target.getProps().getPropValue('_pages_') || {}).content || []).map(item => {\n return {\n title: item.title.zh_CN,\n value: `#/${item.relateUuid}`,\n };\n });\n return {\n componentName: 'SelectSetter',\n props: {\n options: data\n },\n };\n }" + }, + "condition": { + "type": "JSFunction", + "value": "condition(target) {\n return target.getProps().getPropValue(\"linkType\") === 'page';\n }" + } + }, + { + "name": "href", + "title": { + "label": { + "type": "i18n", + "zh_CN": "跳转链接", + "en_US": "Link" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性：href | 说明：超链接地址", + "en_US": "prop: href | description: link address" + } + }, + "setter": "StringSetter", + "condition": { + "type": "JSFunction", + "value": "condition(target) {\n return target.getProps().getPropValue(\"linkType\") === 'link';\n }" + } + }, + { + "name": "target", + "title": { + "label": { + "type": "i18n", + "zh_CN": "页面目标", + "en_US": "Target" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性：target | 说明：跳转页面目标", + "en_US": "prop: target | description: target of new page" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "value": "_self", + "title": "当前页面" + }, + { + "value": "_blank", + "title": "新开页面" + } + ] + } + } + }, + { + "name": "_pages_", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + } + ] + }, + "experimental": { + "initials": [ + { + "name": "linkType", + "initial": { + "type": "JSFunction", + "value": "() => 'link'" + } + }, + { + "name": "_pages_", + "initial": { + "type": "JSFunction", + "value": "(target) => {\n let url = `/uipass/query/formnav/getFormNavigationListByOrder.json${window.location.search}`\n if (['localhost', '127.0.0.1', 'a7343369-3834-4e55-9f69-e071f489f979-3333.cloud-ide-router.alibaba-inc.com'].includes(window.location.hostname)) {\n url = 'mock-pages.json';\n }\n (AliLowCodeEngine || VisualEngine).editor.utils.get(url)\n .then((response) => {\n target.getProps().setPropValue('_pages_', response);\n });\n }" + } + } + ], + "filters": [], + "autoruns": [] + }, + "icon": "", + "category": "常用" + }, + { + "componentName": "Message", + "title": "提示", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Message", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "title", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标题", + "en_US": "Title" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: title | 说明: 标题", + "en_US": "prop: title | description: Title" + } + }, + "propType": "string", + "description": "标题", + "defaultValue": "标题" + }, + { + "name": "type", + "title": { + "label": { + "type": "i18n", + "zh_CN": "类型", + "en_US": "Type" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: type | 说明: 反馈类型", + "en_US": "prop: type | description: message type" + } + }, + "propType": { + "type": "oneOf", + "value": ["success", "warning", "error", "notice", "help", "loading"] + }, + "description": "反馈类型", + "defaultValue": "success" + }, + { + "name": "shape", + "title": { + "label": { + "type": "i18n", + "zh_CN": "形状", + "en_US": "Shape" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: shape | 说明: 外观", + "en_US": "prop: shape | description: message shape" + } + }, + "propType": { + "type": "oneOf", + "value": ["inline", "addon", "toast"] + }, + "description": "外观", + "defaultValue": "inline" + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 尺寸", + "en_US": "prop: size | description: message size" + } + }, + "propType": { + "type": "oneOf", + "value": ["medium", "large"] + }, + "description": "尺寸", + "defaultValue": "medium" + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文本", + "en_US": "Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: children | 说明: 文本内容", + "en_US": "prop: children | description: message content" + } + }, + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "description": "内容" + }, + { + "name": "visible", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否显示", + "en_US": "Visible" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: visible | 说明: 当前是否显示", + "en_US": "prop: visible | description: visible" + } + }, + "propType": "bool", + "description": "当前是否显示" + }, + { + "name": "iconType", + "propType": "string", + "description": "显示的图标类型，会覆盖内部设置的IconType" + }, + { + "name": "closeable", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示 Close", + "en_US": "Show Close" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: closeable | 说明: 显示关闭按钮", + "en_US": "prop: closeable | description: show close button" + } + }, + "propType": "bool", + "description": "显示关闭按钮", + "defaultValue": false + }, + { + "name": "onClose", + "propType": "func", + "description": "关闭按钮的回调" + }, + { + "name": "afterClose", + "propType": "func", + "description": "关闭之后调用的函数" + }, + { + "name": "animation", + "title": { + "label": { + "type": "i18n", + "zh_CN": "开启动效", + "en_US": "Animation" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: animation | 说明: 是否开启动效", + "en_US": "prop: animation | description: enable animation" + } + }, + "propType": "bool", + "description": "收起动画", + "defaultValue": true + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "iconType", + "title": { + "label": { + "type": "i18n", + "zh_CN": "图标", + "en_US": "Icon" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: iconType | 说明: 显示的图标类型", + "en_US": "prop: iconType | description: icon type" + } + }, + "setter": { + "componentName": "IconSetter" + } + } + ] + } + }, + "icon": "", + "category": "反馈" + }, + { + "componentName": "Avatar", + "title": "头像", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Avatar", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文本内容", + "en_US": "Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: children | 说明: 文本内容", + "en_US": "prop: children | description: avatar content" + } + }, + "propType": "string" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "头像尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 头像的大小", + "en_US": "prop: size | description: avatar size" + } + }, + "propType": { + "type": "oneOfType", + "value": [ + { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "number" + ] + }, + "description": "头像的大小", + "defaultValue": "medium" + }, + { + "name": "shape", + "title": { + "label": { + "type": "i18n", + "zh_CN": "头像形状", + "en_US": "Shape" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: shape | 说明: 头像的形状", + "en_US": "prop: shape | description: avatar shape" + } + }, + "propType": { + "type": "oneOf", + "value": ["circle", "square"] + }, + "description": "头像的形状", + "defaultValue": "circle" + }, + { + "name": "icon", + "title": "icon", + "propType": "string", + "description": "icon 类头像的图标类型，可设为 Icon 的 `type` 或 `ReactNode`" + }, + { + "name": "src", + "title": { + "label": { + "type": "i18n", + "zh_CN": "头像地址", + "en_US": "Src" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: src | 说明: 图片类头像的资源地址", + "en_US": "prop: src | description: resource address" + } + }, + "propType": "string", + "description": "图片类头像的资源地址" + }, + { + "name": "onError", + "propType": "func", + "description": "图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "icon", + "title": { + "label": { + "type": "i18n", + "zh_CN": "图标", + "en_US": "Icon" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: icon | 说明: 图标类型", + "en_US": "prop: icon | description: icon type" + } + }, + "setter": { + "componentName": "IconSetter" + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Badge", + "title": "徽标数", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Badge", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "count", + "title": "count", + "propType": "string", + "description": "展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为 0 时默认隐藏", + "defaultValue": 0 + }, + { + "name": "content", + "title": "内容", + "propType": "node", + "description": "自定义节点内容" + }, + { + "name": "overflowCount", + "title": "封顶数字", + "propType": { + "type": "oneOfType", + "value": ["number", "string"] + }, + "description": "展示的封顶的数字", + "defaultValue": 99 + }, + { + "name": "showZero", + "title": { + "label": "展示零", + "tip": "showZero|当count为 0 时，是否显示 count" + }, + "propType": "bool", + "description": "当count为 0 时，是否显示 count", + "defaultValue": true + }, + { + "name": "dot", + "title": { + "label": "红点", + "tip": "dot|不展示数字，只展示一个小红点" + }, + "propType": "bool", + "description": "不展示数字，只展示一个小红点", + "defaultValue": false + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "count", + "title": { + "label": "展示的数字", + "tip": "count|大于 overflowCount 时显示为 ${overflowCount}+，为 0 时默认隐藏", + "docUrl": "https://fusion.alibaba-inc.com/pc/component/basic/badge" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "BalloonInner", + "title": "BalloonInner", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Balloon", + "main": "", + "destructuring": true, + "subName": "Inner" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "closable", + "propType": "bool", + "defaultValue": true + }, + { + "name": "children", + "propType": "any" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "alignEdge", + "propType": "bool", + "defaultValue": false + }, + { + "name": "onClose", + "propType": "func" + }, + { + "name": "style", + "propType": "any" + }, + { + "name": "align", + "propType": "string", + "defaultValue": "b" + }, + { + "name": "type", + "propType": "string", + "defaultValue": "normal" + }, + { + "name": "isTooltip", + "propType": "bool" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "pure", + "propType": "bool", + "defaultValue": false + } + ], + "configure": { + "component": { + "isContainer": true + } + }, + "category": "基础" + }, + { + "componentName": "Balloon.Tooltip", + "title": "文字提示", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Balloon", + "main": "", + "destructuring": true, + "subName": "Tooltip" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "pure", + "propType": "bool", + "defaultValue": false + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "children", + "title": "提示文案", + "propType": "string" + }, + { + "name": "type", + "propType": { + "type": "oneOf", + "value": ["normal", "primary"] + }, + "description": "样式类型", + "defaultValue": "normal" + }, + { + "name": "triggerType", + "title": "触发行为", + "propType": { + "type": "oneOf", + "value": ["hover", "click"] + }, + "description": "触发行为\n鼠标悬浮, 鼠标点击('hover','click')或者它们组成的数组，如 ['hover', 'click'], 强烈不建议使用'focus'，若弹窗内容有复杂交互请使用click", + "defaultValue": "hover" + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层当前显示的状态" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层在显示和隐藏触发的事件\n@param {Boolean} visible 弹层是否隐藏和显示\n@param {String} type 触发弹层显示或隐藏的来源， closeClick 表示由自带的关闭按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "align", + "title": "弹出位置", + "propType": { + "type": "oneOf", + "value": ["t", "r", "b", "l", "tl", "tr", "bl", "br", "lt", "lb", "rt", "rb"] + }, + "description": "弹出层位置\n@enumdesc 上, 右, 下, 左, 上左, 上右, 下左, 下右, 左上, 左下, 右上, 右下 及其 两两组合", + "defaultValue": "b" + }, + { + "name": "offset", + "propType": { + "type": "arrayOf", + "value": "number" + }, + "description": "弹层相对于trigger的定位的微调, 接收数组[hoz, ver], 表示弹层在 left / top 上的增量\ne.g. [100, 100] 表示往右(RTL 模式下是往左) 、下分布偏移100px", + "defaultValue": [0, 0] + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + }, + { + "name": "delay", + "title": "延迟显示", + "propType": "number", + "description": "弹层在触发以后的延时显示, 单位毫秒 ms" + }, + { + "name": "trigger", + "propType": "node", + "description": "触发元素" + }, + { + "name": "onClick", + "propType": "func" + }, + { + "name": "onClose", + "propType": "func", + "description": "任何visible为false时会触发的事件" + }, + { + "name": "onHover", + "propType": "func" + }, + { + "name": "defaultVisible", + "title": "默认显示", + "propType": "bool", + "description": "弹层默认显示的状态", + "defaultValue": false + }, + { + "name": "alignEdge", + "title": "边缘对齐", + "propType": "bool", + "description": "弹出层对齐方式, 是否为边缘对齐", + "defaultValue": false + }, + { + "name": "closable", + "title": "关闭按钮", + "propType": "bool", + "description": "是否显示关闭按钮", + "defaultValue": true + }, + { + "name": "needAdjust", + "title": "自动调整", + "propType": "bool", + "description": "是否进行自动位置调整", + "defaultValue": false + }, + { + "name": "afterClose", + "propType": "func", + "description": "浮层关闭后触发的事件, 如果有动画，则在动画结束后触发" + }, + { + "name": "shouldUpdatePosition", + "propType": "bool", + "description": "强制更新定位信息" + }, + { + "name": "autoFocus", + "title": "自动聚焦", + "propType": "bool", + "description": "弹层出现后是否自动focus到内部第一个元素", + "defaultValue": true + }, + { + "name": "followTrigger", + "title": "跟随滚动", + "propType": "bool", + "description": "是否跟随滚动" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "rtl", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "pure", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "visible", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "offset", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "shouldUpdatePosition", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupContainer", + "title": { + "docUrl": "https://fusion.alibaba-inc.com/pc/component/basic/balloon#demo-api", + "label": "弹层容器", + "tip": "指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数()。" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "FunctionSetter"] + } + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Balloon", + "title": "气泡框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Balloon", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "pure", + "propType": "bool", + "defaultValue": false + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "type", + "propType": { + "type": "oneOf", + "value": ["normal", "primary"] + }, + "description": "样式类型", + "defaultValue": "normal" + }, + { + "name": "triggerType", + "title": "触发行为", + "propType": { + "type": "oneOf", + "value": ["hover", "click"] + }, + "description": "触发行为\n鼠标悬浮, 鼠标点击('hover','click')或者它们组成的数组，如 ['hover', 'click'], 强烈不建议使用'focus'，若弹窗内容有复杂交互请使用click", + "defaultValue": "hover" + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层当前显示的状态" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层在显示和隐藏触发的事件\n@param {Boolean} visible 弹层是否隐藏和显示\n@param {String} type 触发弹层显示或隐藏的来源， closeClick 表示由自带的关闭按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "align", + "title": "弹出位置", + "propType": { + "type": "oneOf", + "value": ["t", "r", "b", "l", "tl", "tr", "bl", "br", "lt", "lb", "rt", "rb"] + }, + "description": "弹出层位置\n@enumdesc 上, 右, 下, 左, 上左, 上右, 下左, 下右, 左上, 左下, 右上, 右下 及其 两两组合", + "defaultValue": "b" + }, + { + "name": "offset", + "propType": { + "type": "arrayOf", + "value": "number" + }, + "description": "弹层相对于trigger的定位的微调, 接收数组[hoz, ver], 表示弹层在 left / top 上的增量\ne.g. [100, 100] 表示往右(RTL 模式下是往左) 、下分布偏移100px", + "defaultValue": [0, 0] + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + }, + { + "name": "delay", + "title": "延迟显示", + "propType": "number", + "description": "弹层在触发以后的延时显示, 单位毫秒 ms" + }, + { + "name": "trigger", + "propType": "node", + "description": "触发元素" + }, + { + "name": "onClick", + "propType": "func" + }, + { + "name": "onClose", + "propType": "func", + "description": "任何visible为false时会触发的事件" + }, + { + "name": "onHover", + "propType": "func" + }, + { + "name": "defaultVisible", + "title": "默认显示", + "propType": "bool", + "description": "弹层默认显示的状态", + "defaultValue": false + }, + { + "name": "alignEdge", + "title": "边缘对齐", + "propType": "bool", + "description": "弹出层对齐方式, 是否为边缘对齐", + "defaultValue": false + }, + { + "name": "closable", + "title": "关闭按钮", + "propType": "bool", + "description": "是否显示关闭按钮", + "defaultValue": true + }, + { + "name": "needAdjust", + "title": "自动调整", + "propType": "bool", + "description": "是否进行自动位置调整", + "defaultValue": false + }, + { + "name": "afterClose", + "propType": "func", + "description": "浮层关闭后触发的事件, 如果有动画，则在动画结束后触发" + }, + { + "name": "shouldUpdatePosition", + "propType": "bool", + "description": "强制更新定位信息" + }, + { + "name": "autoFocus", + "title": "自动聚焦", + "propType": "bool", + "description": "弹层出现后是否自动focus到内部第一个元素", + "defaultValue": true + }, + { + "name": "followTrigger", + "title": "跟随滚动", + "propType": "bool", + "description": "是否跟随滚动" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "rtl", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "pure", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "visible", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "offset", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "shouldUpdatePosition", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupContainer", + "title": { + "docUrl": "https://fusion.alibaba-inc.com/pc/component/basic/balloon#demo-api", + "label": "弹层容器", + "tip": "指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数()。" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "FunctionSetter"] + } + } + } + ] + } + }, + "icon": "", + "category": "容器" + }, + { + "componentName": "Box", + "title": "容器", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Box", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "direction", + "title": { + "label": "布局方向", + "tip": "布局方向，默认为 column ，一个元素占据一整行，默认为column" + }, + "propType": { + "type": "oneOf", + "value": ["row", "column"] + }, + "defaultValue": "column" + }, + { + "name": "wrap", + "title": "是否折行", + "propType": "bool", + "description": "是否折行", + "defaultValue": false + }, + { + "name": "justify", + "title": { + "label": "沿主轴排布关系", + "tip": "justify | 沿着主轴方向，子元素们的排布关系 （兼容性同 justify-content ）" + }, + "propType": { + "type": "oneOf", + "value": ["flex-start", "center", "flex-end", "space-between", "space-around"] + } + }, + { + "name": "align", + "title": { + "label": "垂直主轴排布关系", + "tip": "align | 垂直主轴方向，子元素们的排布关系 （兼容性同 align-items ）" + }, + "propType": { + "type": "oneOf", + "value": ["flex-start", "center", "flex-end", "baseline", "stretch"] + } + }, + { + "name": "spacing", + "title": { + "label": "元素间距", + "tip": "元素之间的间距 [bottom&top, right&left]" + }, + "propType": { + "type": "oneOfType", + "value": [ + "number", + { + "type": "arrayOf", + "value": "number" + } + ] + } + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "id", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + } + ] + } + }, + "icon": "", + "category": "容器" + }, + { + "componentName": "Breadcrumb.Item", + "title": "面包屑 Item", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Breadcrumb", + "main": "", + "destructuring": true, + "subName": "Item" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "children", + "description": "内容", + "propType": "string" + }, + { + "name": "link", + "propType": "string", + "description": "面包屑节点链接，如果设置这个属性，则该节点为`` ，否则是``" + }, + { + "name": "activated", + "propType": "bool" + }, + { + "name": "separator", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "className", + "propType": "any" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": [ + { + "name": "children", + "title": "文本内容", + "setter": "StringSetter" + } + ] + }, + "icon": "", + "category": "导航" + }, + { + "componentName": "Breadcrumb", + "title": "面包屑", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Breadcrumb", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "description": "样式类名的品牌前缀", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "面包屑子节点，需传入 Breadcrumb.Item" + }, + { + "name": "maxNode", + "propType": { + "type": "oneOfType", + "value": [ + "number", + { + "type": "oneOf", + "value": ["auto"] + } + ] + }, + "description": "面包屑最多显示个数，超出部分会被隐藏, 设置为 auto 会自动根据父元素的宽度适配。", + "defaultValue": 100 + }, + { + "name": "separator", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "分隔符，可以是文本或 Icon" + }, + { + "name": "component", + "propType": { + "type": "oneOfType", + "value": ["string", "func"] + }, + "description": "设置标签类型", + "defaultValue": "nav" + }, + { + "name": "className", + "propType": "any" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "childWhitelist": ["Breadcrumb.Item"] + } + }, + "props": [ + { + "name": "maxNode", + "title": { + "label": "最大节点数", + "tip": "默认 100" + }, + "setter": "NumberSetter" + }, + { + "name": "separator", + "title": "分隔符", + "setter": "StringSetter" + }, + { + "name": "Breadcrumb.Item", + "title": "面包屑项", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "primaryKey", + "title": "面包屑项编号", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "initialValue": { + "type": "JSFunction", + "value": "val => {\n if (val) return val;\n return String(Math.floor(Math.random() * 10000));\n }" + }, + "setter": "StringSetter" + }, + { + "name": "children", + "title": "标题", + "initialValue": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "setter": "StringSetter" + }, + { + "name": "link", + "title": "链接", + "initialValue": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "setter": "StringSetter" + }, + { + "name": "target", + "title": "打开方式", + "initialValue": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "_self", + "props": { + "options": [ + { + "title": "新开页面", + "value": "_blank" + }, + { + "title": "当前页面", + "value": "_self" + } + ] + } + } + } + ] + } + }, + "initialValue": { + "type": "JSFunction", + "value": "() => {\n return {\n primaryKey: String(Math.floor(Math.random() * 10000)),\n children: \"Title\",\n target: \"_self\"\n };\n }" + } + } + } + }, + "extraProps": { + "virtual": { + "type": "JSFunction", + "value": "() => true" + }, + "getValue": { + "type": "JSFunction", + "value": "(target, value) => {\n console.log(\"getValue: \", target, value);\n return target.getNode().children.map(child => {\n return {\n primaryKey: String(child.getPropValue(\"primaryKey\")),\n children: child.getPropValue(\"children\"),\n link: child.getPropValue(\"link\"),\n target: child.getPropValue(\"target\")\n };\n });\n }" + }, + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n console.log(\"setValue: \", target, value);\n const node = target.getNode();\n const map = {};\n if (!Array.isArray(value)) {\n value = [];\n }\n value.forEach(item => {\n const BreadcrumbItem = Object.assign({}, item);\n map[item.primaryKey] = BreadcrumbItem;\n });\n node.mergeChildren(\n child => {\n const primaryKey = String(child.getPropValue(\"primaryKey\"));\n console.log(child.id + \"----\" + primaryKey);\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n child.setPropValue(\"children\", map[primaryKey].children);\n child.setPropValue(\"link\", map[primaryKey].link);\n child.setPropValue(\"target\", map[primaryKey].target);\n delete map[primaryKey];\n return false;\n }\n return true;\n },\n () => {\n const items = [];\n for (const primaryKey in map) {\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n items.push({\n componentName: \"Breadcrumb.Item\",\n props: map[primaryKey]\n });\n }\n }\n console.log(\"adder: \", items);\n return items;\n },\n (child1, child2) => {\n const a = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child1.getPropValue(\"primaryKey\"))\n );\n const b = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child2.getPropValue(\"primaryKey\"))\n );\n console.log(\"a: \", a);\n console.log(\"b: \", b);\n return a - b;\n }\n );\n }" + }, + "onChange": { + "type": "JSFunction", + "value": "() => {\n console.log(\"onChange: \", arguments);\n }" + } + } + } + ], + "supports": { + "style": true + } + }, + "icon": "", + "category": "导航" + }, + { + "componentName": "Button.Group", + "title": "按钮组", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Button", + "main": "", + "destructuring": true, + "subName": "Group" + }, + "props": [ + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "size", + "propType": "string", + "description": "统一设置 Button 组件的按钮大小", + "defaultValue": "medium" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "childWhitelist": ["Button"] + } + }, + "props": [ + { + "name": "size", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "统一设置子按钮的尺寸", + "en_US": "Button Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 统一设置子按钮的尺寸", + "en_US": "prop: size | description: button size" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "defaultValue": "medium" + } + ] + }, + "icon": "", + "category": "常用" + }, + { + "componentName": "Button", + "title": "按钮", + "icon": "https://img.alicdn.com/tfs/TB1rT0gPQL0gK0jSZFAXXcA9pXa-200-200.svg", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Button", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "children", + "title": "内容", + "propType": "string" + }, + { + "name": "icon", + "propType": "string", + "description": "自定义内联样式" + }, + { + "name": "type", + "title": { + "label": { + "type": "i18n", + "zh_CN": "按钮类型", + "en_US": "Button Type" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: type | 说明: 按钮类型", + "en_US": "prop: type | description: button type" + } + }, + "propType": { + "type": "oneOf", + "value": ["primary", "secondary", "normal"] + }, + "description": "按钮的类型", + "defaultValue": "normal" + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "按钮尺寸", + "en_US": "Button Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 按钮尺寸", + "en_US": "prop: size | description: button size" + } + }, + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "按钮的尺寸", + "defaultValue": "medium" + }, + { + "name": "iconSize", + "title": { + "label": { + "type": "i18n", + "zh_CN": "图标尺寸", + "en_US": "Icon Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: iconSize | 说明: 图标尺寸", + "en_US": "prop: iconSize | description: icon size" + } + }, + "propType": { + "type": "oneOf", + "value": ["xxs", "xs", "small", "medium", "large", "xl", "xxl", "xxxl"] + }, + "defaultValue": "small", + "description": "按钮中 Icon 的尺寸，用于替代 Icon 的默认大小" + }, + { + "name": "ghost", + "title": { + "type": "i18n", + "zh_CN": "幽灵按钮", + "en_US": "ghost" + }, + "propType": { + "type": "oneOf", + "value": [true, false, "light", "dark"] + }, + "description": "是否为幽灵按钮", + "defaultValue": false + }, + { + "name": "loading", + "title": "loading", + "propType": "bool", + "description": "设置按钮的载入状态", + "defaultValue": false + }, + { + "name": "text", + "title": { + "type": "i18n", + "zh_CN": "文本按钮", + "en_US": "text" + }, + "propType": "bool", + "description": "是否为文本按钮", + "defaultValue": false + }, + { + "name": "warning", + "title": "warning", + "propType": "bool", + "description": "是否为警告按钮", + "defaultValue": false + }, + { + "name": "disabled", + "title": { + "type": "i18n", + "zh_CN": "禁用", + "en_US": "disabled" + }, + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "onClick", + "title": "onClick", + "propType": "func", + "description": "点击按钮的回调\n@param {Object} e Event Object" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "onMouseUp", + "propType": "func" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "icon", + "title": { + "label": { + "type": "i18n", + "zh_CN": "图标", + "en_US": "Icon" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: icon | 说明: 图标类型", + "en_US": "prop: icon | description: icon type" + } + }, + "setter": "IconSetter", + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n target.nodes[0].children.import(value && {\"componentName\": \"Icon\", \"props\": {\"type\": value, \"style\": {\"marginRight\": 5}}}, true);\n }" + } + }, + { + "name": "ghost", + "title": { + "type": "i18n", + "zh_CN": "幽灵按钮", + "en_US": "ghost" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "True", + "value": true + }, + { + "title": "False", + "value": false + }, + { + "title": "Light", + "value": "light" + }, + { + "title": "Dark", + "value": "dark" + } + ] + } + }, + "description": "是否为幽灵按钮", + "defaultValue": false + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "按钮内容", + "en_US": "Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: children | 说明: 按钮文本", + "en_US": "prop: children | description: button content" + } + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + } + } + ] + } + }, + "category": "常用" + }, + { + "componentName": "Calendar", + "title": "日历", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Calendar", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "defaultValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "默认选中的日期（moment 对象）" + }, + { + "name": "value", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "选中的日期值 (moment 对象)" + }, + { + "name": "modes", + "propType": { + "type": "instanceOf", + "value": "array" + } + }, + { + "name": "disableChangeMode", + "propType": "bool", + "defaultValue": false + }, + { + "name": "format", + "propType": "string", + "defaultValue": "YYYY-MM-DD" + }, + { + "name": "showOtherMonth", + "propType": "bool", + "description": "是否展示非本月的日期", + "defaultValue": true + }, + { + "name": "defaultVisibleMonth", + "propType": "func", + "description": "默认展示的月份" + }, + { + "name": "shape", + "propType": { + "type": "oneOf", + "value": ["card", "fullscreen", "panel"] + }, + "description": "展现形态", + "defaultValue": "fullscreen" + }, + { + "name": "onSelect", + "propType": "func", + "description": "选择日期单元格时的回调\n@param {Object} value 对应的日期值 (moment 对象)" + }, + { + "name": "onModeChange", + "propType": "func", + "description": "面板模式变化时的回调\n@param {String} mode 对应面板模式 date month year" + }, + { + "name": "onVisibleMonthChange", + "propType": "func", + "description": "展现的月份变化时的回调\n@param {Object} value 显示的月份 (moment 对象)\n@param {String} reason 触发月份改变原因" + }, + { + "name": "className", + "propType": "string", + "description": "自定义样式类" + }, + { + "name": "dateCellRender", + "propType": "func", + "description": "自定义日期渲染函数\n@param {Object} value 日期值（moment对象）\n@returns {ReactNode}" + }, + { + "name": "monthCellRender", + "propType": "func", + "description": "自定义月份渲染函数\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@returns {ReactNode}" + }, + { + "name": "yearCellRender", + "propType": "func" + }, + { + "name": "disabledDate", + "propType": "func", + "description": "不可选择的日期\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\n@returns {Boolean}" + }, + { + "name": "locale", + "propType": "object", + "description": "国际化配置" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": [ + { + "name": "shape", + "title": "展现形态", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["card", "fullscreen", "panel"] + } + } + }, + { + "name": "showOtherMonth", + "display": "block", + "title": "展示非本月日期", + "setter": { + "componentName": "BoolSetter" + } + } + ] + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "CardActions", + "title": "CardActions", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Card", + "main": "", + "destructuring": true, + "subName": "Actions" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "component", + "propType": { + "type": "instanceOf", + "value": "elementType" + }, + "description": "设置标签类型", + "defaultValue": "div" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "CardBulletHeader", + "title": "CardBulletHeader", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Card", + "main": "", + "destructuring": true, + "subName": "BulletHeader" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "title", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "卡片的标题" + }, + { + "name": "subTitle", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "卡片的副标题" + }, + { + "name": "showTitleBullet", + "propType": "bool", + "description": "是否显示标题的项目符号", + "defaultValue": true + }, + { + "name": "extra", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "标题区域的用户自定义内容" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "CardCollaspeContent", + "title": "CardCollaspeContent", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Card", + "main": "", + "destructuring": true, + "subName": "CollaspeContent" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "contentHeight", + "propType": { + "type": "oneOfType", + "value": ["string", "number"] + }, + "description": "内容区域的固定高度", + "defaultValue": 120 + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "CardContent", + "title": "CardContent", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Card", + "main": "", + "destructuring": true, + "subName": "Content" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "component", + "propType": { + "type": "instanceOf", + "value": "elementType" + }, + "description": "设置标签类型", + "defaultValue": "div" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "CardDivider", + "title": "CardDivider", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Card", + "main": "", + "destructuring": true, + "subName": "Divider" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "component", + "propType": { + "type": "instanceOf", + "value": "elementType" + }, + "description": "设置标签类型", + "defaultValue": "hr" + }, + { + "name": "inset", + "propType": "bool", + "description": "分割线是否向内缩进" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "CardHeader", + "title": "CardHeader", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Card", + "main": "", + "destructuring": true, + "subName": "Header" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "title", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "卡片的标题" + }, + { + "name": "subTitle", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "卡片的副标题" + }, + { + "name": "extra", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "标题区域的用户自定义内容" + }, + { + "name": "component", + "propType": { + "type": "instanceOf", + "value": "elementType" + }, + "description": "设置标签类型", + "defaultValue": "div" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "CardMedia", + "title": "CardMedia", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Card", + "main": "", + "destructuring": true, + "subName": "Media" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "component", + "propType": { + "type": "instanceOf", + "value": "elementType" + }, + "description": "设置标签类型", + "defaultValue": "div" + }, + { + "name": "image", + "propType": "string", + "description": "背景图片地址" + }, + { + "name": "src", + "propType": "string", + "description": "媒体源文件地址" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "className", + "propType": "string" + } + ], + "category": "基础" + }, + { + "componentName": "Card", + "title": "卡片", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Card", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "showTitleBullet", + "title": "标题符号", + "propType": "bool", + "description": "标题的项目符号", + "defaultValue": true + }, + { + "name": "showHeadDivider", + "title": "分割线", + "propType": "bool", + "description": "头部分隔线", + "defaultValue": true + }, + { + "name": "title", + "propType": { + "type": "oneOfType", + "value": ["node", "string"] + }, + "description": "标题" + }, + { + "name": "subTitle", + "propType": { + "type": "oneOfType", + "value": ["node", "string"] + }, + "description": "副标题" + }, + { + "name": "extra", + "title": { + "label": "自定义内容", + "tip": "标题栏用户自定义内容" + }, + "propType": { + "type": "oneOfType", + "value": ["node", "string"] + }, + "description": "标题栏用户自定义内容" + }, + { + "name": "contentHeight", + "title": "内容高度", + "propType": { + "type": "oneOfType", + "value": ["string", "number"] + }, + "description": "内容区域的固定高度", + "defaultValue": 120 + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "rtl", + "propType": "bool", + "description": "文本方向是从右向左" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "id", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "rtl", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + } + ] + } + }, + "icon": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_card.png", + "category": "内容" + }, + { + "componentName": "CascaderSelect", + "title": "级联选择器", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "CascaderSelect", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "label", + "title": { + "label": "label", + "tip": "自定义内联 label" + }, + "propType": "string", + "description": "自定义内联 label" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "大小", + "defaultValue": "medium" + }, + { + "name": "placeholder", + "propType": "string", + "description": "占位符" + }, + { + "name": "dataSource", + "propType": { + "type": "arrayOf", + "value": "object" + } + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "hasArrow", + "propType": "bool", + "description": "下拉箭头", + "defaultValue": true + }, + { + "name": "hasBorder", + "propType": "bool", + "description": "边框", + "defaultValue": true + }, + { + "name": "hasClear", + "propType": "bool", + "description": "清除按钮", + "defaultValue": false + }, + { + "name": "notFoundContent", + "title": { + "label": "无数据时显示内容", + "tip": "notFoundContent" + }, + "propType": { + "type": "oneOfType", + "value": ["node", "string"] + }, + "description": "无数据时显示内容", + "defaultValue": "Not Found" + }, + { + "name": "loadData", + "propType": "func", + "description": "异步加载数据函数\n@param {Object} data 当前点击异步加载的数据" + }, + { + "name": "header", + "propType": "node", + "description": "自定义下拉框头部" + }, + { + "name": "footer", + "propType": "node", + "description": "自定义下拉框底部" + }, + { + "name": "defaultVisible", + "title": { + "label": "初始下拉框是否显示", + "tip": "defaultVisible" + }, + "propType": "bool", + "description": "初始下拉框是否显示", + "defaultValue": false + }, + { + "name": "visible", + "title": { + "label": "当前下拉框是否显示", + "tip": "visible" + }, + "propType": "bool", + "description": "当前下拉框是否显示" + }, + { + "name": "readOnly", + "propType": "bool", + "description": "是否只读" + }, + { + "name": "onChange", + "propType": "func", + "description": "选中值改变时触发的回调函数\n@param {String|Array} value 选中的值，单选时返回单个值，多选时返回数组\n@param {Object|Array} data 选中的数据，包括 value 和 label，单选时返回单个值，多选时返回数组，父子节点选中关联时，同时选中，只返回父节点\n@param {Object} extra 额外参数\n@param {Array} extra.selectedPath 单选时选中的数据的路径\n@param {Boolean} extra.checked 多选时当前的操作是选中还是取消选中\n@param {Object} extra.currentData 多选时当前操作的数据\n@param {Array} extra.checkedData 多选时所有被选中的数据\n@param {Array} extra.indeterminateData 多选时半选的数据" + }, + { + "name": "expandTriggerType", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "展开触发方式", + "defaultValue": "click" + }, + { + "name": "onExpand", + "propType": "func" + }, + { + "name": "useVirtual", + "propType": "bool", + "description": "虚拟滚动", + "defaultValue": false + }, + { + "name": "multiple", + "propType": "bool", + "description": "是否多选", + "defaultValue": false + }, + { + "name": "changeOnSelect", + "title": { + "label": "选中即改变", + "tip": "changeOnSelect|是否选中即发生改变, 该属性仅在单选模式下有效" + }, + "propType": "bool", + "description": "是否选中即发生改变, 该属性仅在单选模式下有效", + "defaultValue": false + }, + { + "name": "canOnlyCheckLeaf", + "title": { + "label": "canOnlyCheckLeaf", + "tip": "是否只能勾选叶子项的checkbox，该属性仅在多选模式下有效" + }, + "propType": "bool", + "description": "是否只能勾选叶子项的checkbox，该属性仅在多选模式下有效", + "defaultValue": false + }, + { + "name": "checkStrictly", + "title": { + "label": "checkStrictly", + "tip": "父子节点是否选中不关联" + }, + "propType": "bool", + "description": "父子节点是否选中不关联", + "defaultValue": false + }, + { + "name": "listStyle", + "propType": "object", + "description": "每列列表样式对象" + }, + { + "name": "resultAutoWidth", + "title": { + "label": "resultAutoWidth", + "tip": "搜索结果列表是否和选择框等宽" + }, + "propType": "bool", + "description": "搜索结果列表是否和选择框等宽", + "defaultValue": true + }, + { + "name": "showSearch", + "propType": "bool", + "description": "搜索框", + "defaultValue": false + }, + { + "name": "filter", + "propType": "func", + "description": "自定义搜索函数\n@param {String} searchValue 搜索的关键字\n@param {Array} path 节点路径\n@return {Boolean} 是否匹配\n@default 根据路径所有节点的文本值模糊匹配" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "下拉框显示或关闭时触发事件的回调函数\n@param {Boolean} visible 是否显示\n@param {String} type 触发显示关闭的操作类型, fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "popupStyle", + "propType": "object", + "description": "下拉框自定义样式对象" + }, + { + "name": "popupProps", + "propType": "object", + "description": "透传到 Popup 的属性对象" + }, + { + "name": "followTrigger", + "title": { + "label": "是否跟随滚动", + "tip": "followTrigger" + }, + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "isPreview", + "title": { + "label": "是否为预览态", + "tip": "isPreview" + }, + "propType": "bool", + "description": "是否为预览态" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + } + ], + "configure": { + "supports": { + "style": true, + "events": [ + { + "name": "onChange", + "templete": "templeteTest(e,${extParams}){this.setState({isShowDialog: false})}" + }, + { + "name": "onExpand" + }, + { + "name": "onVisibleChange" + } + ] + }, + "props": [ + { + "name": "label", + "title": { + "label": "内联文案", + "tip": "自定义内联 label" + }, + "setter": "StringSetter" + }, + { + "name": "size", + "title": "尺寸", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "defaultValue": "medium" + }, + { + "name": "placeholder", + "title": "占位提示", + "setter": "StringSetter" + }, + { + "name": "dataSource", + "title": "级联数据", + "setter": "JsonSetter" + }, + { + "name": "disabled", + "setter": "BoolSetter", + "title": "是否禁用", + "defaultValue": false + }, + { + "name": "hasArrow", + "setter": "BoolSetter", + "title": "下拉箭头", + "defaultValue": true + }, + { + "name": "hasBorder", + "setter": "BoolSetter", + "title": "边框", + "defaultValue": true + }, + { + "name": "hasClear", + "setter": "BoolSetter", + "title": "清除按钮", + "defaultValue": false + }, + { + "name": "readOnly", + "setter": "BoolSetter", + "title": "是否只读" + }, + { + "name": "multiple", + "setter": "BoolSetter", + "title": "是否多选", + "defaultValue": false + }, + { + "name": "showSearch", + "setter": "BoolSetter", + "title": "搜索框", + "defaultValue": false + }, + { + "name": "followTrigger", + "title": { + "label": "跟随滚动", + "tip": "followTrigger" + }, + "setter": "BoolSetter", + "description": "是否跟随滚动" + }, + { + "name": "isPreview", + "title": { + "label": "预览态", + "tip": "isPreview" + }, + "setter": "BoolSetter", + "description": "是否为预览态" + }, + { + "name": "expandTriggerType", + "display": "block", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["click", "hover"] + } + }, + "title": "展开触发方式", + "defaultValue": "click" + }, + { + "name": "notFoundContent", + "display": "block", + "title": { + "label": "无数据时显示内容", + "tip": "notFoundContent" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "SlotSetter"] + } + }, + "defaultValue": "Not Found" + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ] + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Cascader", + "title": "级联", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Cascader", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "onChange", + "propType": "func", + "description": "选中值改变时触发的回调函数\n@param {String|Array} value 选中的值，单选时返回单个值，多选时返回数组\n@param {Object|Array} data 选中的数据，包括 value 和 label，单选时返回单个值，多选时返回数组，父子节点选中关联时，同时选中，只返回父节点\n@param {Object} extra 额外参数\n@param {Array} extra.selectedPath 单选时选中的数据的路径\n@param {Boolean} extra.checked 多选时当前的操作是选中还是取消选中\n@param {Object} extra.currentData 多选时当前操作的数据\n@param {Array} extra.checkedData 多选时所有被选中的数据\n@param {Array} extra.indeterminateData 多选时半选的数据" + }, + { + "name": "onSelect", + "propType": "func" + }, + { + "name": "dataSource", + "propType": "array" + }, + { + "name": "expandTriggerType", + "title": { + "label": "触发方式", + "tip": "expandTriggerType | 展开触发的方式" + }, + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "展开触发的方式", + "defaultValue": "click" + }, + { + "name": "onExpand", + "propType": "func", + "description": "展开时触发的回调函数\n@param {Array} expandedValue 各列展开值的数组" + }, + { + "name": "useVirtual", + "title": { + "label": "虚拟滚动", + "tip": "useVirtual | 是否开启虚拟滚动" + }, + "propType": "bool", + "description": "是否开启虚拟滚动", + "defaultValue": false + }, + { + "name": "multiple", + "propType": "bool", + "description": "是否多选", + "defaultValue": false + }, + { + "name": "canOnlySelectLeaf", + "title": { + "label": "单选时是否只能选中叶子节点", + "tip": "canOnlySelectLeaf" + }, + "propType": "bool", + "description": "单选时是否只能选中叶子节点", + "defaultValue": false + }, + { + "name": "canOnlyCheckLeaf", + "title": { + "label": "多选时是否只能选中叶子节点", + "tip": "canOnlyCheckLeaf" + }, + "propType": "bool", + "description": "多选时是否只能选中叶子节点", + "defaultValue": false + }, + { + "name": "checkStrictly", + "title": { + "tip": "checkStrictly", + "label": "父子节点是否选中不关联" + }, + "propType": "bool", + "description": "父子节点是否选中不关联", + "defaultValue": false + }, + { + "name": "listStyle", + "propType": "object", + "description": "每列列表样式对象" + }, + { + "name": "loadData", + "title": { + "label": "loadData", + "tip": "异步加载数据函数\n@param {Object} data 当前点击异步加载的数据\n@param {Object} source 当前点击数据，source是原始对象" + }, + "propType": "func", + "description": "异步加载数据函数\n@param {Object} data 当前点击异步加载的数据\n@param {Object} source 当前点击数据，source是原始对象" + }, + { + "name": "onBlur", + "propType": "func" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "rtl", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "loadData", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "listStyle", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "dataSource", + "title": "级联数据", + "setter": "JsonSetter" + }, + { + "name": "canOnlySelectLeaf", + "display": "block", + "title": { + "label": "单选时是否只能选中叶子节点", + "tip": "canOnlySelectLeaf" + }, + "setter": "BoolSetter", + "defaultValue": false + }, + { + "name": "canOnlyCheckLeaf", + "display": "block", + "title": { + "label": "多选时是否只能选中叶子节点", + "tip": "canOnlyCheckLeaf" + }, + "setter": "BoolSetter", + "defaultValue": false + }, + { + "name": "checkStrictly", + "display": "block", + "title": { + "tip": "checkStrictly", + "label": "父子节点是否选中不关联" + }, + "setter": "BoolSetter", + "defaultValue": false + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "CheckboxGroup", + "title": "复选按钮组", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Checkbox", + "main": "", + "destructuring": true, + "subName": "Group" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "disabled", + "propType": "bool", + "description": "整体禁用" + }, + { + "name": "value", + "propType": { + "type": "oneOfType", + "value": [ + { + "type": "instanceOf", + "value": "array" + }, + "string", + "number" + ] + }, + "description": "被选中的值列表" + }, + { + "name": "defaultValue", + "propType": { + "type": "oneOfType", + "value": [ + { + "type": "instanceOf", + "value": "array" + }, + "string", + "number" + ] + }, + "description": "默认被选中的值列表" + }, + { + "name": "onChange", + "propType": "func", + "description": "选中值改变时的事件\n@param {Array} value 选中项列表\n@param {Event} e Dom 事件对象" + }, + { + "name": "itemDirection", + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "子项目的排列方式\n- hoz: 水平排列 (default)\n- ver: 垂直排列", + "defaultValue": "hoz" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态", + "defaultValue": false + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {number} value 评分值" + } + ], + "configure": { + "props": [ + { + "name": "disabled", + "title": "是否禁用", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + } + }, + { + "name": "itemDirection", + "title": "排列方式", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "水平排列", + "value": "hoz" + }, + { + "title": "垂直排列", + "value": "ver" + } + ] + } + }, + "defaultValue": "hoz" + }, + { + "name": "isPreview", + "title": "预览态", + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "defaultValue", + "title": "默认值", + "defaultValue": "[]", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["JsonSetter", "ExpressionSetter"] + } + } + }, + { + "name": "dataSource", + "display": "block", + "title": "选项", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "label", + "title": "label", + "setter": "StringSetter" + }, + { + "name": "value", + "title": "value", + "setter": "StringSetter" + } + ] + } + }, + "initialValue": { + "label": "选项一", + "value": "1" + } + } + } + }, + "ExpressionSetter" + ] + } + } + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ], + "supports": { + "style": true, + "events": ["onChange"] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "CheckboxItem", + "title": "复选框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Menu", + "main": "", + "destructuring": true, + "subName": "CheckboxItem" + }, + "props": [ + { + "name": "checked", + "propType": "bool", + "description": "是否选中", + "defaultValue": false + }, + { + "name": "indeterminate", + "propType": "bool", + "description": "是否半选中", + "defaultValue": false + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "onChange", + "propType": "func", + "description": "选中或取消选中触发的回调函数\n@param {Boolean} checked 是否选中\n@param {Object} event 选中事件对象" + }, + { + "name": "helper", + "propType": "node", + "description": "帮助文本" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["Menu", "SubMenu", "Menu.Group", "MenuButton"] + } + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Checkbox", + "title": "复选按钮", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Checkbox", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "id", + "propType": "string", + "description": "ID" + }, + { + "name": "name", + "propType": "string", + "description": "name" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "checked", + "propType": "bool", + "description": "选中状态" + }, + { + "name": "defaultChecked", + "propType": "bool", + "description": "默认选中状态", + "defaultValue": false + }, + { + "name": "disabled", + "propType": "bool", + "description": "禁用" + }, + { + "name": "label", + "propType": "string", + "description": "label" + }, + { + "name": "indeterminate", + "propType": "bool", + "description": "中间状态" + }, + { + "name": "defaultIndeterminate", + "propType": "bool", + "description": "默认中间态", + "defaultValue": false + }, + { + "name": "value", + "propType": { + "type": "oneOfType", + "value": ["string"] + }, + "description": "value" + } + ], + "configure": { + "props": [ + { + "name": "label", + "title": "标题", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + } + }, + { + "name": "value", + "title": "Value", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + } + }, + { + "name": "indeterminate", + "title": "半选状态", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + } + }, + { + "name": "disabled", + "title": "是否禁用", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + } + }, + { + "name": "controlChecked", + "display": "block", + "title": { + "label": "外部控制选中", + "tip": "外部控制选中后，选中状态需要开发者自己根据 onChange 回传的值重新设置给组件才能生效" + }, + "setter": "BoolSetter" + }, + { + "name": "checked", + "title": "选中状态", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + }, + "condition": { + "type": "JSFunction", + "value": "condition(target) {\n return target.getProps().getPropValue(\"controlChecked\") || false;\n }" + } + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ], + "supports": { + "style": true, + "events": ["onChange", "onMouseEnter", "onMouseLeave"] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Collapse.Panel", + "title": "折叠面板Panel", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Collapse", + "main": "", + "destructuring": true, + "subName": "Panel" + }, + "props": [ + { + "name": "children", + "propType": "any" + }, + { + "name": "style", + "propType": "object", + "description": "子组件接受行内样式" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁止用户操作" + }, + { + "name": "title", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "标题" + } + ], + "configure": { + "component": { + "nestingRule": { + "parentWhitelist": ["Collapse"] + } + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Collapse", + "title": "折叠面板", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Collapse", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "dataSource", + "propType": "array", + "description": "使用数据模型构建" + }, + { + "name": "defaultExpandedKeys", + "propType": { + "type": "arrayOf", + "value": "string" + }, + "description": "默认展开keys" + }, + { + "name": "expandedKeys", + "propType": { + "type": "arrayOf", + "value": "string" + }, + "description": "受控展开keys" + }, + { + "name": "onExpand", + "propType": "func", + "description": "展开状态发升变化时候的回调" + }, + { + "name": "disabled", + "propType": "bool", + "description": "所有禁用" + }, + { + "name": "className", + "propType": "string", + "description": "扩展class" + }, + { + "name": "style", + "propType": "object", + "description": "组件接受行内样式" + }, + { + "name": "accordion", + "propType": "bool", + "description": "手风琴模式，一次只能打开一个", + "defaultValue": false + }, + { + "name": "rtl", + "propType": "bool" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "dataSource", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["JsonSetter", "ExpressionSetter"] + } + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "title": "柱状图", + "category": "常用图表(试验)", + "componentName": "ColumnChart", + "icon": "https://unpkg.alibaba-inc.com/@ali/vc-bizcharts@1.1.4/src/vc-column/logo.svg", + "npm": { + "package": "bizcharts", + "version": "4.1.11-beta.2", + "exportName": "ColumnChart", + "main": "", + "destructuring": true, + "subName": "" + }, + "configure": { + "props": [ + { + "name": "titleConfig", + "title": "标题配置", + "display": "block", + "type": "group", + "items": [ + { + "name": "title.text", + "title": "标题", + "setter": "StringSetter" + }, + { + "name": "title.visible", + "title": "是否展示", + "setter": "BoolSetter" + } + ] + }, + { + "name": "xFieldConfig", + "title": "横坐标", + "type": "group", + "display": "block", + "items": [ + { + "name": "xField", + "title": "横坐标标识", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "year", + "tip": "标题文本", + "supportVariable": true + }, + { + "name": "xFieldAlias", + "title": "横坐标别名", + "display": "inline", + "setter": "StringSetter", + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n target\n .getProps()\n .setPropValue(\n `meta.${target.getProps().getPropValue(\"xField\")}.alias`,\n value\n );\n }" + } + } + ] + }, + { + "name": "yFieldConfig", + "title": "纵坐标", + "type": "group", + "display": "block", + "items": [ + { + "name": "yField", + "title": "纵坐标标识", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "year", + "tip": "标题文本", + "supportVariable": true + }, + { + "name": "yFieldAlias", + "title": "纵坐标别名", + "display": "inline", + "setter": "StringSetter", + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n target\n .getProps()\n .setPropValue(\n `meta.${target.getProps().getPropValue(\"yField\")}.alias`,\n value\n );\n }" + } + } + ] + }, + { + "name": "data", + "title": "图表数据", + "tip": "配置图表数据", + "setter": "JsonSetter" + } + ], + "supports": { + "style": true + } + } + }, + { + "componentName": "DatePicker", + "title": "日期选择框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "DatePicker", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "name", + "title": { + "label": "名称", + "tip": "name|表单相关" + }, + "propType": "string", + "description": "name|表单相关" + }, + { + "name": "label", + "title": { + "label": "标签", + "tip": "label|输入框内置标签" + }, + "propType": "string", + "description": "label|输入框内置标签" + }, + { + "name": "state", + "title": { + "label": "状态", + "tip": "state|输入框状态" + }, + "propType": { + "type": "oneOf", + "value": ["success", "loading", "error"] + }, + "description": "state|输入框状态" + }, + { + "name": "placeholder", + "title": { + "label": "占位提示", + "tip": "placeholder|输入提示" + }, + "propType": "string", + "description": "输入提示" + }, + { + "name": "value", + "title": { + "label": "value", + "tip": "value|日期值（受控）" + }, + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "日期值（受控）moment 对象" + }, + { + "name": "defaultValue", + "title": { + "label": "默认值", + "tip": "defaultValue|初始日期值，moment 对象" + }, + "propType": "date", + "description": "defaultValue|初始日期值，moment 对象" + }, + { + "name": "format", + "title": { + "label": "格式", + "tip": "format|日期值的格式（用于限定用户输入和展示）" + }, + "propType": "string", + "description": "format|日期值的格式（用于限定用户输入和展示）", + "defaultValue": "YYYY-MM-DD" + }, + { + "name": "onChange", + "propType": "func", + "description": "日期值改变时的回调\n@param {MomentObject|String} value 日期值" + }, + { + "name": "onOk", + "propType": "func", + "description": "点击确认按钮时的回调\n@return {MomentObject|String} 日期值" + }, + { + "name": "size", + "title": { + "label": "尺寸", + "tip": "size|输入框尺寸" + }, + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "size|输入框尺寸", + "defaultValue": "medium" + }, + { + "name": "disabled", + "title": { + "label": "是否禁用", + "tip": "disabled|是否禁用" + }, + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "hasClear", + "title": { + "label": "清除按钮", + "tip": "hasClear|是否显示清空按钮" + }, + "propType": "bool", + "description": "hasClear|是否显示清空按钮", + "defaultValue": true + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "跟随滚动" + }, + { + "name": "defaultVisible", + "title": { + "label": "弹层显示", + "tip": "defaultVisible|弹层默认是否显示" + }, + "propType": "bool", + "description": "defaultVisible|弹层默认是否显示", + "defaultValue": false + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "form", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "rtl", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "value", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "name", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "defaultValue", + "title": { + "label": "默认值", + "tip": "defaultValue|初始日期值，moment 对象" + }, + "setter": "DateSetter" + }, + { + "name": "form", + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Dialog", + "title": "对话框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Dialog", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "visible", + "propType": { + "type": "oneOfType", + "value": ["JSExpression", "bool"] + }, + "description": "是否显示", + "defaultValue": false + }, + { + "name": "title", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "description": "标题" + }, + { + "name": "children", + "propType": { + "type": "oneOfType", + "value": [ + "bool", + { + "type": "instanceOf", + "value": "node" + } + ] + }, + "description": "内容" + }, + { + "name": "footer", + "propType": { + "type": "oneOfType", + "value": ["bool"] + }, + "description": "底部按钮" + }, + { + "name": "footerAlign", + "propType": { + "type": "oneOf", + "value": ["left", "center", "right"] + }, + "description": "操作对齐方式", + "defaultValue": "right" + }, + { + "name": "closeable", + "propType": { + "type": "oneOf", + "value": ["close", "mask", "esc,close", "close,esc,mask", "esc"] + }, + "description": "关闭方式", + "defaultValue": "esc,close" + }, + { + "name": "onClose", + "propType": "func", + "description": "对话框关闭时触发的回调函数\n@param {String} trigger 关闭触发行为的描述字符串\n@param {Object} event 关闭时事件对象" + }, + { + "name": "hasMask", + "propType": "bool", + "description": "是否显示遮罩", + "defaultValue": true + }, + { + "name": "animation", + "propType": { + "type": "oneOfType", + "value": ["object", "bool"] + }, + "description": "显示隐藏时动画的播放方式\n@property {String} in 进场动画\n@property {String} out 出场动画" + }, + { + "name": "autoFocus", + "propType": "bool", + "description": "是否获得焦点", + "defaultValue": false + }, + { + "name": "isFullScreen", + "propType": "bool", + "description": "是否全屏", + "defaultValue": false + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "isModal": true, + "rootSelector": "div.next-dialog", + "nestingRule": { + "parentWhitelist": ["Page"] + } + }, + "props": [ + { + "name": "title", + "title": "标题", + "setter": "StringSetter", + "initialValue": "标题" + }, + { + "name": "visible", + "title": "是否显示", + "setter": "BoolSetter", + "initialValue": false + }, + { + "name": "hasMask", + "title": "显示遮罩", + "setter": "BoolSetter", + "initialValue": true + }, + { + "name": "closeMode", + "title": "关闭方式", + "setter": { + "componentName": "SelectSetter", + "mutiple": true, + "props": { + "options": [ + { + "title": "close", + "value": "close" + }, + { + "title": "mask", + "value": "mask" + }, + { + "title": "esc", + "value": "esc" + } + ] + } + }, + "initialValue": ["esc", "close"] + }, + { + "name": "autoFocus", + "title": "自动聚焦", + "setter": "BoolSetter", + "initialValue": false + }, + { + "name": "buttons", + "title": "底部按钮配置", + "type": "group", + "extraProps": { + "display": "block" + }, + "items": [ + { + "name": "footer", + "title": "是否显示", + "setter": "BoolSetter", + "initialValue": true + }, + { + "name": "footerAlign", + "title": "对齐方式", + "initialValue": "right", + "condition": { + "type": "JSFunction", + "value": "target => {\n return target.getProps().getPropValue(\"footer\");\n }" + }, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "right", + "props": { + "options": [ + { + "title": "left", + "value": "left" + }, + { + "title": "center", + "value": "center" + }, + { + "title": "right", + "value": "right" + } + ] + } + } + }, + { + "name": "footerActions", + "title": "排列方式", + "initialValue": ["ok", "cancel"], + "condition": { + "type": "JSFunction", + "value": "target => {\n return target.getProps().getPropValue(\"footer\");\n }" + }, + "setter": { + "componentName": "SelectSetter", + "initialValue": ["ok", "cancel"], + "props": { + "options": [ + { + "title": "ok, cancel", + "value": ["ok", "cancel"] + }, + { + "title": "cancel, ok", + "value": ["cancel", "ok"] + }, + { + "title": "cancel", + "value": ["cancel"] + }, + { + "title": "ok", + "value": ["ok"] + } + ] + } + } + } + ] + } + ], + "supports": { + "events": ["onOk", "onCancel", "onClose"], + "style": true + } + }, + "experimental": { + "callbacks": { + "onNodeAdd": { + "type": "JSFunction", + "value": "(dragment, currentNode) => {\n \n \n if (\n !dragment ||\n [\"NextP\", \"NextBlock\", \"Slot\"].includes(dragment.componentName) ||\n (dragment.isModal && dragment.isModal())\n ) {\n console.log(\n `[${dragment.componentName}] doesn\\'n need to wrap with NextBlock > NextBlockCell`\n );\n return;\n }\n\n const NextPProps = {\n wrap: false,\n type: \"body2\",\n verAlign: \"middle\",\n textSpacing: true,\n align: \"left\"\n };\n\n if (\n [\n \"Form\",\n \"ResponsiveGrid\",\n \"Box\",\n \"Card\",\n \"List\",\n \"Message\",\n \"Slider\",\n \"NextTable\"\n ].includes(dragment.componentName) ||\n dragment.getPropValue(\"isFillContainer\")\n ) {\n NextPProps.full = true;\n }\n const layoutPSchema = {\n componentName: \"NextP\",\n title: \"段落\",\n props: NextPProps,\n children: [dragment.schema]\n };\n\n \n const layoutBlockNode = len =>\n currentNode.document.createNode({\n componentName: \"NextBlock\",\n title: \"区块\",\n props: {\n childTotalColumns: len || 12\n },\n children: [\n {\n componentName: \"NextBlockCell\",\n title: \"子区块\",\n props: {\n isAutoContainer: true,\n colSpan: 12,\n rowSpan: 1\n },\n children: [layoutPSchema]\n }\n ]\n });\n\n const dropLocation = dragment.document.designer.dropLocation;\n\n if (!dropLocation) {\n \n return;\n }\n const dropTarget = dropLocation.target;\n const dropTargetName = dropLocation.target.componentName || \"\";\n\n \n const targetId = (dropLocation && dropLocation.target.id) || \"\";\n \n let slotTarget =\n currentNode.slots.length > 0 &&\n currentNode.slots.find(item => item.id === targetId);\n\n const layoutPNode = currentNode.document.createNode(layoutPSchema);\n\n \n const isAsideSlot =\n slotTarget && [\"aside\"].indexOf(slotTarget._slotFor.key) > -1;\n \n const isNeedPSlot =\n slotTarget &&\n [\"header\", \"footer\", \"nav\"].indexOf(slotTarget._slotFor.key) > -1;\n\n const wrapWithBlock = (dragment, node, dropTargetName, blockLen) => {\n setTimeout(() => {\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] need to wrap with NextBlock > NextBlockCell > NextP [from NextPage2]`\n );\n const newNode = node.document.createNode(\n layoutBlockNode(blockLen).schema\n );\n node.insertBefore(newNode, dragment, false);\n dragment.remove(false);\n newNode\n .getChildren()\n .get(0)\n .getChildren()\n .get(0)\n .getChildren()\n .get(0)\n .select();\n }, 1);\n };\n\n const wrapWithP = (dragment, node, dropTargetName) => {\n setTimeout(() => {\n \n \n if (dropTargetName === \"NextP\") {\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] does't need to wrap with NextP. [from NextPage3]`\n );\n return;\n }\n\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] need to wrap with NextP [from NextPage3]`\n );\n const newNode = node.document.createNode(\n Object.assign(layoutPNode.schema)\n );\n node.insertBefore(newNode, dragment, false);\n dragment.remove(false);\n newNode\n .getChildren()\n .get(0)\n .select();\n }, 1);\n };\n\n \n \n if (\n [\"NextPage\"].includes(dropTargetName) &&\n currentNode.getChildren().has(dragment)\n ) {\n wrapWithBlock(dragment, currentNode, dropTargetName, 12);\n\n \n \n } else if (\n isAsideSlot &&\n slotTarget &&\n slotTarget.getChildren().has(dragment)\n ) {\n wrapWithBlock(dragment, slotTarget, dropTargetName, 1);\n\n \n \n \n } else if (\n dropTarget.getPropValue(\"isAutoContainer\") ||\n dropTargetName === \"Tab.Item\"\n ) {\n wrapWithP(dragment, dropTarget, dropTargetName);\n\n \n \n } else if (isNeedPSlot && slotTarget) {\n wrapWithP(dragment, slotTarget, dropTargetName);\n }\n\n \n }" + } + } + }, + "icon": "", + "category": "容器" + }, + { + "componentName": "Div", + "title": "Div", + "configure": { + "component": { + "isContainer": true + } + }, + "category": "基础" + }, + { + "componentName": "Divider", + "title": "分隔符", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Divider", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "children", + "propType": "string", + "description": "文案", + "defaultValue": "分隔符" + }, + { + "name": "dashed", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否虚线", + "en_US": "Dashed" + } + }, + "propType": { + "type": "bool" + }, + "description": "是否为虚线", + "defaultValue": false + }, + { + "name": "direction", + "title": { + "label": { + "type": "i18n", + "zh_CN": "朝向", + "en_US": "Direction" + } + }, + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "线是水平还是垂直类型", + "defaultValue": "hoz" + }, + { + "name": "orientation", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标题位置", + "en_US": "Orientation" + } + }, + "propType": { + "type": "oneOf", + "value": ["left", "right", "center"] + }, + "description": "分割线标题的位置", + "defaultValue": "center" + } + ], + "experimental": { + "filters": [ + { + "name": "", + "filter": { + "type": "JSFunction", + "value": "filters" + } + } + ] + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Drawer.Inner", + "title": "Drawer.Inner", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Drawer", + "main": "", + "destructuring": true, + "subName": "Inner" + }, + "props": [ + { + "name": "className", + "propType": "string" + }, + { + "name": "closeable", + "propType": "bool", + "defaultValue": true + }, + { + "name": "role", + "propType": "string", + "defaultValue": "dialog" + }, + { + "name": "title", + "propType": "string" + }, + { + "name": "placement", + "propType": { + "type": "oneOf", + "value": ["top", "right", "bottom", "left"] + } + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "onClose", + "propType": "func" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "headerStyle", + "propType": "object" + }, + { + "name": "bodyStyle", + "propType": "object" + }, + { + "name": "afterClose", + "propType": "func" + }, + { + "name": "beforeOpen", + "propType": "func" + }, + { + "name": "beforeClose", + "propType": "func" + }, + { + "name": "cache", + "propType": "bool" + }, + { + "name": "shouldUpdatePosition", + "propType": "bool" + } + ], + "category": "基础" + }, + { + "componentName": "Drawer", + "title": "抽屉", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Drawer", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "prefix", + "title": { + "type": "i18n", + "zh_CN": "前缀", + "en_US": "prefix" + }, + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "width", + "title": { + "type": "i18n", + "zh_CN": "宽度", + "en_US": "width", + "tip": "width|仅在 placement是 left right 的时候生效" + }, + "propType": { + "type": "oneOfType", + "value": ["number", "string"] + }, + "description": "宽度，仅在 placement是 left right 的时候生效" + }, + { + "name": "height", + "title": { + "type": "i18n", + "zh_CN": "高度", + "en_US": "height", + "tip": "height|仅在 placement是 top bottom 的时候生效" + }, + "propType": { + "type": "oneOfType", + "value": ["number", "string"] + }, + "description": "高度，仅在 placement是 top bottom 的时候生效" + }, + { + "name": "placement", + "propType": { + "type": "oneOf", + "value": ["top", "right", "bottom", "left"] + }, + "description": "位于页面的位置", + "defaultValue": "right" + }, + { + "name": "title", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "description": "标题" + }, + { + "name": "headerStyle", + "propType": "object", + "description": "header上的样式" + }, + { + "name": "bodyStyle", + "propType": "object", + "description": "body上的样式" + }, + { + "name": "visible", + "propType": "bool", + "description": "是否显示" + }, + { + "name": "hasMask", + "propType": "bool", + "description": "是否显示遮罩", + "defaultValue": true + }, + { + "name": "onVisibleChange", + "propType": "func" + }, + { + "name": "animation", + "title": { + "label": "动画", + "tip": "animation" + }, + "propType": "bool", + "description": "显示隐藏时动画的播放方式\n@property {String} in 进场动画\n@property {String} out 出场动画" + }, + { + "name": "closeable", + "propType": { + "type": "oneOfType", + "value": ["string", "bool"] + }, + "description": "控制对话框关闭的方式，值可以为字符串或者布尔值，其中字符串是由以下值组成：\n**close** 表示点击关闭按钮可以关闭对话框\n**mask** 表示点击遮罩区域可以关闭对话框\n**esc** 表示按下 esc 键可以关闭对话框\n如 'close' 或 'close,esc,mask'\n如果设置为 true，则以上关闭方式全部生效\n如果设置为 false，则以上关闭方式全部失效", + "defaultValue": true + }, + { + "name": "onClose", + "propType": "func", + "description": "对话框关闭时触发的回调函数\n@param {String} trigger 关闭触发行为的描述字符串\n@param {Object} event 关闭时事件对象" + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + } + ], + "configure": { + "component": { + "isContainer": true, + "isModal": true, + "rootSelector": ".next-drawer", + "nestingRule": { + "parentWhitelist": { + "type": "JSFunction", + "value": "(testNode, currentNode) => {\n return testNode.componentName === \"Page\";\n }" + } + } + }, + "props": [ + { + "name": "title", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标题", + "en_US": "Title" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: title | 说明: 标题", + "en_US": "prop: title | description: title" + } + }, + "setter": { + "componentName": "StringSetter" + }, + "description": "标题" + }, + { + "name": "width", + "title": { + "label": { + "type": "i18n", + "zh_CN": "宽度", + "en_US": "width" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: width | 说明: 宽度", + "en_US": "prop: width | description: 仅在 placement是 left right 的时候生效" + } + }, + "setter": { + "componentName": "NumberSetter" + }, + "description": "宽度，仅在 placement是 left right 的时候生效" + }, + { + "name": "height", + "title": { + "label": { + "type": "i18n", + "zh_CN": "高度", + "en_US": "height" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: height | 说明: 高度", + "en_US": "prop: height | description: 仅在 placement是 top bottom 的时候生效" + } + }, + "setter": { + "componentName": "NumberSetter" + }, + "description": "高度，仅在 placement是 top bottom 的时候生效" + }, + { + "name": "placement", + "title": { + "label": { + "type": "i18n", + "zh_CN": "弹出位置", + "en_US": "height" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: placement | 说明: 位于页面的位置", + "en_US": "prop: placement | description: drawer placement" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["top", "right", "bottom", "left"] + } + }, + "description": "位于页面的位置", + "defaultValue": "right" + }, + { + "name": "visible", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否显示", + "en_US": "visible" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: visible | 说明: 是否显示", + "en_US": "prop: visible | description: drawer visible" + } + }, + "setter": "BoolSetter", + "description": "是否显示" + }, + { + "name": "hasMask", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示遮罩", + "en_US": "hasMask" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasMask | 说明: 是否显示遮罩", + "en_US": "prop: hasMask | description: drawer hasMask" + } + }, + "setter": { + "componentName": "BoolSetter" + }, + "description": "是否显示遮罩", + "defaultValue": true + }, + { + "name": "closeable", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示遮罩", + "en_US": "closeable" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: closeable | 说明: 控制对话框关闭的方式，值可以为字符串或者布尔值，其中字符串是由以下值组成：\n**close** 表示点击关闭按钮可以关闭对话框\n**mask** 表示点击遮罩区域可以关闭对话框\n**esc** 表示按下 esc 键可以关闭对话框\n如 'close' 或 'close,esc,mask'\n如果设置为 true，则以上关闭方式全部生效\n如果设置为 false，则以上关闭方式全部失效", + "en_US": "prop: closeable | description: drawer closeable" + } + }, + "setter": { + "componentName": "BoolSetter" + }, + "description": "控制对话框关闭的方式，值可以为字符串或者布尔值，其中字符串是由以下值组成：\n**close** 表示点击关闭按钮可以关闭对话框\n**mask** 表示点击遮罩区域可以关闭对话框\n**esc** 表示按下 esc 键可以关闭对话框\n如 'close' 或 'close,esc,mask'\n如果设置为 true，则以上关闭方式全部生效\n如果设置为 false，则以上关闭方式全部失效", + "defaultValue": true + } + ] + }, + "experimental": { + "callbacks": { + "onNodeAdd": { + "type": "JSFunction", + "value": "(dragment, currentNode) => {\n \n \n if (\n !dragment ||\n [\"NextP\", \"NextBlock\", \"Slot\"].includes(dragment.componentName) ||\n (dragment.isModal && dragment.isModal())\n ) {\n console.log(\n `[${dragment.componentName}] doesn\\'n need to wrap with NextBlock > NextBlockCell`\n );\n return;\n }\n\n const NextPProps = {\n wrap: false,\n type: \"body2\",\n verAlign: \"middle\",\n textSpacing: true,\n align: \"left\"\n };\n\n if (\n [\n \"Form\",\n \"ResponsiveGrid\",\n \"Box\",\n \"Card\",\n \"List\",\n \"Message\",\n \"Slider\",\n \"NextTable\"\n ].includes(dragment.componentName) ||\n dragment.getPropValue(\"isFillContainer\")\n ) {\n NextPProps.full = true;\n }\n const layoutPSchema = {\n componentName: \"NextP\",\n title: \"段落\",\n props: NextPProps,\n children: [dragment.schema]\n };\n\n \n const layoutBlockNode = len =>\n currentNode.document.createNode({\n componentName: \"NextBlock\",\n title: \"区块\",\n props: {\n childTotalColumns: len || 12\n },\n children: [\n {\n componentName: \"NextBlockCell\",\n title: \"子区块\",\n props: {\n isAutoContainer: true,\n colSpan: 12,\n rowSpan: 1\n },\n children: [layoutPSchema]\n }\n ]\n });\n\n const dropLocation = dragment.document.designer.dropLocation;\n\n if (!dropLocation) {\n \n return;\n }\n const dropTarget = dropLocation.target;\n const dropTargetName = dropLocation.target.componentName || \"\";\n\n \n const targetId = (dropLocation && dropLocation.target.id) || \"\";\n \n let slotTarget =\n currentNode.slots.length > 0 &&\n currentNode.slots.find(item => item.id === targetId);\n\n const layoutPNode = currentNode.document.createNode(layoutPSchema);\n\n \n const isAsideSlot =\n slotTarget && [\"aside\"].indexOf(slotTarget._slotFor.key) > -1;\n \n const isNeedPSlot =\n slotTarget &&\n [\"header\", \"footer\", \"nav\"].indexOf(slotTarget._slotFor.key) > -1;\n\n const wrapWithBlock = (dragment, node, dropTargetName, blockLen) => {\n setTimeout(() => {\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] need to wrap with NextBlock > NextBlockCell > NextP [from NextPage2]`\n );\n const newNode = node.document.createNode(\n layoutBlockNode(blockLen).schema\n );\n node.insertBefore(newNode, dragment, false);\n dragment.remove(false);\n newNode\n .getChildren()\n .get(0)\n .getChildren()\n .get(0)\n .getChildren()\n .get(0)\n .select();\n }, 1);\n };\n\n const wrapWithP = (dragment, node, dropTargetName) => {\n setTimeout(() => {\n \n \n if (dropTargetName === \"NextP\") {\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] does't need to wrap with NextP. [from NextPage3]`\n );\n return;\n }\n\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] need to wrap with NextP [from NextPage3]`\n );\n const newNode = node.document.createNode(\n Object.assign(layoutPNode.schema)\n );\n node.insertBefore(newNode, dragment, false);\n dragment.remove(false);\n newNode\n .getChildren()\n .get(0)\n .select();\n }, 1);\n };\n\n \n \n if (\n [\"NextPage\"].includes(dropTargetName) &&\n currentNode.getChildren().has(dragment)\n ) {\n wrapWithBlock(dragment, currentNode, dropTargetName, 12);\n\n \n \n } else if (\n isAsideSlot &&\n slotTarget &&\n slotTarget.getChildren().has(dragment)\n ) {\n wrapWithBlock(dragment, slotTarget, dropTargetName, 1);\n\n \n \n \n } else if (\n dropTarget.getPropValue(\"isAutoContainer\") ||\n dropTargetName === \"Tab.Item\"\n ) {\n wrapWithP(dragment, dropTarget, dropTargetName);\n\n \n \n } else if (isNeedPSlot && slotTarget) {\n wrapWithP(dragment, slotTarget, dropTargetName);\n }\n\n \n }" + } + } + }, + "icon": "", + "category": "容器" + }, + { + "componentName": "Dropdown", + "title": "下拉菜单", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Dropdown", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "pure", + "propType": "bool", + "defaultValue": false + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层当前是否显示" + }, + { + "name": "defaultVisible", + "propType": "bool", + "description": "弹层默认是否显示", + "defaultValue": false + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层显示或隐藏时触发的回调函数\n@param {Boolean} visible 弹层是否显示\n@param {String} type 触发弹层显示或隐藏的来源 fromContent 表示由Dropdown内容触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "triggerType", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "instanceOf", + "value": "array" + } + ] + }, + "description": "触发弹层显示或隐藏的操作类型，可以是 'click'，'hover'，或者它们组成的数组，如 ['hover', 'click']", + "defaultValue": "hover" + }, + { + "name": "disabled", + "propType": "bool", + "description": "设置此属性，弹层无法显示或隐藏", + "defaultValue": false + }, + { + "name": "align", + "propType": "string", + "description": "弹层相对于触发元素的定位, 详见 Overlay 的定位部分", + "defaultValue": "tl bl" + }, + { + "name": "offset", + "propType": { + "type": "instanceOf", + "value": "array" + }, + "description": "弹层相对于trigger的定位的微调, 接收数组[hoz, ver], 表示弹层在 left / top 上的增量\ne.g. [100, 100] 表示往右(RTL 模式下是往左) 、下分布偏移100px", + "defaultValue": [0, 0] + }, + { + "name": "delay", + "propType": "number", + "description": "弹层显示或隐藏的延时时间（以毫秒为单位），在 triggerType 被设置为 hover 时生效", + "defaultValue": 200 + }, + { + "name": "autoFocus", + "propType": "bool", + "description": "弹层打开时是否让其中的元素自动获取焦点" + }, + { + "name": "hasMask", + "propType": "bool", + "description": "是否显示遮罩", + "defaultValue": false + }, + { + "name": "cache", + "propType": "bool", + "description": "隐藏时是否保留子节点", + "defaultValue": false + }, + { + "name": "animation", + "propType": { + "type": "oneOfType", + "value": ["object", "bool"] + }, + "description": "配置动画的播放方式，支持 { in: 'enter-class', out: 'leave-class' } 的对象参数，如果设置为 false，则不播放动画\n@default { in: 'expandInDown', out: 'expandOutUp' }" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "trigger", + "title": { + "label": "触发元素", + "tip": "" + }, + "setter": "SlotSetter" + }, + { + "name": "animation", + "title": { + "label": "animation", + "tip": "配置动画的播放方式，支持 { in: 'enter-class', out: 'leave-class' } 的对象参数，如果设置为 false，则不播放动画\n@default { in: 'expandInDown', out: 'expandOutUp' }" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "in", + "description": "", + "setter": "StringSetter", + "defaultValue": "enter-class" + }, + { + "name": "out", + "description": "", + "setter": "StringSetter", + "defaultValue": "leave-class" + } + ] + } + }, + "initialValue": { + "in": "enter-class", + "out": "leave-class" + } + }, + { + "componentName": "BoolSetter", + "initialValue": true + } + ] + } + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "ErrorBoundary", + "title": "ErrorBoundary", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "ConfigProvider", + "main": "", + "destructuring": true, + "subName": "ErrorBoundary" + }, + "props": [ + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "element" + } + }, + { + "name": "afterCatch", + "propType": "func", + "description": "捕获错误后的自定义处理, 比如埋点上传\n@param {Object} error 错误\n@param {Object} errorInfo 错误详细信息" + }, + { + "name": "fallbackUI", + "propType": "func", + "description": "捕获错误后的展现 自定义组件\n@param {Object} error 错误\n@param {Object} errorInfo 错误详细信息\n@returns {Element} 捕获错误后的处理" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "Field", + "title": "Field", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Field", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "this", + "propType": "any" + } + ], + "category": "基础" + }, + { + "componentName": "Form.Error", + "title": "Form.Error", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Form", + "main": "", + "destructuring": true, + "subName": "Error" + }, + "props": [ + { + "name": "name", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "instanceOf", + "value": "array" + } + ] + }, + "description": "表单名" + }, + { + "name": "field", + "propType": "object", + "description": "自定义 field (在 Form 内不需要设置)" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "children", + "propType": { + "type": "oneOfType", + "value": [ + { + "type": "instanceOf", + "value": "node" + }, + "func" + ] + }, + "description": "自定义错误渲染, 可以是 node 或者 function(errors, state)" + }, + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + } + ], + "category": "基础" + }, + { + "componentName": "Form.Item", + "title": "表单项", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Form", + "main": "", + "destructuring": true, + "subName": "Item" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "label", + "propType": "string", + "description": "标签" + }, + { + "name": "labelCol", + "propType": { + "type": "shape", + "value": [ + { + "name": "span", + "description": "span", + "propType": "number" + }, + { + "name": "offset", + "description": "offset", + "propType": "number" + } + ] + }, + "description": "label 标签布局，通 `` 组件，设置 span offset 值，如 {span: 8, offset: 16}，该项仅在垂直表单有效" + }, + { + "name": "wrapperCol", + "propType": { + "type": "shape", + "value": [ + { + "name": "span", + "description": "span", + "propType": "number" + }, + { + "name": "offset", + "description": "offset", + "propType": "number" + } + ] + }, + "description": "需要为输入控件设置布局样式时，使用该属性，用法同 labelCol" + }, + { + "name": "help", + "title": { + "label": "自定义提示信息", + "tip": "如不设置，则会根据校验规则自动生成." + }, + "propType": "string", + "description": "自定义提示信息，如不设置，则会根据校验规则自动生成." + }, + { + "name": "extra", + "title": { + "label": "额外的提示信息", + "tip": "和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 位于错误信息后面" + }, + "propType": "string", + "description": "额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 位于错误信息后面" + }, + { + "name": "validateState", + "title": { + "label": "校验状态", + "tip": "如不设置，则会根据校验规则自动生成\n@enumdesc 失败, 成功, 校验中, 警告" + }, + "propType": { + "type": "oneOf", + "value": ["error", "success", "loading", "warning"] + }, + "description": "校验状态，如不设置，则会根据校验规则自动生成\n@enumdesc 失败, 成功, 校验中, 警告" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + }, + { + "name": "size", + "title": { + "label": "Size", + "tip": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。" + }, + "propType": { + "type": "oneOf", + "value": ["large", "small", "medium"] + }, + "description": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。" + }, + { + "name": "fullWidth", + "title": { + "label": "fullWidth", + "tip": "单个 Item 中表单类组件宽度是否是100%" + }, + "propType": "bool", + "description": "单个 Item 中表单类组件宽度是否是100%" + }, + { + "name": "labelAlign", + "title": { + "label": "标签的位置", + "tip": "上, 左, 内" + }, + "propType": { + "type": "oneOf", + "value": ["top", "left", "inset"] + }, + "description": "标签的位置\n@enumdesc 上, 左, 内" + }, + { + "name": "labelTextAlign", + "title": { + "label": "标签的左右对齐方式", + "tip": "左, 右" + }, + "propType": { + "type": "oneOf", + "value": ["left", "right"] + }, + "description": "标签的左右对齐方式\n@enumdesc 左, 右" + }, + { + "name": "className", + "propType": "string", + "description": "扩展class" + }, + { + "name": "required", + "title": { + "label": "不能为空", + "tip": "[表单校验] 不能为空" + }, + "propType": "bool", + "description": "[表单校验] 不能为空" + }, + { + "name": "requiredMessage", + "title": { + "label": "自定义错误信息", + "tip": "[表单校验]为空时自定义错误信息" + }, + "propType": "string", + "description": "required 自定义错误信息" + }, + { + "name": "min", + "title": { + "label": "最小值", + "tip": "[表单校验] 最小值" + }, + "propType": "number", + "description": "[表单校验] 最小值" + }, + { + "name": "max", + "title": { + "label": "最大值", + "tip": "[表单校验] 最大值" + }, + "propType": "number", + "description": "[表单校验] 最大值" + }, + { + "name": "minmaxMessage", + "title": { + "label": "min/max message", + "tip": "[表单校验] min/max 自定义错误信息" + }, + "propType": "string", + "description": "min/max 自定义错误信息" + }, + { + "name": "minLength", + "title": { + "label": "最小长度", + "tip": "[表单校验] 字符串最小长度 / 数组最小个数" + }, + "propType": "number", + "description": "[表单校验] 字符串最小长度 / 数组最小个数" + }, + { + "name": "maxLength", + "title": { + "label": "最大长度", + "tip": "[表单校验] 字符串最大长度 / 数组最大个数" + }, + "propType": "number", + "description": "[表单校验] 字符串最大长度 / 数组最大个数" + }, + { + "name": "minmaxLengthMessage", + "title": { + "label": "max|min length error message", + "tip": "[表单校验] minLength/maxLength 自定义错误信息" + }, + "propType": "string", + "description": "minLength/maxLength 自定义错误信息" + }, + { + "name": "length", + "title": { + "label": "长度", + "tip": "[表单校验] 字符串精确长度 / 数组精确个数" + }, + "propType": "number", + "description": "[表单校验] 字符串精确长度 / 数组精确个数" + }, + { + "name": "lengthMessage", + "title": { + "label": "length error message", + "tip": "[表单校验] minLength/maxLength 自定义错误信息" + }, + "propType": "string", + "description": "length 自定义错误信息" + }, + { + "name": "pattern", + "title": { + "label": "正则", + "tip": "[表单校验] 正则校验" + }, + "propType": "string", + "description": "正则校验" + }, + { + "name": "patternMessage", + "title": { + "label": "pattern error message", + "tip": "[表单校验] pattern 自定义错误信息" + }, + "propType": "string", + "description": "pattern 自定义错误信息" + }, + { + "name": "format", + "title": { + "label": "format", + "tip": "[表单校验] 四种常用的 pattern" + }, + "propType": { + "type": "oneOf", + "value": ["number", "email", "url", "tel"] + }, + "description": "[表单校验] 四种常用的 pattern" + }, + { + "name": "formatMessage", + "title": { + "label": "format error message", + "tip": "[表单校验] format 自定义错误信息" + }, + "propType": "string", + "description": "format 自定义错误信息" + }, + { + "name": "validator", + "propType": "func", + "description": "[表单校验] 自定义校验函数" + }, + { + "name": "autoValidate", + "propType": "bool", + "description": "是否修改数据时自动触发校验" + }, + { + "name": "device", + "propType": { + "type": "oneOf", + "value": ["phone", "tablet", "desktop"] + }, + "description": "预设屏幕宽度" + }, + { + "name": "responsive", + "propType": "bool" + }, + { + "name": "colSpan", + "propType": "number", + "description": "在响应式布局模式下，表单项占多少列" + }, + { + "name": "labelWidth", + "propType": { + "type": "oneOfType", + "value": ["string", "number"] + }, + "description": "在响应式布局下，且label在左边时，label的宽度是多少", + "defaultValue": 100 + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否开启预览态" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["Form"] + } + }, + "supports": { + "style": true + }, + "props": [ + { + "name": "label", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签文本", + "en_US": "Label" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: label | 说明: 标签文本内容", + "en_US": "prop: label | description: label content" + } + }, + "setter": "StringSetter", + "description": "标签" + }, + { + "name": "help", + "title": { + "label": { + "type": "i18n", + "zh_CN": "错误提示", + "en_US": "Help Info" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: help | 说明: 自定义提示信息, 如不设置，则会根据校验规则自动生成.", + "en_US": "prop: help | description: help infomation" + } + }, + "setter": "StringSetter", + "description": "自定义提示信息，如不设置，则会根据校验规则自动生成." + }, + { + "name": "extra", + "title": { + "label": { + "type": "i18n", + "zh_CN": "帮助提示", + "en_US": "Extra Info" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: extra | 说明: 额外的提示信息, 和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 位于错误信息后面", + "en_US": "prop: extra | description: extra infomation" + } + }, + "setter": "StringSetter" + }, + { + "name": "validateState", + "title": { + "label": "校验状态", + "tip": "如不设置，则会根据校验规则自动生成\n@enumdesc 失败, 成功, 校验中, 警告" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["error", "success", "loading", "warning"] + } + } + }, + { + "name": "size", + "title": { + "label": "尺寸", + "tip": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "defaultValue": "medium" + }, + { + "name": "labelAlign", + "title": { + "label": "标签位置", + "tip": "上, 左, 内" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["top", "left", "inset"] + } + }, + "defaultValue": "left" + }, + { + "name": "labelTextAlign", + "title": { + "label": "标签对齐", + "tip": "左, 右" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["left", "right"] + } + }, + "defaultValue": "left" + }, + { + "name": "device", + "title": { + "label": "设备" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["phone", "tablet", "desktop"] + } + }, + "defaultValue": "desktop" + }, + { + "name": "fullWidth", + "title": { + "label": "宽度占满", + "tip": "单个 Item 中表单类组件宽度是否是100%" + }, + "setter": "BoolSetter", + "description": "单个 Item 中表单类组件宽度是否是100%" + }, + { + "name": "isPreview", + "title": { + "label": "预览态" + }, + "setter": "BoolSetter", + "description": "是否开启预览态" + }, + { + "name": "autoValidate", + "title": { + "label": "自动校验" + }, + "setter": "BoolSetter", + "description": "是否修改数据时自动触发校验" + }, + { + "type": "group", + "display": "accordion", + "title": "校验", + "items": [ + { + "type": "group", + "display": "popup", + "title": "非空校验", + "items": [ + { + "name": "required", + "title": { + "label": "不能为空", + "tip": "[表单校验] 不能为空" + }, + "setter": "BoolSetter", + "description": "[表单校验] 不能为空" + }, + { + "name": "requiredMessage", + "title": { + "label": "错误信息", + "tip": "[表单校验]为空时自定义错误信息" + }, + "setter": "StringSetter", + "description": "required 自定义错误信息" + } + ] + }, + { + "type": "group", + "display": "popup", + "title": "最大/最小值校验", + "items": [ + { + "name": "min", + "title": { + "label": "最小值", + "tip": "[表单校验] 最小值" + }, + "setter": "NumberSetter", + "description": "[表单校验] 最小值" + }, + { + "name": "max", + "title": { + "label": "最大值", + "tip": "[表单校验] 最大值" + }, + "setter": "NumberSetter", + "description": "[表单校验] 最大值" + }, + { + "name": "minmaxMessage", + "title": { + "label": "错误信息", + "tip": "[表单校验] min/max 自定义错误信息" + }, + "setter": "StringSetter" + } + ] + }, + { + "type": "group", + "display": "popup", + "title": "最大/最小长度校验", + "items": [ + { + "name": "minLength", + "title": { + "label": "最小长度", + "tip": "[表单校验] 字符串最小长度 / 数组最小个数" + }, + "setter": "NumberSetter", + "description": "[表单校验] 字符串最小长度 / 数组最小个数" + }, + { + "name": "maxLength", + "title": { + "label": "最大长度", + "tip": "[表单校验] 字符串最大长度 / 数组最大个数" + }, + "setter": "NumberSetter", + "description": "[表单校验] 字符串最大长度 / 数组最大个数" + }, + { + "name": "minmaxLengthMessage", + "title": { + "label": "错误信息", + "tip": "[表单校验] minLength/maxLength 自定义错误信息" + }, + "setter": "StringSetter", + "description": "minLength/maxLength 自定义错误信息" + } + ] + }, + { + "type": "group", + "display": "popup", + "title": "长度校验", + "items": [ + { + "name": "length", + "title": { + "label": "长度", + "tip": "[表单校验] 字符串精确长度 / 数组精确个数" + }, + "setter": "NumberSetter", + "description": "[表单校验] 字符串精确长度 / 数组精确个数" + }, + { + "name": "lengthMessage", + "title": { + "label": "错误信息", + "tip": "[表单校验] minLength/maxLength 自定义错误信息" + }, + "setter": "StringSetter", + "description": "length 自定义错误信息" + } + ] + }, + { + "type": "group", + "display": "popup", + "title": "正则校验", + "items": [ + { + "name": "pattern", + "title": { + "label": "正则", + "tip": "[表单校验] 正则校验" + }, + "setter": "StringSetter", + "description": "正则校验" + }, + { + "name": "patternMessage", + "title": { + "label": "错误信息", + "tip": "[表单校验] pattern 自定义错误信息" + }, + "setter": "StringSetter", + "description": "pattern 自定义错误信息" + } + ] + }, + { + "type": "group", + "display": "popup", + "title": "格式化校验", + "items": [ + { + "name": "format", + "title": { + "label": "format", + "tip": "[表单校验] 四种常用的 pattern" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["number", "email", "url", "tel"] + } + }, + "description": "[表单校验] 四种常用的 pattern" + }, + { + "name": "formatMessage", + "title": { + "label": "错误信息", + "tip": "[表单校验] format 自定义错误信息" + }, + "setter": "StringSetter", + "description": "format 自定义错误信息" + } + ] + }, + { + "name": "validator", + "display": "popup", + "title": { + "label": "自定义校验函数" + }, + "setter": "FunctionSetter", + "description": "[表单校验] 自定义校验函数" + } + ] + }, + { + "type": "group", + "title": "布局", + "display": "accordion", + "items": [ + { + "name": "labelCol", + "display": "inline", + "setter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "span", + "description": "span", + "setter": "NumberSetter" + }, + { + "name": "offset", + "description": "offset", + "setter": "NumberSetter" + } + ] + } + } + }, + "description": "label 标签布局，通 `` 组件，设置 span offset 值，如 {span: 8, offset: 16}，该项仅在垂直表单有效" + }, + { + "name": "wrapperCol", + "display": "inline", + "setter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "span", + "description": "span", + "setter": "NumberSetter" + }, + { + "name": "offset", + "description": "offset", + "setter": "NumberSetter" + } + ] + } + } + }, + "description": "需要为输入控件设置布局样式时，使用该属性，用法同 labelCol" + } + ] + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ] + }, + "experimental": { + "callbacks": { + "onNodeRemove": { + "type": "JSFunction", + "value": "(removedNode, currentNode) => {\n if (!removedNode || !currentNode) {\n return;\n }\n const children = currentNode.children;\n \n if (children && children.length === 0) {\n currentNode.remove();\n }\n }" + } + } + }, + "icon": "https://img.alicdn.com/tfs/TB1nYqOuW61gK0jSZFlXXXDKFXa-112-64.png", + "category": "内容" + }, + { + "componentName": "Form.Reset", + "title": "重置按钮", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Form", + "main": "", + "destructuring": true, + "subName": "Reset" + }, + "props": [ + { + "name": "onClick", + "propType": "func", + "description": "点击提交后触发" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "children", + "title": "内容", + "propType": "string" + }, + { + "name": "icon", + "propType": "string", + "description": "自定义内联样式" + }, + { + "name": "type", + "title": "类型", + "propType": { + "type": "oneOf", + "value": ["primary", "secondary", "normal"] + }, + "description": "按钮的类型", + "defaultValue": "normal" + }, + { + "name": "size", + "title": "尺寸", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "按钮的尺寸", + "defaultValue": "medium" + }, + { + "name": "iconSize", + "title": "Icon 尺寸", + "propType": { + "type": "oneOf", + "value": ["xxs", "xs", "small", "medium", "large", "xl", "xxl", "xxxl"] + }, + "defaultValue": "small", + "description": "按钮中 Icon 的尺寸，用于替代 Icon 的默认大小" + }, + { + "name": "ghost", + "title": "ghost", + "propType": { + "type": "oneOf", + "value": [true, false, "light", "dark"] + }, + "description": "是否为幽灵按钮", + "defaultValue": false + }, + { + "name": "toDefault", + "propType": "bool", + "description": "返回默认值" + }, + { + "name": "loading", + "title": "loading", + "propType": "bool", + "description": "设置按钮的载入状态", + "defaultValue": false + }, + { + "name": "text", + "title": "text", + "propType": "bool", + "description": "是否为文本按钮", + "defaultValue": false + }, + { + "name": "warning", + "title": "warning", + "propType": "bool", + "description": "是否为警告按钮", + "defaultValue": false + }, + { + "name": "disabled", + "title": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "onMouseUp", + "propType": "func" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "icon", + "setter": "IconSetter", + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n target.nodes[0].children.import(value && {\"componentName\": \"Icon\", \"props\": {\"type\": value, \"style\": {\"marginRight\": 5}}}, true);\n }" + } + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文本内容", + "en_US": "content" + }, + "tip": "按钮文本内容" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + } + } + ] + } + }, + "category": "基础" + }, + { + "componentName": "Form.Submit", + "title": "提交按钮", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Form", + "main": "", + "destructuring": true, + "subName": "Submit" + }, + "props": [ + { + "name": "onClick", + "propType": "func", + "description": "点击提交后触发\n@param {Object} value 数据\n@param {Object} errors 错误数据\n@param {class} field 实例" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "children", + "title": "内容", + "propType": "string" + }, + { + "name": "icon", + "propType": "string", + "description": "自定义内联样式" + }, + { + "name": "type", + "title": "类型", + "propType": { + "type": "oneOf", + "value": ["primary", "secondary", "normal"] + }, + "description": "按钮的类型", + "defaultValue": "normal" + }, + { + "name": "size", + "title": "尺寸", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "按钮的尺寸", + "defaultValue": "medium" + }, + { + "name": "iconSize", + "title": "Icon 尺寸", + "propType": { + "type": "oneOf", + "value": ["xxs", "xs", "small", "medium", "large", "xl", "xxl", "xxxl"] + }, + "defaultValue": "small", + "description": "按钮中 Icon 的尺寸，用于替代 Icon 的默认大小" + }, + { + "name": "ghost", + "title": "ghost", + "propType": { + "type": "oneOf", + "value": [true, false, "light", "dark"] + }, + "description": "是否为幽灵按钮", + "defaultValue": false + }, + { + "name": "validate", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否校验", + "en_US": "Validate" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: validate | 说明: 是否校验/需要校验的 name 数组", + "en_US": "prop: validate | description: validate or validate array" + } + }, + "propType": { + "type": "oneOfType", + "value": [ + "bool", + { + "type": "instanceOf", + "value": "array" + } + ] + }, + "description": "是否校验/需要校验的 name 数组" + }, + { + "name": "loading", + "title": "loading", + "propType": "bool", + "description": "设置按钮的载入状态", + "defaultValue": false + }, + { + "name": "text", + "title": "text", + "propType": "bool", + "description": "是否为文本按钮", + "defaultValue": false + }, + { + "name": "warning", + "title": "warning", + "propType": "bool", + "description": "是否为警告按钮", + "defaultValue": false + }, + { + "name": "disabled", + "title": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "onMouseUp", + "propType": "func" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "disabled", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["ExpressionSetter", "BoolSetter"] + } + } + }, + { + "name": "icon", + "setter": "IconSetter", + "extraProps": { + "defaultValue": "", + "onChange": { + "type": "JSFunction", + "value": "(val, field, editor) => {\n field.nodes[0].children.import(val && {\"componentName\": \"Icon\", \"props\": {\"type\": val, \"style\": {\"marginRight\": 5}}}, true); //field.top.setPropValue('children', [{\"componentName\": \"Icon\", \"props\": {\"type\": val}}, (field.top.getPropValue('children') || []).slice(-1)]);\n}" + } + } + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文本内容", + "en_US": "content" + }, + "tip": "按钮文本内容" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + } + } + ] + } + }, + "experimental": { + "initials": [ + { + "name": "htmlType", + "initial": { + "type": "JSFunction", + "value": "() => \"submit\"" + } + } + ] + }, + "category": "基础" + }, + { + "componentName": "Form", + "title": "表单容器", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Form", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "inline", + "propType": "bool", + "description": "内联表单" + }, + { + "name": "size", + "title": { + "label": "Size", + "tip": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。\n@enumdesc 大, 中, 小" + }, + "propType": { + "type": "oneOf", + "value": ["large", "medium", "small"] + }, + "description": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。\n@enumdesc 大, 中, 小", + "defaultValue": "medium" + }, + { + "name": "fullWidth", + "propType": "bool", + "description": "单个 Item 中表单类组件宽度是否是100%" + }, + { + "name": "labelAlign", + "title": { + "label": "标签的位置", + "tip": "上, 左, 内" + }, + "propType": { + "type": "oneOf", + "value": ["top", "left", "inset"] + }, + "description": "标签的位置\n@enumdesc 上, 左, 内", + "defaultValue": "left" + }, + { + "name": "labelTextAlign", + "propType": { + "type": "oneOf", + "value": ["left", "right"] + }, + "description": "标签的左右对齐方式\n@enumdesc 左, 右" + }, + { + "name": "onSubmit", + "propType": "func", + "description": "form内有 `htmlType=\"submit\"` 的元素的时候会触发" + }, + { + "name": "className", + "propType": "string", + "description": "扩展class" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + }, + { + "name": "value", + "propType": { + "type": "oneOfType", + "value": ["Json", "JSExpression"] + }, + "description": "表单数值" + }, + { + "name": "onChange", + "propType": "func", + "description": "表单变化回调\n@param {Object} values 表单数据\n@param {Object} item 详细\n@param {String} item.name 变化的组件名\n@param {String} item.value 变化的数据\n@param {Object} item.field field 实例" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "device", + "propType": { + "type": "oneOf", + "value": ["phone", "tablet", "desktop"] + }, + "description": "预设屏幕宽度", + "defaultValue": "desktop" + }, + { + "name": "responsive", + "propType": "bool", + "description": "是否开启内置的响应式布局 （使用ResponsiveGrid）" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否开启预览态" + }, + { + "name": "field", + "propType": "any", + "description": "field 实例" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": [ + { + "name": "inline", + "title": { + "label": { + "type": "i18n", + "zh_CN": "内联表单", + "en_US": "Inline" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: inline | 说明: 内联表单", + "en_US": "prop: inline | description: inline form" + } + }, + "setter": "BoolSetter" + }, + { + "name": "fullWidth", + "title": { + "label": { + "type": "i18n", + "zh_CN": "宽度占满", + "en_US": "FullWidth" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: fullWidth | 说明: 单个 Item 中表单类组件宽度是否是100%", + "en_US": "prop: fullWidth | description: full width" + } + }, + "setter": "BoolSetter" + }, + { + "name": "isPreview", + "title": { + "label": { + "type": "i18n", + "zh_CN": "预览态", + "en_US": "Preview Mode" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: isPreview | 说明: 是否开启预览态", + "en_US": "prop: isPreview | description: preview mode" + } + }, + "setter": "BoolSetter", + "description": "是否开启预览态" + }, + { + "name": "field", + "title": { + "label": { + "type": "i18n", + "zh_CN": "Field 实例", + "en_US": "Field" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: field | 说明: 传入 Field 实例", + "en_US": "prop: field | description: field instance" + }, + "docUrl": "https://fusion.alibaba-inc.com/pc/component/basic/form#%E5%A4%8D%E6%9D%82%E5%8A%9F%E8%83%BD(Field)" + }, + "setter": { + "componentName": "ExpressionSetter" + } + }, + { + "name": "value", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单值", + "en_US": "value" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: value | 说明: 表单值", + "en_US": "prop: value | description: value instance" + } + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["JsonSetter", "ExpressionSetter"] + } + } + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。\n@enumdesc 大, 中, 小", + "en_US": "prop: size | description: size" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["large", "medium", "small"] + } + }, + "description": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。\n@enumdesc 大, 中, 小", + "defaultValue": "medium" + }, + { + "name": "labelAlign", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签位置", + "en_US": "Label Align" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: labelAlign | 说明: 标签的位置\n@enumdesc 上, 左, 内", + "en_US": "prop: labelAlign | description: label align" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["top", "left", "inset"] + } + }, + "defaultValue": "left" + }, + { + "name": "labelTextAlign", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签对齐", + "en_US": "Text Align" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: labelTextAlign | 说明: 标签的左右对齐方式\n@enumdesc 左, 右", + "en_US": "prop: labelTextAlign | description: label text align" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["left", "right"] + } + }, + "defaultValue": "left" + }, + { + "name": "device", + "title": { + "label": { + "type": "i18n", + "zh_CN": "设备", + "en_US": "Device" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: device | 说明: 预设屏幕宽度", + "en_US": "prop: device | description: device" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["phone", "tablet", "desktop"] + } + }, + "defaultValue": "desktop" + } + ], + "supports": { + "style": true, + "events": ["saveField", "onSubmit", "onChange"] + } + }, + "experimental": { + "callbacks": { + "onNodeAdd": { + "type": "JSFunction", + "value": "(dragment, currentNode) => {\n \n if (!dragment || dragment.componentName === \"Form.Item\") {\n return;\n }\n \n const layoutPNode = currentNode.document.createNode({\n componentName: \"Form.Item\",\n title: \"表单项\",\n props: {\n label: \"表单项: \"\n },\n children: [dragment.schema]\n });\n \n setTimeout(() => {\n if (!currentNode.getChildren().has(dragment)) {\n return;\n }\n const newNode = currentNode.document.createNode(Object.assign(layoutPNode.schema));\n currentNode.insertBefore(newNode, dragment, false);\n dragment.remove(false);\n newNode.getChildren().get(0).select();\n }, 1);\n }" + } + } + }, + "icon": "https://img.alicdn.com/tfs/TB1oH02u2b2gK0jSZK9XXaEgFXa-112-64.png", + "category": "内容" + }, + { + "componentName": "Group", + "title": "Group", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Nav", + "main": "", + "destructuring": true, + "subName": "Group" + }, + "props": [ + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "label", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "标签内容" + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "导航项和子导航" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "Icon", + "title": "图标", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Icon", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "type", + "propType": "string", + "description": "指定显示哪种图标" + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "图标尺寸", + "en_US": "Icon Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 指定图标大小", + "en_US": "prop: size | description: icon size" + } + }, + "propType": { + "type": "oneOfType", + "value": [ + { + "type": "oneOf", + "value": ["xxs", "xs", "small", "medium", "large", "xl", "xxl", "xxxl", "inherit"] + }, + "number" + ] + }, + "description": "指定图标大小", + "defaultValue": "medium" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "type", + "title": { + "label": { + "type": "i18n", + "zh_CN": "图标类型", + "en_US": "Icon" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: type | 说明: 图标类型", + "en_US": "prop: type | description: icon type" + } + }, + "setter": { + "componentName": "IconSetter", + "props": { + "hasClear": false + } + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Image", + "title": "图片", + "npm": { + "package": "@alifd/ali-lowcode-components", + "version": "latest", + "exportName": "Image", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "src", + "title": { + "label": { + "type": "i18n", + "zh_CN": "图片链接", + "en_US": "Image Address" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: src | 说明: 图片链接", + "en_US": "prop: src | description: image address" + } + }, + "propType": "string", + "defaultValue": "https://img.alicdn.com/tps/TB16TQvOXXXXXbiaFXXXXXXXXXX-120-120.svg" + }, + { + "name": "title", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标题", + "en_US": "Title" + } + }, + "propType": "string" + }, + { + "name": "alt", + "title": { + "label": { + "type": "i18n", + "zh_CN": "代替文本", + "en_US": "Alt" + } + }, + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "icon": "", + "category": "常用" + }, + { + "componentName": "Inner", + "title": "Inner", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Dialog", + "main": "", + "destructuring": true, + "subName": "Inner" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "title", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "footer", + "propType": { + "type": "oneOfType", + "value": [ + "bool", + { + "type": "instanceOf", + "value": "node" + } + ] + } + }, + { + "name": "footerAlign", + "propType": { + "type": "oneOf", + "value": ["left", "center", "right"] + }, + "defaultValue": "right" + }, + { + "name": "footerActions", + "propType": { + "type": "instanceOf", + "value": "array" + }, + "defaultValue": ["ok", "cancel"] + }, + { + "name": "onOk", + "propType": "func" + }, + { + "name": "onCancel", + "propType": "func" + }, + { + "name": "okProps", + "propType": "object" + }, + { + "name": "cancelProps", + "propType": "object" + }, + { + "name": "closeable", + "propType": "bool", + "defaultValue": true + }, + { + "name": "onClose", + "propType": "func" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "role", + "propType": "string", + "defaultValue": "dialog" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "height", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "Input.Group", + "title": "Input.Group", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Input", + "main": "", + "destructuring": true, + "subName": "Group" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "description": "样式前缀", + "defaultValue": "next-" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "addonBefore", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "输入框前附加内容" + }, + { + "name": "addonBeforeClassName", + "propType": "string", + "description": "输入框前附加内容css" + }, + { + "name": "addonAfter", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "输入框后附加内容" + }, + { + "name": "addonAfterClassName", + "propType": "string", + "description": "输入框后额外css" + }, + { + "name": "rtl", + "propType": "bool", + "description": "rtl" + } + ], + "category": "基础" + }, + { + "componentName": "Input.Password", + "title": "密码框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Input", + "main": "", + "destructuring": true, + "subName": "Password" + }, + "props": [ + { + "name": "name", + "propType": "string" + }, + { + "name": "showToggle", + "propType": "bool", + "description": "是否展示切换按钮", + "defaultValue": true + }, + { + "name": "label", + "propType": "string", + "title": "标签文案", + "description": "label" + }, + { + "name": "hasClear", + "propType": "bool", + "description": "是否出现清除按钮" + }, + { + "name": "state", + "title": "状态", + "propType": { + "type": "oneOf", + "value": ["error", "loading", "success", "warning"] + }, + "description": "状态\n@enumdesc 错误, 校验中, 成功, 警告" + }, + { + "name": "size", + "title": "尺寸", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "尺寸\n@enumdesc 小, 中, 大", + "defaultValue": "medium" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "maxLength", + "propType": "number", + "description": "最大长度" + }, + { + "name": "hasLimitHint", + "propType": "bool", + "description": "是否展现最大长度样式" + }, + { + "name": "cutString", + "propType": "bool", + "description": "是否截断超出字符串" + }, + { + "name": "readOnly", + "propType": "bool", + "description": "是否只读" + }, + { + "name": "trim", + "propType": "bool", + "description": "onChange返回会自动去除头尾空字符" + }, + { + "name": "placeholder", + "propType": "string", + "description": "输入提示" + }, + { + "name": "hasBorder", + "propType": "bool", + "description": "是否有边框" + }, + { + "name": "onPressEnter", + "propType": "func", + "description": "按下回车的回调" + }, + { + "name": "onClear", + "propType": "func" + }, + { + "name": "onChange", + "propType": "func" + }, + { + "name": "onKeyDown", + "propType": "func" + }, + { + "name": "onFocus", + "propType": "func" + }, + { + "name": "onBlur", + "propType": "func" + }, + { + "name": "hint", + "title": "Icon 水印", + "propType": "string", + "description": "水印 (Icon的type类型，和hasClear占用一个地方)" + }, + { + "name": "innerBefore", + "propType": "string", + "description": "文字前附加内容" + }, + { + "name": "innerAfter", + "propType": "string", + "description": "文字后附加内容" + }, + { + "name": "addonBefore", + "propType": "string", + "description": "输入框前附加内容" + }, + { + "name": "addonAfter", + "propType": "string", + "description": "输入框后附加内容" + }, + { + "name": "addonTextBefore", + "propType": "string", + "description": "输入框前附加文字" + }, + { + "name": "addonTextAfter", + "propType": "string", + "description": "输入框后附加文字" + }, + { + "name": "autoFocus", + "propType": "bool", + "description": "自动聚焦" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": [ + { + "name": "label", + "setter": "StringSetter", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签文本", + "en_US": "Label" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: label | 说明: 标签文本内容", + "en_US": "prop: label | description: label content" + } + }, + "description": "label" + }, + { + "name": "maxLength", + "title": { + "label": { + "type": "i18n", + "zh_CN": "最大长度", + "en_US": "MaxLength" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: maxLength | 说明: 最大长度", + "en_US": "prop: maxLength | description: max length" + } + }, + "setter": "NumberSetter", + "description": "最大长度" + }, + { + "name": "placeholder", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入提示", + "en_US": "Placeholder" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: placeholder | 说明: 输入提示", + "en_US": "prop: placeholder | description: placeholder" + } + }, + "setter": "StringSetter" + }, + { + "name": "state", + "title": { + "label": { + "type": "i18n", + "zh_CN": "状态", + "en_US": "State" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: state | 说明: 状态\n@enumdesc 错误, 校验中, 成功, 警告", + "en_US": "prop: state | description: input state" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["error", "loading", "success", "warning"] + } + } + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 尺寸\n@enumdesc 小, 中, 大", + "en_US": "prop: size | description: size" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "defaultValue": "medium" + }, + { + "name": "showToggle", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示切换", + "en_US": "Show Togger" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: showToggle | 说明: 是否展示切换按钮", + "en_US": "prop: showToggle | description: show togger icon" + } + }, + "setter": "BoolSetter", + "defaultValue": true + }, + { + "name": "hasClear", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示清除", + "en_US": "Show Clear" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasClear | 说明: 是否出现清除按钮", + "en_US": "prop: hasClear | description: show clear icon" + } + }, + "setter": "BoolSetter", + "description": "是否出现清除按钮" + }, + { + "name": "disabled", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否禁用", + "en_US": "Disabled" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: disabled | 说明: 是否被禁用", + "en_US": "prop: disabled | description: disabled" + } + }, + "setter": "BoolSetter", + "description": "是否禁用" + }, + { + "name": "hasLimitHint", + "title": { + "label": { + "type": "i18n", + "zh_CN": "展示限制", + "en_US": "ShowLimit" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasLimitHint | 说明: 是否展现最大长度样式", + "en_US": "prop: hasLimitHint | description: hasLimitHint" + } + }, + "setter": "BoolSetter", + "description": "是否展现最大长度样式" + }, + { + "name": "cutString", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否截断", + "en_US": "Cut Off" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: cutString | 说明: 是否截断超出字符串", + "en_US": "prop: cutString | description: whether cut off string" + } + }, + "setter": "BoolSetter", + "description": "是否截断超出字符串" + }, + { + "name": "readOnly", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否只读", + "en_US": "ReadOnly" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: readOnly | 说明: 是否只读", + "en_US": "prop: readOnly | description: ReadOnly" + } + }, + "setter": "BoolSetter", + "description": "是否只读" + }, + { + "name": "trim", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否 Trim", + "en_US": "Trim" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: trim | 说明: onChange返回会自动去除头尾空字符", + "en_US": "prop: trim | description: whether trim when onChange called" + } + }, + "setter": "BoolSetter" + }, + { + "name": "hasBorder", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示边框", + "en_US": "ShowBorder" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasBorder | 说明: 是否有边框", + "en_US": "prop: hasBorder | description: HasBorder" + } + }, + "setter": "BoolSetter" + }, + { + "name": "autoFocus", + "title": { + "label": { + "type": "i18n", + "zh_CN": "自动聚焦", + "en_US": "Auto Focus" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: autoFocus | 说明: 自动聚焦", + "en_US": "prop: autoFocus | description: autoFocus" + } + }, + "setter": "BoolSetter", + "description": "自动聚焦" + }, + { + "name": "hint", + "title": { + "label": { + "type": "i18n", + "zh_CN": "Icon 水印", + "en_US": "IconHint" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hint | 说明: Icon 水印", + "en_US": "prop: hint | description: Icon hint" + } + }, + "setter": { + "componentName": "IconSetter" + } + }, + { + "name": "innerBefore", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文字前附加内容", + "en_US": "Inner Before" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: innerBefore | 说明: 文字前附加内容", + "en_US": "prop: innerBefore | description: innerBefore" + } + }, + "setter": "StringSetter" + }, + { + "name": "innerAfter", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文字后附加内容", + "en_US": "Inner After" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: innerAfter | 说明: 文字后附加内容", + "en_US": "prop: innerAfter | description: innerAfter" + } + }, + "setter": "StringSetter" + }, + { + "name": "addonBefore", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入框前附加内容", + "en_US": "Addon Before" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: addonBefore | 说明: 输入框前附加内容", + "en_US": "prop: addonBefore | description: addonBefore" + } + }, + "setter": "StringSetter" + }, + { + "name": "addonAfter", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入框后附加内容", + "en_US": "Addon After" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: addonAfter | 说明: 输入框后附加内容", + "en_US": "prop: addonAfter | description: addonAfter" + } + }, + "setter": "StringSetter" + }, + { + "name": "addonTextBefore", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入框前附加文字", + "en_US": "Text Before" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: addonTextBefore | 说明: 输入框前附加文字", + "en_US": "prop: addonTextBefore | description: addonTextBefore" + } + }, + "setter": "StringSetter" + }, + { + "name": "addonTextAfter", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入框后附加文字", + "en_US": "Text After" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: addonTextAfter | 说明: 输入框后附加文字", + "en_US": "prop: addonTextAfter | description: addonTextAfter" + } + }, + "setter": "StringSetter" + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ], + "supports": { + "style": true, + "events": ["onPressEnter", "onClear", "onChange", "onKeyDown", "onFocus", "onBlur"] + } + }, + "category": "基础" + }, + { + "componentName": "Input.TextArea", + "title": "多行文本框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Input", + "main": "", + "destructuring": true, + "subName": "TextArea" + }, + "props": [ + { + "name": "hasBorder", + "propType": "bool", + "description": "是否有边框", + "defaultValue": true + }, + { + "name": "state", + "propType": { + "type": "oneOf", + "value": ["error", "warning"] + }, + "description": "状态\n@enumdesc 错误" + }, + { + "name": "autoHeight", + "propType": "bool", + "description": "自动高度 true / {minRows: 2, maxRows: 4}", + "defaultValue": false + }, + { + "name": "rows", + "propType": "number", + "description": "多行文本框高度
(不要直接用height设置多行文本框的高度, ie9 10会有兼容性问题)", + "defaultValue": 4 + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态", + "defaultValue": false + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "onClear", + "propType": "func" + }, + { + "name": "onChange", + "propType": "func" + }, + { + "name": "onKeyDown", + "propType": "func" + }, + { + "name": "onFocus", + "propType": "func" + }, + { + "name": "onBlur", + "propType": "func" + } + ], + "configure": { + "props": [ + { + "name": "rows", + "title": { + "label": { + "type": "i18n", + "zh_CN": "行数", + "en_US": "Rows" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: rows | 说明: 多行文本框高度
(不要直接用height设置多行文本框的高度, ie9 10会有兼容性问题)", + "en_US": "prop: rows | description: row numbers" + } + }, + "setter": "NumberSetter", + "defaultValue": 4 + }, + { + "name": "maxLength", + "title": { + "label": { + "type": "i18n", + "zh_CN": "最大长度", + "en_US": "MaxLength" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: maxLength | 说明: 最大长度", + "en_US": "prop: maxLength | description: max length" + } + }, + "setter": "NumberSetter", + "description": "最大长度" + }, + { + "name": "placeholder", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入提示", + "en_US": "Placeholder" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: placeholder | 说明: 输入提示", + "en_US": "prop: placeholder | description: placeholder" + } + }, + "setter": "StringSetter" + }, + { + "name": "state", + "title": { + "label": { + "type": "i18n", + "zh_CN": "状态", + "en_US": "State" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: state | 说明: 状态\n@enumdesc 错误", + "en_US": "prop: state | description: input state" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["error", "warning"] + } + } + }, + { + "name": "autoHeight", + "title": { + "label": { + "type": "i18n", + "zh_CN": "自动高度", + "en_US": "Auto Height" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: autoHeight | 说明: 自动高度 true / {minRows: 2, maxRows: 4}", + "en_US": "prop: autoHeight | description: auto height" + } + }, + "setter": "BoolSetter", + "defaultValue": false + }, + { + "name": "isPreview", + "title": { + "label": { + "type": "i18n", + "zh_CN": "预览态", + "en_US": "Preview" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: isPreview | 说明: 是否为预览态", + "en_US": "prop: isPreview | description: preview" + } + }, + "setter": "BoolSetter", + "defaultValue": false + }, + { + "name": "disabled", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否禁用", + "en_US": "Disabled" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: disabled | 说明: 是否被禁用", + "en_US": "prop: disabled | description: disabled" + } + }, + "setter": "BoolSetter", + "description": "是否禁用" + }, + { + "name": "hasLimitHint", + "title": { + "label": { + "type": "i18n", + "zh_CN": "展示限制", + "en_US": "ShowLimit" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasLimitHint | 说明: 是否展现最大长度样式", + "en_US": "prop: hasLimitHint | description: hasLimitHint" + } + }, + "setter": "BoolSetter", + "description": "是否展现最大长度样式" + }, + { + "name": "cutString", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否截断", + "en_US": "Cut Off" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: cutString | 说明: 是否截断超出字符串", + "en_US": "prop: cutString | description: whether cut off string" + } + }, + "setter": "BoolSetter", + "description": "是否截断超出字符串" + }, + { + "name": "readOnly", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否只读", + "en_US": "ReadOnly" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: readOnly | 说明: 是否只读", + "en_US": "prop: readOnly | description: ReadOnly" + } + }, + "setter": "BoolSetter", + "description": "是否只读" + }, + { + "name": "trim", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否 Trim", + "en_US": "Trim" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: trim | 说明: onChange返回会自动去除头尾空字符", + "en_US": "prop: trim | description: whether trim when onChange called" + } + }, + "setter": "BoolSetter" + }, + { + "name": "hasBorder", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示边框", + "en_US": "ShowBorder" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasBorder | 说明: 是否有边框", + "en_US": "prop: hasBorder | description: HasBorder" + } + }, + "setter": "BoolSetter" + }, + { + "name": "autoFocus", + "title": { + "label": { + "type": "i18n", + "zh_CN": "自动聚焦", + "en_US": "Auto Focus" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: autoFocus | 说明: 自动聚焦", + "en_US": "prop: autoFocus | description: autoFocus" + } + }, + "setter": "BoolSetter", + "description": "自动聚焦" + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ], + "supports": { + "style": true, + "events": ["onPressEnter", "onClear", "onChange", "onKeyDown", "onFocus", "onBlur"] + } + }, + "category": "基础" + }, + { + "componentName": "Input", + "title": "输入框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Input", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "label", + "propType": "string", + "title": "标签文案", + "description": "label" + }, + { + "name": "id", + "propType": "string", + "description": "ID" + }, + { + "name": "name", + "propType": "string" + }, + { + "name": "hasClear", + "propType": "bool", + "description": "是否出现清除按钮" + }, + { + "name": "state", + "title": "状态", + "propType": { + "type": "oneOf", + "value": ["error", "loading", "success", "warning"] + }, + "description": "状态\n@enumdesc 错误, 校验中, 成功, 警告" + }, + { + "name": "size", + "title": "尺寸", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "尺寸\n@enumdesc 小, 中, 大", + "defaultValue": "medium" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "maxLength", + "propType": "number", + "description": "最大长度" + }, + { + "name": "hasLimitHint", + "propType": "bool", + "description": "是否展现最大长度样式" + }, + { + "name": "cutString", + "propType": "bool", + "description": "是否截断超出字符串" + }, + { + "name": "readOnly", + "propType": "bool", + "description": "是否只读" + }, + { + "name": "trim", + "propType": "bool", + "description": "onChange返回会自动去除头尾空字符" + }, + { + "name": "placeholder", + "propType": "string", + "description": "输入提示" + }, + { + "name": "hasBorder", + "propType": "bool", + "description": "是否有边框" + }, + { + "name": "onPressEnter", + "propType": "func", + "description": "按下回车的回调" + }, + { + "name": "onClear", + "propType": "func" + }, + { + "name": "onChange", + "propType": "func" + }, + { + "name": "onKeyDown", + "propType": "func" + }, + { + "name": "onFocus", + "propType": "func" + }, + { + "name": "onBlur", + "propType": "func" + }, + { + "name": "hint", + "title": "Icon 水印", + "propType": "string", + "description": "水印 (Icon的type类型，和hasClear占用一个地方)" + }, + { + "name": "innerBefore", + "propType": "string", + "description": "文字前附加内容" + }, + { + "name": "innerAfter", + "propType": "string", + "description": "文字后附加内容" + }, + { + "name": "addonBefore", + "propType": "string", + "description": "输入框前附加内容" + }, + { + "name": "addonAfter", + "propType": "string", + "description": "输入框后附加内容" + }, + { + "name": "addonTextBefore", + "propType": "string", + "description": "输入框前附加文字" + }, + { + "name": "addonTextAfter", + "propType": "string", + "description": "输入框后附加文字" + }, + { + "name": "autoFocus", + "propType": "bool", + "description": "自动聚焦" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": [ + { + "name": "label", + "setter": "StringSetter", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签文本", + "en_US": "Label" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: label | 说明: 标签文本内容", + "en_US": "prop: label | description: label content" + } + }, + "description": "label" + }, + { + "name": "placeholder", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入提示", + "en_US": "Placeholder" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: placeholder | 说明: 输入提示", + "en_US": "prop: placeholder | description: placeholder" + } + }, + "setter": "StringSetter" + }, + { + "name": "state", + "title": { + "label": { + "type": "i18n", + "zh_CN": "状态", + "en_US": "State" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: state | 说明: 状态\n@enumdesc 错误, 校验中, 成功, 警告", + "en_US": "prop: state | description: input state" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["error", "loading", "success", "warning"] + } + } + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 尺寸\n@enumdesc 小, 中, 大", + "en_US": "prop: size | description: size" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "defaultValue": "medium" + }, + { + "name": "maxLength", + "title": { + "label": { + "type": "i18n", + "zh_CN": "最大长度", + "en_US": "MaxLength" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: maxLength | 说明: 最大长度", + "en_US": "prop: maxLength | description: max length" + } + }, + "setter": "NumberSetter", + "description": "最大长度" + }, + { + "name": "hasClear", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示清除", + "en_US": "Show Clear" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasClear | 说明: 是否出现清除按钮", + "en_US": "prop: hasClear | description: show clear icon" + } + }, + "setter": "BoolSetter", + "description": "是否出现清除按钮" + }, + { + "name": "disabled", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否禁用", + "en_US": "Disabled" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: disabled | 说明: 是否被禁用", + "en_US": "prop: disabled | description: disabled" + } + }, + "setter": "BoolSetter", + "description": "是否禁用" + }, + { + "name": "hasLimitHint", + "title": { + "label": { + "type": "i18n", + "zh_CN": "展示限制", + "en_US": "ShowLimit" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasLimitHint | 说明: 是否展现最大长度样式", + "en_US": "prop: hasLimitHint | description: hasLimitHint" + } + }, + "setter": "BoolSetter", + "description": "是否展现最大长度样式" + }, + { + "name": "cutString", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否截断", + "en_US": "Cut Off" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: cutString | 说明: 是否截断超出字符串", + "en_US": "prop: cutString | description: whether cut off string" + } + }, + "setter": "BoolSetter", + "description": "是否截断超出字符串" + }, + { + "name": "readOnly", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否只读", + "en_US": "ReadOnly" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: readOnly | 说明: 是否只读", + "en_US": "prop: readOnly | description: ReadOnly" + } + }, + "setter": "BoolSetter", + "description": "是否只读" + }, + { + "name": "trim", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否 Trim", + "en_US": "Trim" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: trim | 说明: onChange返回会自动去除头尾空字符", + "en_US": "prop: trim | description: whether trim when onChange called" + } + }, + "setter": "BoolSetter" + }, + { + "name": "hasBorder", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示边框", + "en_US": "ShowBorder" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hasBorder | 说明: 是否有边框", + "en_US": "prop: hasBorder | description: HasBorder" + } + }, + "setter": "BoolSetter" + }, + { + "name": "autoFocus", + "title": { + "label": { + "type": "i18n", + "zh_CN": "自动聚焦", + "en_US": "Auto Focus" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: autoFocus | 说明: 自动聚焦", + "en_US": "prop: autoFocus | description: autoFocus" + } + }, + "setter": "BoolSetter", + "description": "自动聚焦" + }, + { + "name": "hint", + "title": { + "label": { + "type": "i18n", + "zh_CN": "Icon 水印", + "en_US": "IconHint" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: hint | 说明: Icon 水印", + "en_US": "prop: hint | description: Icon hint" + } + }, + "setter": { + "componentName": "IconSetter" + } + }, + { + "name": "innerBefore", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文字前附加内容", + "en_US": "Inner Before" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: innerBefore | 说明: 文字前附加内容", + "en_US": "prop: innerBefore | description: innerBefore" + } + }, + "setter": "StringSetter" + }, + { + "name": "innerAfter", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文字后附加内容", + "en_US": "Inner After" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: innerAfter | 说明: 文字后附加内容", + "en_US": "prop: innerAfter | description: innerAfter" + } + }, + "setter": "StringSetter" + }, + { + "name": "addonBefore", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入框前附加内容", + "en_US": "Addon Before" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: addonBefore | 说明: 输入框前附加内容", + "en_US": "prop: addonBefore | description: addonBefore" + } + }, + "setter": "StringSetter" + }, + { + "name": "addonAfter", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入框后附加内容", + "en_US": "Addon After" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: addonAfter | 说明: 输入框后附加内容", + "en_US": "prop: addonAfter | description: addonAfter" + } + }, + "setter": "StringSetter" + }, + { + "name": "addonTextBefore", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入框前附加文字", + "en_US": "Text Before" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: addonTextBefore | 说明: 输入框前附加文字", + "en_US": "prop: addonTextBefore | description: addonTextBefore" + } + }, + "setter": "StringSetter" + }, + { + "name": "addonTextAfter", + "display": "block", + "title": { + "label": { + "type": "i18n", + "zh_CN": "输入框后附加文字", + "en_US": "Text After" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: addonTextAfter | 说明: 输入框后附加文字", + "en_US": "prop: addonTextAfter | description: addonTextAfter" + } + }, + "setter": "StringSetter" + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ], + "supports": { + "style": true, + "events": ["onPressEnter", "onClear", "onChange", "onKeyDown", "onFocus", "onBlur"] + } + }, + "icon": "", + "category": "内容" + }, + { + "title": "折线图", + "category": "常用图表(试验)", + "componentName": "LineChart", + "icon": "https://unpkg.alibaba-inc.com/@ali/vc-bizcharts@1.1.4/src/vc-line/logo.svg", + "npm": { + "package": "bizcharts", + "version": "4.0.14", + "exportName": "LineChart", + "main": "", + "destructuring": true, + "subName": "" + }, + "configure": { + "props": [ + { + "name": "title", + "title": "标题", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "折线图标题", + "tip": "标题文本", + "supportVariable": true + }, + { + "name": "description", + "title": "描述", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "折线图描述", + "tip": "描述文本", + "supportVariable": true + }, + { + "name": "xField", + "title": "横坐标", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "year", + "tip": "标题文本", + "supportVariable": true + }, + { + "name": "yField", + "title": "纵坐标", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "value", + "tip": "描述文本", + "supportVariable": true + }, + { + "name": "data", + "title": "图表数据", + "tip": "配置图表数据", + "setter": "JsonSetter" + } + ], + "supports": { + "style": true + } + } + }, + { + "title": "折线", + "category": "常用图表(试验)", + "componentName": "Line", + "icon": "https://unpkg.alibaba-inc.com/@ali/vc-bizcharts@1.1.4/src/vc-line/logo.svg", + "npm": { + "package": "@ant-design/charts", + "version": "4.0.14", + "exportName": "Line", + "main": "", + "destructuring": true, + "subName": "" + }, + "configure": { + "props": [ + { + "name": "title", + "title": "标题", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "2018年爆款商品A销售趋势", + "tip": "标题文本", + "supportVariable": true + }, + { + "name": "description", + "title": "描述", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "一达通进出口业务", + "tip": "描述文本", + "supportVariable": true + }, + { + "name": "xField", + "title": "横坐标", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "year", + "tip": "标题文本", + "supportVariable": true + }, + { + "name": "yField", + "title": "纵坐标", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "value", + "tip": "描述文本", + "supportVariable": true + }, + { + "name": "data", + "title": "图表数据", + "tip": "配置图表数据", + "setter": "JsonSetter" + } + ], + "supports": { + "style": true + } + } + }, + { + "title": "水位图", + "category": "常用图表(试验)", + "componentName": "LiquidChart", + "icon": "https://unpkg.alibaba-inc.com/@ali/vc-bizcharts@1.1.4/src/vc-LiquidChart/logo.svg", + "npm": { + "package": "bizcharts", + "version": "4.0.14", + "exportName": "LiquidChart", + "main": "", + "destructuring": true, + "subName": "" + }, + "configure": { + "props": [ + { + "name": "title", + "title": "标题", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "水位图标题", + "tip": "标题文本", + "supportVariable": true + }, + { + "name": "description", + "title": "描述", + "display": "inline", + "setter": "StringSetter", + "defaultValue": "水位图描述", + "tip": "描述文本", + "supportVariable": true + }, + { + "name": "dataSource", + "title": "图表数据", + "type": "group", + "display": "block", + "tip": "配置图表数据", + "items": [ + { + "name": "min", + "title": "最小值", + "setter": "NumberSetter" + }, + { + "name": "max", + "title": "最大值", + "setter": "NumberSetter" + }, + { + "name": "value", + "title": "值", + "setter": "NumberSetter" + } + ] + } + ], + "supports": { + "style": true + } + } + }, + { + "componentName": "List.Item", + "title": "列表项", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "List", + "main": "", + "destructuring": true, + "subName": "Item" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "title", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + } + }, + { + "name": "description", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + } + }, + { + "name": "media", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + } + }, + { + "name": "extra", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + } + } + ], + "icon": "", + "category": "内容" + }, + { + "componentName": "List", + "title": "列表", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "List", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "header", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + } + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium"] + } + }, + { + "name": "footer", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + } + }, + { + "name": "divider", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + } + } + ], + "configure": { + "component": { + "isContainer": true + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Loading", + "title": "加载", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Loading", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "tip", + "propType": "string", + "description": "自定义内容" + }, + { + "name": "tipAlign", + "propType": { + "type": "oneOf", + "value": ["right", "bottom"] + }, + "description": "自定义内容位置", + "defaultValue": "bottom" + }, + { + "name": "visible", + "propType": "bool", + "description": "loading 状态, 默认 true", + "defaultValue": true + }, + { + "name": "onVisibleChange", + "propType": "func" + }, + { + "name": "className", + "propType": "string", + "description": "自定义class" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["large", "medium"] + }, + "description": "设置动画尺寸\n@description 仅仅对默认动画效果起作用\n@enumdesc 大号, 中号", + "defaultValue": "large" + }, + { + "name": "color", + "propType": "string", + "description": "动画颜色" + }, + { + "name": "fullScreen", + "propType": "bool", + "description": "全屏展示" + }, + { + "name": "inline", + "title": "inline", + "propType": "bool", + "description": "should loader be displayed inline", + "defaultValue": true + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": [ + { + "name": "tip", + "title": { + "label": "自定义内容", + "tip": "" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + } + }, + { + "name": "tipAlign", + "title": { + "label": "内容位置", + "tip": "自定义内容位置" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "动画右边", + "value": "right" + }, + { + "title": "动画下面", + "value": "bottom" + } + ] + } + } + }, + { + "name": "visible", + "title": { + "label": "是否显示" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + } + }, + { + "name": "size", + "title": { + "label": "动画尺寸" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "large", + "value": "large" + }, + { + "title": "medium", + "value": "medium" + } + ] + } + } + }, + { + "name": "color", + "title": "动画颜色", + "setter": { + "componentName": "ColorSetter" + } + }, + { + "name": "fullScreen", + "title": "全屏显示", + "setter": "BoolSetter" + }, + { + "name": "inline", + "title": "行内显示", + "setter": "BoolSetter" + } + ], + "supports": { + "style": true, + "events": ["onVisibleChange"] + } + }, + "icon": "", + "category": "反馈" + }, + { + "componentName": "MenuButton", + "title": "菜单按钮", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "MenuButton", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "label", + "propType": "string", + "description": "按钮上的文本内容" + }, + { + "name": "autoWidth", + "propType": "bool", + "description": "弹层是否与按钮宽度相同", + "defaultValue": true + }, + { + "name": "popupTriggerType", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "弹层触发方式", + "defaultValue": "click" + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器" + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层展开状态" + }, + { + "name": "defaultVisible", + "propType": "bool", + "description": "弹层默认是否展开" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层在显示和隐藏触发的事件" + }, + { + "name": "popupStyle", + "propType": "object", + "description": "弹层自定义样式" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹层自定义样式类" + }, + { + "name": "popupProps", + "propType": "object", + "description": "弹层属性透传" + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "defaultSelectedKeys", + "propType": { + "type": "arrayOf", + "value": "string" + }, + "description": "默认激活的菜单项（用法同 Menu 非受控）", + "defaultValue": [] + }, + { + "name": "selectedKeys", + "propType": { + "type": "arrayOf", + "value": "string" + }, + "description": "激活的菜单项（用法同 Menu 受控）" + }, + { + "name": "selectMode", + "propType": { + "type": "oneOf", + "value": ["single", "multiple"] + }, + "description": "菜单的选择模式，同 Menu" + }, + { + "name": "onItemClick", + "propType": "func", + "description": "点击菜单项后的回调，同 Menu" + }, + { + "name": "onSelect", + "propType": "func", + "description": "选择菜单后的回调，同 Menu" + }, + { + "name": "menuProps", + "propType": "object", + "description": "菜单属性透传" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "popupContainer", + "title": { + "label": "弹层容器", + "tip": "指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数()。" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "FunctionSetter"] + } + } + } + ] + } + }, + "icon": "", + "category": "常用" + }, + { + "componentName": "Menu.Divider", + "title": "菜单分隔线", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Menu", + "main": "", + "destructuring": true, + "subName": "Divider" + }, + "props": [ + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": false, + "nestingRule": { + "parentWhitelist": ["Menu", "SubMenu", "Menu.Group", "MenuButton"] + } + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Menu.Group", + "title": "菜单组", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Menu", + "main": "", + "destructuring": true, + "subName": "Group" + }, + "props": [ + { + "name": "label", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "标签内容" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["Menu", "SubMenu", "Menu.Group", "MenuButton"] + } + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Menu.Item", + "title": "菜单项", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Menu", + "main": "", + "destructuring": true, + "subName": "Item" + }, + "props": [ + { + "name": "key", + "propType": "string", + "description": "菜单项标识符" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "helper", + "propType": "node", + "description": "帮助文本" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["Menu", "SubMenu", "Menu.Group", "MenuButton"] + } + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Menu.PopupItem", + "title": "自定义弹出内容", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Menu", + "main": "", + "destructuring": true, + "subName": "PopupItem" + }, + "props": [ + { + "name": "key", + "propType": "string", + "description": "菜单项标识符" + }, + { + "name": "label", + "propType": "node", + "description": "标签内容" + }, + { + "name": "children", + "propType": "node", + "description": "自定义弹层内容" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["Menu", "SubMenu", "Menu.Group", "MenuButton"] + } + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Menu", + "title": "菜单", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Menu", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "onItemClick", + "propType": "func", + "description": "点击菜单项触发的回调函数\n@param {String} key 点击的菜单项的 key 值\n@param {Object} item 点击的菜单项对象\n@param {Object} event 点击的事件对象" + }, + { + "name": "defaultOpenAll", + "propType": "bool", + "description": "初始展开所有的子菜单，只在 mode 设置为 'inline' 以及 openMode 设置为 'multiple' 下生效，优先级高于 defaultOpenKeys", + "defaultValue": false + }, + { + "name": "onOpen", + "propType": "func", + "description": "打开或关闭子菜单触发的回调函数\n@param {String} key 打开的所有子菜单的 key 值\n@param {Object} extra 额外参数\n@param {String} extra.key 当前操作子菜单的 key 值\n@param {Boolean} extra.open 是否是打开" + }, + { + "name": "mode", + "propType": { + "type": "oneOf", + "value": ["inline", "popup"] + }, + "description": "子菜单打开的模式", + "defaultValue": "inline" + }, + { + "name": "triggerType", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "子菜单打开的触发行为", + "defaultValue": "click" + }, + { + "name": "openMode", + "propType": { + "type": "oneOf", + "value": ["single", "multiple"] + }, + "description": "展开内连子菜单的模式，同时可以展开一个子菜单还是多个子菜单，该属性仅在 mode 为 inline 时生效", + "defaultValue": "multiple" + }, + { + "name": "inlineIndent", + "propType": "number", + "description": "内连子菜单缩进距离", + "defaultValue": 20 + }, + { + "name": "inlineArrowDirection", + "propType": { + "type": "oneOf", + "value": ["down", "right"] + }, + "defaultValue": "down" + }, + { + "name": "popupAutoWidth", + "propType": "bool", + "description": "是否自动让弹层的宽度和菜单项保持一致，如果弹层的宽度比菜单项小则和菜单项保持一致，如果宽度大于菜单项则不做处理", + "defaultValue": false + }, + { + "name": "popupAlign", + "propType": { + "type": "oneOf", + "value": ["follow", "outside"] + }, + "description": "弹层的对齐方式", + "defaultValue": "follow" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹出子菜单自定义 className" + }, + { + "name": "onSelect", + "propType": "func", + "description": "选中或取消选中菜单项触发的回调函数\n@param {Array} selectedKeys 选中的所有菜单项的值\n@param {Object} item 选中或取消选中的菜单项\n@param {Object} extra 额外参数\n@param {Boolean} extra.select 是否是选中\n@param {Array} extra.key 菜单项的 key\n@param {Object} extra.label 菜单项的文本\n@param {Array} extra.keyPath 菜单项 key 的路径" + }, + { + "name": "selectMode", + "propType": { + "type": "oneOf", + "value": ["single", "multiple"] + }, + "description": "选中模式，单选还是多选，默认无值，不可选" + }, + { + "name": "shallowSelect", + "propType": "bool", + "description": "是否只能选择第一层菜单项（不能选择子菜单中的菜单项）", + "defaultValue": false + }, + { + "name": "hasSelectedIcon", + "propType": "bool", + "description": "是否显示选中图标，如果设置为 false 需配合配置平台设置选中时的背景色以示区分", + "defaultValue": true + }, + { + "name": "labelToggleChecked", + "propType": "bool", + "defaultValue": true + }, + { + "name": "isSelectIconRight", + "propType": "bool", + "description": "是否将选中图标居右，仅当 hasSelectedIcon 为true 时生效。\n注意：SubMenu 上的选中图标一直居左，不受此API控制", + "defaultValue": false + }, + { + "name": "direction", + "propType": { + "type": "oneOf", + "value": ["ver", "hoz"] + }, + "description": "菜单第一层展示方向", + "defaultValue": "ver" + }, + { + "name": "hozAlign", + "propType": { + "type": "oneOf", + "value": ["left", "right"] + }, + "description": "横向菜单条 item 和 footer 的对齐方向，在 direction 设置为 'hoz' 并且 header 存在时生效", + "defaultValue": "left" + }, + { + "name": "hozInLine", + "propType": "bool", + "description": "横向菜单模式下，是否维持在一行，即超出一行折叠成 SubMenu 显示， 仅在 direction='hoz' mode='popup' 时生效", + "defaultValue": false + }, + { + "name": "header", + "propType": "node", + "description": "自定义菜单头部" + }, + { + "name": "footer", + "propType": "node", + "description": "自定义菜单尾部" + }, + { + "name": "autoFocus", + "propType": "bool", + "description": "是否自动获得焦点", + "defaultValue": false + }, + { + "name": "focusedKey", + "propType": "string", + "description": "当前获得焦点的子菜单或菜单项 key 值" + }, + { + "name": "focusable", + "propType": "bool", + "defaultValue": true + }, + { + "name": "onItemFocus", + "propType": "func" + }, + { + "name": "onBlur", + "propType": "func" + }, + { + "name": "embeddable", + "propType": "bool", + "description": "是否开启嵌入式模式，一般用于Layout的布局中，开启后没有默认背景、外层border、box-shadow，可以配合`` 自定义高度", + "defaultValue": false + }, + { + "name": "onItemKeyDown", + "propType": "func" + }, + { + "name": "expandAnimation", + "propType": "bool", + "defaultValue": true + }, + { + "name": "itemClassName", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "openKeys", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "arrayOf", + "value": "string" + } + ] + }, + "description": "当前打开的子菜单的 key 值" + }, + { + "name": "defaultOpenKeys", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "arrayOf", + "value": "string" + } + ] + }, + "description": "初始打开的子菜单的 key 值", + "defaultValue": [] + }, + { + "name": "selectedKeys", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "arrayOf", + "value": "string" + } + ] + }, + "description": "当前选中菜单项的 key 值" + }, + { + "name": "defaultSelectedKeys", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "arrayOf", + "value": "string" + } + ] + }, + "description": "初始选中菜单项的 key 值", + "defaultValue": [] + } + ], + "configure": { + "component": { + "isContainer": true + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "MonthPicker", + "title": "MonthPicker", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "DatePicker", + "main": "", + "destructuring": true, + "subName": "MonthPicker" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "label", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "输入框内置标签" + }, + { + "name": "state", + "propType": { + "type": "oneOf", + "value": ["success", "loading", "error"] + }, + "description": "输入框状态" + }, + { + "name": "placeholder", + "propType": "string", + "description": "输入提示" + }, + { + "name": "defaultVisibleYear", + "propType": "func", + "description": "默认展现的年\n@return {MomentObject} 返回包含指定年份的 moment 对象实例" + }, + { + "name": "value", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "日期值（受控）moment 对象" + }, + { + "name": "defaultValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "初始日期值，moment 对象" + }, + { + "name": "format", + "propType": "string", + "description": "日期值的格式（用于限定用户输入和展示）", + "defaultValue": "YYYY-MM" + }, + { + "name": "disabledDate", + "propType": "func", + "description": "禁用日期函数\n@param {MomentObject} 日期值\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\n@return {Boolean} 是否禁用" + }, + { + "name": "footerRender", + "propType": "func", + "description": "自定义面板页脚\n@return {Node} 自定义的面板页脚组件" + }, + { + "name": "onChange", + "propType": "func", + "description": "日期值改变时的回调\n@param {MomentObject|String} value 日期值" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "输入框尺寸", + "defaultValue": "medium" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "hasClear", + "propType": "bool", + "description": "是否显示清空按钮", + "defaultValue": true + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层显示状态" + }, + { + "name": "defaultVisible", + "propType": "bool", + "description": "弹层默认是否显示" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层展示状态变化时的回调\n@param {Boolean} visible 弹层是否显示\n@param {String} type 触发弹层显示和隐藏的来源 calendarSelect 表示由日期表盘的选择触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "popupTriggerType", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "弹层触发方式", + "defaultValue": "click" + }, + { + "name": "popupAlign", + "propType": "string", + "description": "弹层对齐方式, 具体含义见 OverLay文档", + "defaultValue": "tl tl" + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + }, + { + "name": "popupStyle", + "propType": "object", + "description": "弹层自定义样式" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹层自定义样式类" + }, + { + "name": "popupProps", + "propType": "object", + "description": "弹层其他属性" + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "inputProps", + "propType": "object", + "description": "输入框其他属性" + }, + { + "name": "monthCellRender", + "propType": "func", + "description": "自定义月份渲染函数\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@returns {ReactNode}" + }, + { + "name": "yearCellRender", + "propType": "func" + }, + { + "name": "dateInputAriaLabel", + "propType": "string", + "description": "日期输入框的 aria-label 属性" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态" + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {MomentObject} value 月份" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "name", + "propType": "string" + }, + { + "name": "popupComponent", + "propType": { + "type": "instanceOf", + "value": "elementType" + } + }, + { + "name": "popupContent", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "Nav.Item", + "title": "导航项", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Nav", + "main": "", + "destructuring": true, + "subName": "Item" + }, + "props": [ + { + "name": "icon", + "propType": { + "type": "icon" + }, + "description": "自定义图标" + }, + { + "name": "children", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "description": "导航内容" + }, + { + "name": "style", + "propType": "object" + } + ], + "icon": "", + "category": "导航" + }, + { + "componentName": "Nav", + "title": "导航", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Nav", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "children", + "propType": "node", + "description": "导航项和子导航" + }, + { + "name": "type", + "propType": { + "type": "oneOf", + "value": ["normal", "primary", "secondary", "line"] + }, + "description": "导航类型", + "defaultValue": "normal" + }, + { + "name": "direction", + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "导航布局", + "defaultValue": "ver" + }, + { + "name": "hozAlign", + "propType": { + "type": "oneOf", + "value": ["left", "right"] + }, + "description": "对齐方向", + "defaultValue": "left" + }, + { + "name": "activeDirection", + "propType": { + "type": "oneOf", + "value": [null, "top", "bottom", "left", "right"] + }, + "description": "选中条方向" + }, + { + "name": "mode", + "propType": { + "type": "oneOf", + "value": ["inline", "popup"] + }, + "description": "子导航打开的模式", + "defaultValue": "inline" + }, + { + "name": "triggerType", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "子导航打开的触发方式", + "defaultValue": "click" + }, + { + "name": "inlineIndent", + "propType": "number", + "description": "内联子导航缩进距离", + "defaultValue": 20 + }, + { + "name": "defaultOpenAll", + "propType": "bool", + "description": "初始展开所有的子导航", + "defaultValue": false + }, + { + "name": "openMode", + "propType": { + "type": "oneOf", + "value": ["single", "multiple"] + }, + "description": "内联子导航的展开模式", + "defaultValue": "multiple" + }, + { + "name": "selectedKeys", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "instanceOf", + "value": "array" + } + ] + }, + "description": "当前选中导航key值" + }, + { + "name": "defaultSelectedKeys", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "instanceOf", + "value": "array" + } + ] + }, + "description": "初始选中导航项的key值" + }, + { + "name": "onSelect", + "propType": "func", + "description": "选中或取消选中导航项触发的回调函数\n@param {Array} selectedKeys 选中的所有导航项的 key\n@param {Object} item 选中或取消选中的导航项\n@param {Object} extra 额外参数\n@param {Boolean} extra.select 是否是选中\n@param {Array} extra.key 导航项的 key\n@param {Object} extra.label 导航项的文本\n@param {Array} extra.keyPath 导航项 key 的路径" + }, + { + "name": "popupAlign", + "propType": { + "type": "oneOf", + "value": ["follow", "outside"] + }, + "description": "弹出子导航的对齐方式（水平导航只支持 follow ）\n@eumdesc Item 顶端对齐, Nav 顶端对齐", + "defaultValue": "follow" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹出子导航的自定义类名" + }, + { + "name": "iconOnly", + "propType": "bool", + "description": "是否只显示图标" + }, + { + "name": "hasArrow", + "propType": "bool", + "description": "是否显示右侧的箭头", + "defaultValue": true + }, + { + "name": "hasTooltip", + "propType": "bool", + "description": "是否有ToolTips", + "defaultValue": false + }, + { + "name": "header", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "自定义导航头部" + }, + { + "name": "footer", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "自定义导航尾部" + }, + { + "name": "embeddable", + "propType": "bool", + "description": "开启嵌入式模式", + "defaultValue": false + } + ], + "configure": { + "component": { + "isContainer": true + } + }, + "icon": "", + "category": "导航" + }, + { + "componentName": "NextBlockCell", + "title": "子区块", + "category": "容器", + "npm": { + "package": "@alife/container", + "version": "0.3.7", + "exportName": "Block", + "main": "lib/index.js", + "destructuring": true, + "subName": "Cell" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "prefix", + "propType": "string" + }, + { + "name": "colSpan", + "propType": "number" + }, + { + "name": "rowSpan", + "propType": "number" + }, + { + "name": "content", + "propType": "node" + }, + { + "name": "title", + "propType": "node" + }, + { + "name": "extra", + "propType": "node" + } + ], + "configure": { + "component": { + "isContainer": true, + "disableBehaviors": "*" + }, + "props": [ + { + "name": "isAutoContainer", + "initialValue": true, + "defaultValue": true, + "setter": "BoolSetter", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "primaryKey", + "title": "项目编号", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "initialValue": { + "type": "JSFunction", + "value": "val => {\n if (val) return val;\n return String(Math.floor(Math.random() * 10000));\n }" + }, + "setter": "StringSetter" + }, + { + "name": "title", + "title": "标题", + "initialValue": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "setter": "StringSetter" + }, + { + "name": "colSpan", + "title": { + "label": "宽度(几列)", + "tip": "水平方向上占几列 (单位/份数, 最大12)" + }, + "display": "inline", + "initialValue": 1, + "setter": { + "componentName": "NumberSetter", + "props": { + "min": 1, + "max": 12, + "defaultValue": 1 + } + } + }, + { + "name": "rowSpan", + "title": { + "label": "高度(几行)", + "tip": "垂直方向占几行 (单位/份数)" + }, + "tip": "横向占的栅格数，1代表1行", + "initialValue": 1, + "setter": { + "componentName": "NumberSetter", + "props": { + "min": 1, + "max": 12, + "defaultValue": 1 + } + } + } + ] + }, + "experimental": { + "getResizingHandlers": { + "type": "JSFunction", + "value": "() => {\n return [\"e\"];\n }" + }, + "callbacks": { + "onResizeStart": { + "type": "JSFunction", + "value": "(e, currentNode) => {\n const { trigger } = e;\n const parent = currentNode.getParent();\n if (parent) {\n const parentNode = parent.getDOMNode();\n if (parentNode) {\n currentNode.parentRect = parentNode.getBoundingClientRect();\n }\n }\n currentNode.beforeSpan = currentNode.getPropValue(\"colSpan\") || 12;\n currentNode.startRect = currentNode.getRect();\n }" + }, + "onResize": { + "type": "JSFunction", + "value": "(e, currentNode) => {\n const { trigger, deltaX, deltaY } = e;\n const startWidth = currentNode.startRect\n ? currentNode.startRect.width\n : currentNode.beforeSpan * (currentNode.parentRect.width / 12);\n let width = startWidth + deltaX;\n if (!currentNode.startRect) {\n currentNode.startRect = {\n width\n };\n }\n width = Math.max(0, width); \n width = Math.min(width, currentNode.parentRect.width); \n const allowMoveX = Math.round(width - startWidth); \n currentNode.moveColumn = Math.round(\n allowMoveX / (currentNode.parentRect.width / 12)\n );\n currentNode.targetColumn =\n currentNode.beforeSpan + currentNode.moveColumn;\n currentNode.targetColumn = Math.max(1, currentNode.targetColumn); \n currentNode.targetColumn = Math.min(currentNode.targetColumn, 12); \n \n currentNode.getDOMNode().style[\"width\"] = `${Math.round(width)}px`;\n }" + }, + "onResizeEnd": { + "type": "JSFunction", + "value": "(e, currentNode) => {\n currentNode.getDOMNode().style[\"width\"] = `100%`;\n const columnEnums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];\n if (currentNode.targetColumn <= 1) {\n currentNode.targetColumn = 1;\n } else if (currentNode.targetColumn >= 12) {\n currentNode.targetColumn = 12;\n } else {\n let lastDelta = {\n column: columnEnums[0],\n delta: Math.abs(currentNode.targetColumn - columnEnums[0])\n };\n columnEnums.forEach(item => {\n let currentDelta = {\n column: item,\n delta: Math.abs(currentNode.targetColumn - item)\n };\n\n if (currentDelta.delta < lastDelta.delta) lastDelta = currentDelta;\n });\n currentNode.targetColumn = lastDelta.column;\n }\n\n currentNode.setPropValue(\"colSpan\", currentNode.targetColumn);\n }" + }, + "onMoveHook": { + "type": "JSFunction", + "value": "() => false" + } + } + }, + "icon": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png" + }, + { + "componentName": "NextBlock", + "title": "区块", + "category": "容器", + "npm": { + "package": "@alife/container", + "version": "0.3.7", + "exportName": "Block", + "main": "lib/index.js", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "prefix", + "propType": "string" + }, + { + "name": "childTotalColumns", + "propType": "number" + }, + { + "name": "colSpan", + "propType": "number" + }, + { + "name": "rowSpan", + "propType": "number" + }, + { + "name": "noPadding", + "propType": "bool" + }, + { + "name": "noBorder", + "propType": "bool" + }, + { + "name": "background", + "propType": { + "type": "oneOf", + "value": ["lining", "surface", "transparent"] + }, + "defaultValue": "lining" + }, + { + "name": "abc", + "propType": "string" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "childWhitelist": ["NextBlockCell"], + "parentWhitelist": { + "type": "JSFunction", + "value": "(testNode, currentNode) => {\n \n if (\n [\"NextPage\", \"Dialog\", \"Drawer\", \"Tab.Item\"].indexOf(\n testNode.componentName\n ) > -1\n ) {\n return true;\n }\n if (\n testNode.componentName === \"Slot\" &&\n [\"aside\"].indexOf(testNode.title) > -1\n ) {\n return true;\n }\n return false;\n }" + } + } + }, + "props": [ + { + "name": "title", + "title": "标题", + "initialValue": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "setter": "StringSetter" + }, + { + "name": "type", + "title": "样式", + "initialValue": "standard", + "defaultValue": "standard", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "standard", + "defaultValue": "standard", + "props": { + "options": [ + { + "title": "标准", + "value": "standard" + }, + { + "title": "透明", + "value": "transparent" + } + ] + } + }, + "extraProps": { + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n target.getNode().setPropValue(\"noPadding\", value === \"transparent\");\n target.getNode().setPropValue(\"noBorder\", value === \"transparent\");\n target\n .getNode()\n .setPropValue(\n \"background\",\n value === \"transparent\" ? value : \"surface\"\n );\n }" + } + } + }, + { + "name": "mode", + "title": "样式", + "initialValue": "inset", + "defaultValue": "inset", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "inset", + "defaultValue": "inset", + "props": { + "options": [ + { + "title": "标准", + "value": "inset" + }, + { + "title": "透明", + "value": "transparent" + }, + { + "title": "卡片", + "value": "card" + } + ] + } + } + }, + { + "name": "layoutmode", + "title": "布局模式", + "initialValue": "OOO", + "defaultValue": "OOO", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "OOO", + "defaultValue": "OOO", + "props": { + "card": true, + "options": [ + { + "label": "O", + "img": "https://img.alicdn.com/imgextra/i1/O1CN019KIIca1DFEKhu5AvI_!!6000000000186-55-tps-500-240.svg", + "value": "O" + }, + { + "label": "OO", + "img": "https://img.alicdn.com/imgextra/i2/O1CN016quqXZ1zWj1IrJPck_!!6000000006722-55-tps-500-240.svg", + "value": "OO" + }, + { + "label": "OOO", + "img": "https://img.alicdn.com/imgextra/i4/O1CN01Vpmd151yx07vfE7Eh_!!6000000006644-55-tps-500-240.svg", + "value": "OOO" + }, + { + "label": "OOOO", + "img": "https://img.alicdn.com/imgextra/i2/O1CN01IJEBFD1TY2S22RwLY_!!6000000002393-2-tps-500-240.png", + "value": "OOOO" + }, + { + "label": "OOOOOO", + "img": "https://img.alicdn.com/imgextra/i3/O1CN01GJ77gp1sg9rkUeuSc_!!6000000005795-2-tps-500-240.png", + "value": "OOOOOO" + }, + { + "label": "OB", + "img": "https://img.alicdn.com/imgextra/i2/O1CN015gIDsk26BqGkVCEnr_!!6000000007624-55-tps-500-240.svg", + "value": "OB" + }, + { + "label": "BO", + "img": "https://img.alicdn.com/imgextra/i2/O1CN01INZixz1vvDjrWjrTF_!!6000000006234-55-tps-499-240.svg", + "value": "BO" + }, + { + "label": "品", + "img": "https://img.alicdn.com/imgextra/i2/O1CN01XuHd5821cL6hrxpfz_!!6000000007005-55-tps-500-240.svg", + "value": "品" + }, + { + "label": "自定义", + "img": "https://img.alicdn.com/imgextra/i2/O1CN01EAvKa01OeqFtUhsDl_!!6000000001731-2-tps-408-410.png", + "value": "custom" + } + ] + } + }, + "extraProps": { + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n const map = {\n O: \"(12|1)\",\n OO: \"(6|1):(6|1)\",\n OOO: \"(4|1):(4|1):(4|1)\",\n OOOO: \"(3|1):(3|1):(3|1):(3|1)\",\n OOOOOO: \"(2|1):(2|1):(2|1):(2|1):(2|1):(2|1)\",\n OB: \"(6|2):(6|1):(6|1)\",\n BO: \"(6|1):(6|2):(6|1)\",\n 品: \"(12|1):(6|1):(6|1)\"\n };\n \n const autolayout = map[value];\n autolayout &&\n target\n .getProps()\n .get(\"autolayout\")\n .setValue(autolayout);\n }" + } + } + }, + { + "name": "autolayout", + "title": { + "label": "布局", + "tip": "一个括号表示一个块，用冒号分割；括号内含义为(列宽|行高)" + }, + "defaultValue": "(6|1):(6|1)", + "setter": { + "componentName": "StringSetter" + }, + "condition": { + "type": "JSFunction", + "value": "target => {\n return target.getProps().getPropValue(\"layoutmode\") === \"custom\";\n }" + }, + "extraProps": { + "setValue": { + "type": "JSFunction", + "value": "setValue(target, value) {\n \n let arrValue = value.split(\":\");\n arrValue = arrValue.filter(item => {\n return item && item.trim(); \n });\n arrValue = arrValue.map(item => {\n return item.replace(/[\\(\\)]/gi, \"\").split(\"|\");\n });\n const flag = arrValue.find(item => {\n return isNaN(Number(item[0])) || isNaN(Number(item[1]));\n });\n\n if (flag) {\n return;\n }\n\n const node = target.getNode();\n node.mergeChildren(\n (child, index) => {\n const wh = arrValue[index];\n child.setPropValue(\"colSpan\", +(wh && wh[0]) || 12);\n child.setPropValue(\"rowSpan\", +(wh && wh[1]) || 1);\n return index >= arrValue.length;\n },\n children => {\n let l = children.length;\n const items = [];\n while (l++ < arrValue.length) {\n items.push({\n componentName: \"NextBlockCell\",\n props: {\n isAutoContainer: true,\n colSpan: +arrValue[l - 1][0] || 12,\n rowSpan: +arrValue[l - 1][1] || 1\n }\n });\n }\n return items;\n },\n null\n );\n }" + } + } + }, + { + "name": "noPadding", + "title": "无边距", + "initialValue": false, + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "setter": "BoolSetter" + }, + { + "name": "noBorder", + "title": "无边框", + "initialValue": false, + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "setter": "BoolSetter" + }, + { + "name": "background", + "title": "背景色", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "extraProps": { + "defaultValue": "surface" + }, + "defaultValue": "surface", + "initialValue": "surface", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "surface", + "props": { + "defaultValue": "surface", + "options": [ + { + "title": "底色", + "value": "lining" + }, + { + "title": "白色", + "value": "surface" + }, + { + "title": "透明", + "value": "transparent" + } + ] + } + } + }, + { + "name": "colSpan", + "title": { + "label": "宽度(几列)", + "tip": "水平方向上占几列 (单位/份数, 最大12), 也可以通过拖动左侧面板改变列数" + }, + "display": "inline", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "initialValue": 12, + "defaultValue": 12, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [2, 4, 6, 8, 12] + } + } + }, + { + "name": "rowSpan", + "title": { + "label": "高度(几行)", + "tip": "垂直方向占几行 (单位/份数)" + }, + "display": "inline", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "initialValue": 1, + "defaultValue": 1, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [1, 2, 3, 4, 5] + } + } + }, + { + "name": "childTotalColumns", + "title": { + "label": "一行几列", + "tip": "可以通过增加子区块个数，查看变化" + }, + "display": "inline", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "initialValue": 12, + "defaultValue": 12, + "setter": { + "componentName": "NumberSetter", + "props": { + "min": 1, + "max": 12, + "defaultValue": 1 + } + } + }, + { + "name": "Cells", + "title": "子区块", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "primaryKey", + "title": "项目编号", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "initialValue": { + "type": "JSFunction", + "value": "val => {\n if (val) return val;\n return String(Math.floor(Math.random() * 10000));\n }" + }, + "setter": "StringSetter" + }, + { + "name": "title", + "title": "标题", + "initialValue": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "setter": "StringSetter" + }, + { + "name": "colSpan", + "title": { + "label": "宽度(几列)", + "tip": "水平方向上占几列 (单位/份数, 最大12)" + }, + "display": "inline", + "initialValue": 1, + "setter": { + "componentName": "NumberSetter", + "props": { + "min": 1, + "max": 12, + "defaultValue": 1 + } + } + }, + { + "name": "rowSpan", + "title": { + "label": "高度(几行)", + "tip": "垂直方向占几行 (单位/份数)" + }, + "display": "inline", + "initialValue": 1, + "setter": { + "componentName": "NumberSetter", + "props": { + "min": 1, + "max": 12, + "defaultValue": 1 + } + } + } + ] + } + }, + "initialValue": { + "type": "JSFunction", + "value": "() => {\n return {\n primaryKey: String(Math.floor(Math.random() * 10000)),\n title: \"\",\n colSpan: 1,\n rowSpan: 1\n };\n }" + } + } + } + }, + "extraProps": { + "virtual": { + "type": "JSFunction", + "value": "() => true" + }, + "getValue": { + "type": "JSFunction", + "value": "(target, value) => {\n return target.getNode().children.map(child => {\n return {\n primaryKey: String(child.getPropValue(\"primaryKey\")),\n title: child.getPropValue(\"title\"),\n colSpan: child.getPropValue(\"colSpan\"),\n rowSpan: child.getPropValue(\"rowSpan\")\n };\n });\n }" + }, + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n const node = target.getNode();\n const map = {};\n if (!Array.isArray(value)) {\n value = [];\n }\n const added = [];\n value.forEach(item => {\n const blockCellItem = Object.assign({}, item);\n map[item.primaryKey] = blockCellItem;\n });\n node.mergeChildren(\n child => {\n const primaryKey = String(child.getPropValue(\"primaryKey\"));\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n child.setPropValue(\"title\", map[primaryKey].title);\n child.setPropValue(\"colSpan\", map[primaryKey].colSpan);\n child.setPropValue(\"rowSpan\", map[primaryKey].rowSpan);\n delete map[primaryKey];\n return false;\n }\n return true;\n },\n () => {\n const items = [];\n for (const primaryKey in map) {\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n items.push({\n componentName: \"NextBlockCell\",\n props: map[primaryKey]\n });\n }\n }\n return items;\n },\n (child1, child2) => {\n const a = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child1.getPropValue(\"primaryKey\"))\n );\n const b = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child2.getPropValue(\"primaryKey\"))\n );\n return a - b;\n }\n );\n }" + }, + "onChange": { + "type": "JSFunction", + "value": "() => {}" + } + } + } + ] + }, + "experimental": { + "initialChildren": [ + { + "componentName": "NextBlockCell", + "props": { + "title": "", + "prefix": "next-", + "placeholderStyle": { + "height": "100%" + }, + "layoutmode": "O", + "childTotalColumns": 12, + "isAutoContainer": true, + "colSpan": 12, + "rowSpan": 1 + } + } + ], + "callbacks": {} + }, + "icon": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png" + }, + { + "componentName": "NextPCell", + "title": "组", + "category": "容器", + "npm": { + "package": "@alife/container", + "version": "0.3.7", + "exportName": "P", + "main": "lib/index.js", + "destructuring": true, + "subName": "Cell" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "type", + "title": "字体大小", + "extraProps": { + "defaultValue": "body2" + }, + "defaultValue": "body2", + "initialValue": "body2", + "setter": { + "componentName": "SelectSetter", + "initialValue": "body2", + "props": { + "defaultValue": "body2", + "options": [ + { + "title": "h1", + "value": "h1" + }, + { + "title": "h2", + "value": "h2" + }, + { + "title": "h3", + "value": "h3" + }, + { + "title": "h4", + "value": "h4" + }, + { + "title": "h5", + "value": "h5" + }, + { + "title": "h6", + "value": "h6" + }, + { + "title": "body1", + "value": "body1" + }, + { + "title": "body2", + "value": "body2" + }, + { + "title": "caption", + "value": "caption" + }, + { + "title": "overline", + "value": "overline" + } + ] + } + } + }, + { + "name": "verAlign", + "title": "垂直对齐", + "extraProps": { + "defaultValue": "baseline" + }, + "defaultValue": "baseline", + "initialValue": "baseline", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "baseline", + "props": { + "defaultValue": "baseline", + "options": [ + { + "title": "top", + "value": "top" + }, + { + "title": "baseline", + "value": "baseline" + }, + { + "title": "middle", + "value": "middle" + }, + { + "title": "bottom", + "value": "bottom" + } + ] + } + } + }, + { + "name": "align", + "title": "水平对齐", + "extraProps": { + "defaultValue": "left" + }, + "defaultValue": "left", + "initialValue": "left", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "left", + "props": { + "defaultValue": "left", + "options": [ + { + "title": "space-between", + "value": "space-between" + }, + { + "title": "space-around", + "value": "space-around" + }, + { + "title": "space-evenly", + "value": "space-evenly" + }, + { + "title": "left", + "value": "left" + }, + { + "title": "center", + "value": "center" + }, + { + "title": "right", + "value": "right" + } + ] + } + } + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["NextP"] + } + }, + "props": [ + { + "name": "width", + "title": "宽度", + "initialValue": "auto", + "defaultValue": "auto", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "setter": { + "componentName": "NumberSetter", + "props": { + "units": [ + { + "type": "px", + "list": true + }, + { + "type": "%", + "list": true + } + ] + } + } + }, + { + "name": "direction", + "title": "排布方式", + "initialValue": "hoz", + "defaultValue": "hoz", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "hoz", + "defaultValue": "hoz", + "props": { + "options": [ + { + "title": "上下排列", + "value": "ver" + }, + { + "title": "左右排列", + "value": "hoz" + } + ] + } + } + }, + { + "name": "align", + "title": "对齐方式", + "initialValue": "inherit", + "defaultValue": "inherit", + "condition": { + "type": "JSFunction", + "value": "target => {\n if (!target || !target.getProps()) {\n console.warn(\"target or props should not be empty: \", target);\n return false;\n }\n return !!(target.getProps().getPropValue(\"direction\") === \"ver\");\n }" + }, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "inherit", + "defaultValue": "inherit", + "props": { + "options": [ + { + "title": "左", + "value": "left" + }, + { + "title": "中", + "value": "center" + }, + { + "title": "右", + "value": "right" + }, + { + "title": "默认", + "value": "inherit" + } + ] + } + } + }, + { + "name": "verAlign", + "title": "对齐方式", + "initialValue": "inherit", + "defaultValue": "inherit", + "condition": { + "type": "JSFunction", + "value": "target => {\n if (!target || !target.getProps()) {\n console.warn(\"target or props should not be empty: \", target);\n return false;\n }\n return !!(target.getProps().getPropValue(\"direction\") === \"hoz\");\n }" + }, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "inherit", + "defaultValue": "inherit", + "props": { + "options": [ + { + "title": "上", + "value": "top" + }, + { + "title": "中", + "value": "middle" + }, + { + "title": "baseline", + "value": "baseline" + }, + { + "title": "下", + "value": "bottom" + }, + { + "title": "默认", + "value": "inherit" + } + ] + } + } + } + ], + "supports": { + "style": true + } + }, + "icon": "" + }, + { + "componentName": "NextP", + "title": "段落模板", + "category": "容器", + "npm": { + "package": "@alife/container", + "version": "0.3.7", + "exportName": "P", + "main": "lib/index.js", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "textSpacing", + "title": { + "label": "文字间距", + "tip": "开启后，同一“段落”下，多个Text之间会产生间距" + }, + "propType": "bool", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "defaultValue": true + }, + { + "name": "full", + "title": { + "label": "占满一行", + "tip": "开启后，子元素将占满一行" + }, + "propType": "bool", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "defaultValue": false + }, + { + "name": "flex", + "title": { + "label": "块状布局", + "tip": "相对于“行内布局模式”,子元素是不可分割的块" + }, + "propType": "bool", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "defaultValue": true + }, + { + "name": "wrap", + "title": { + "label": "超长换行", + "tip": "只在块状布局下生效，而行内布局下默认就是换行的" + }, + "propType": "bool", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "defaultValue": false + }, + { + "name": "type", + "title": "字体大小", + "extraProps": { + "defaultValue": "body2" + }, + "defaultValue": "body2", + "initialValue": "body2", + "setter": { + "componentName": "SelectSetter", + "initialValue": "body2", + "props": { + "defaultValue": "body2", + "options": [ + { + "title": "h1", + "value": "h1" + }, + { + "title": "h2", + "value": "h2" + }, + { + "title": "h3", + "value": "h3" + }, + { + "title": "h4", + "value": "h4" + }, + { + "title": "h5", + "value": "h5" + }, + { + "title": "h6", + "value": "h6" + }, + { + "title": "body1", + "value": "body1" + }, + { + "title": "body2", + "value": "body2" + }, + { + "title": "caption", + "value": "caption" + }, + { + "title": "overline", + "value": "overline" + } + ] + } + } + }, + { + "name": "verAlign", + "title": "垂直对齐", + "extraProps": { + "defaultValue": "baseline" + }, + "defaultValue": "baseline", + "initialValue": "baseline", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "baseline", + "props": { + "defaultValue": "baseline", + "options": [ + { + "title": "top", + "value": "top" + }, + { + "title": "baseline", + "value": "baseline" + }, + { + "title": "middle", + "value": "middle" + }, + { + "title": "bottom", + "value": "bottom" + } + ] + } + } + }, + { + "name": "align", + "title": "水平对齐", + "extraProps": { + "defaultValue": "space-between" + }, + "defaultValue": "space-between", + "initialValue": "space-between", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "space-between", + "defaultValue": "space-between", + "props": { + "defaultValue": "space-between", + "options": [ + { + "title": "space-between", + "value": "space-between" + }, + { + "title": "space-around", + "value": "space-around" + }, + { + "title": "space-evenly", + "value": "space-evenly" + }, + { + "title": "left", + "value": "left" + }, + { + "title": "center", + "value": "center" + }, + { + "title": "right", + "value": "right" + } + ] + } + } + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": { + "type": "JSFunction", + "value": "(testNode, currentNode) => {\n if (\n testNode.isContainer() &&\n [\"NextPage\", \"NextBlock\"].indexOf(testNode.componentName) === -1\n ) {\n return true;\n }\n if (\n testNode.componentName === \"Slot\" &&\n [\"header\", \"footer\", \"nav\"].indexOf(testNode.title) > -1\n ) {\n return true;\n }\n return false;\n }" + } + } + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + } + ] + } + }, + "experimental": { + "callbacks": { + "onNodeRemove": { + "type": "JSFunction", + "value": "(removedNode, currentNode) => {\n if (!removedNode || !currentNode) {\n return;\n }\n const children = currentNode.children;\n \n if (children && children.length === 0) {\n currentNode.remove();\n }\n }" + } + }, + "initials": [ + { + "name": "flex", + "initial": { + "type": "JSFunction", + "value": "() => true" + } + } + ] + } + }, + { + "componentName": "NextPage", + "title": "页面", + "category": "容器", + "npm": { + "package": "@alife/container", + "version": "0.3.7", + "exportName": "Page", + "main": "lib/index.js", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "header", + "propType": "node" + }, + { + "name": "footer", + "propType": "node" + }, + { + "name": "nav", + "propType": "node" + }, + { + "name": "aside", + "propType": "node" + }, + { + "name": "main", + "propType": "node" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": { + "type": "JSFunction", + "value": "dropTargetNode => {\n let targetNodeNextPageNum = 0;\n dropTargetNode.getChildren().forEach(item => {\n if (item.componentName === \"NextPage\") {\n targetNodeNextPageNum += 1;\n }\n });\n \n if (\n dropTargetNode.isRoot() &&\n dropTargetNode.componentName !== \"NextPage\" &&\n targetNodeNextPageNum === 0\n ) {\n return true;\n }\n\n return false;\n }" + } + } + }, + "props": [ + { + "name": "columns", + "title": "列数", + "defaultValue": 12, + "setter": "NumberSetter", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "page", + "type": "group", + "title": { + "label": "页面" + }, + "extraProps": { + "display": "block" + }, + "items": [ + { + "name": "contentAlignCenter", + "title": { + "label": "内容居中", + "tip": "（在大屏下有区别）开启后内容区域有最大宽度且整体居中" + }, + "setter": { + "componentName": "BoolSetter", + "initialValue": false + } + }, + { + "name": "contentProps.noPadding", + "title": { + "label": "内间距" + }, + "initialValue": false, + "defaultValue": false, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": false, + "defaultValue": false, + "props": { + "options": [ + { + "title": "有", + "value": false + }, + { + "title": "无", + "value": true + } + ] + } + } + }, + { + "name": "minHeight", + "title": { + "label": "最小高度" + }, + "initialValue": "100vh", + "defaultValue": "100vh", + "setter": { + "componentName": "StringSetter" + }, + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "background", + "title": { + "label": "Page的背景色" + }, + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "lining" + } + }, + { + "name": "contentProps.background", + "title": { + "label": "主体背景色" + }, + "initialValue": "transparent", + "defaultValue": "transparent", + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "transparent", + "defaultValue": "transparent", + "props": { + "options": [ + { + "title": "不透明", + "value": "surface" + }, + { + "title": "透明", + "value": "transparent" + } + ] + } + } + } + ] + }, + { + "name": "headerSelection", + "type": "group", + "title": { + "label": "头部" + }, + "extraProps": { + "display": "block" + }, + "items": [ + { + "name": "header", + "title": { + "label": "内容" + }, + "setter": { + "componentName": "SlotSetter", + "initialValue": { + "type": "JSSlot", + "title": "header", + "value": [] + } + } + }, + { + "name": "headerProps.background", + "title": { + "label": "头部背景" + }, + "condition": { + "type": "JSFunction", + "value": "target => {\n if (!target || !target.getProps()) {\n console.warn(\"target or props should not be empty: \", target);\n return false;\n }\n return !!target.getProps().getPropValue(\"header\");\n }" + }, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "surface", + "props": { + "options": [ + { + "title": "不透明", + "value": "surface" + }, + { + "title": "透明", + "value": "transparent" + } + ] + } + } + }, + { + "name": "headerProps.style.padding", + "title": { + "label": "内间距" + }, + "defaultValue": "", + "initialValue": "", + "condition": { + "type": "JSFunction", + "value": "target => {\n if (!target || !target.getProps()) {\n console.warn(\"target or props should not be empty: \", target);\n return false;\n }\n return !!target.getProps().getPropValue(\"header\");\n }" + }, + "setter": { + "componentName": "RadioGroupSetter", + "initialValue": "", + "props": { + "options": [ + { + "title": "无", + "value": "0" + }, + { + "title": "有", + "value": "" + } + ] + } + } + }, + { + "name": "headerDivider", + "title": { + "label": "头部底下分割线", + "tip": "一般用于头部、内容区颜色相同时 headerDivider" + }, + "defaultValue": true, + "initialValue": true, + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "setter": { + "componentName": "BoolSetter", + "initialValue": true, + "defaultValue": true + } + } + ] + }, + { + "name": "footer", + "type": "group", + "title": { + "label": "底部" + }, + "extraProps": { + "display": "block" + }, + "items": [ + { + "name": "footer", + "title": { + "label": "内容" + }, + "setter": { + "componentName": "SlotSetter", + "initialValue": { + "type": "JSSlot", + "title": "footer", + "value": [] + } + } + }, + { + "name": "footerProps.fixed", + "title": { + "label": "是否吸底", + "tip": "可以用来放置吸底的表单提交按钮等" + }, + "defaultValue": false, + "initialValue": false, + "condition": { + "type": "JSFunction", + "value": "target => {\n if (!target || !target.getProps()) {\n console.warn(\"target or props should not be empty: \", target);\n return false;\n }\n return !!target.getProps().getPropValue(\"footer\");\n }" + }, + "setter": { + "componentName": "BoolSetter", + "initialValue": false, + "defaultValue": false + } + } + ] + }, + { + "name": "nav", + "title": { + "label": "左侧导航" + }, + "extraProps": { + "display": "block" + }, + "setter": { + "componentName": "SlotSetter", + "initialValue": { + "type": "JSSlot", + "title": "nav", + "value": [] + } + } + }, + { + "name": "aside", + "title": { + "label": "侧边栏" + }, + "extraProps": { + "display": "block" + }, + "setter": { + "componentName": "SlotSetter", + "initialValue": { + "type": "JSSlot", + "title": "aside", + "value": [ + { + "componentName": "NextBlock", + "title": "区块", + "props": { + "prefix": "next-", + "placeholderStyle": { + "height": "100%" + }, + "noPadding": false, + "noBorder": false, + "background": "surface", + "colSpan": 12, + "rowSpan": 1, + "childTotalColumns": 1 + } + } + ] + } + } + } + ], + "supports": { + "style": true, + "loop": false + } + }, + "experimental": { + "callbacks": { + "onNodeAdd": { + "type": "JSFunction", + "value": "(dragment, currentNode) => {\n \n \n if (\n !dragment ||\n [\"NextP\", \"NextBlock\", \"Slot\"].includes(dragment.componentName) ||\n (dragment.isModal && dragment.isModal())\n ) {\n console.log(\n `[${dragment.componentName}] doesn\\'n need to wrap with NextBlock > NextBlockCell`\n );\n return;\n }\n\n const NextPProps = {\n wrap: false,\n type: \"body2\",\n verAlign: \"middle\",\n textSpacing: true,\n align: \"left\"\n };\n\n if (\n [\n \"Form\",\n \"ResponsiveGrid\",\n \"Box\",\n \"Card\",\n \"List\",\n \"Message\",\n \"Slider\",\n \"NextTable\"\n ].includes(dragment.componentName) ||\n dragment.getPropValue(\"isFillContainer\")\n ) {\n NextPProps.full = true;\n }\n const layoutPSchema = {\n componentName: \"NextP\",\n title: \"段落\",\n props: NextPProps,\n children: [dragment.schema]\n };\n\n \n const layoutBlockNode = len =>\n currentNode.document.createNode({\n componentName: \"NextBlock\",\n title: \"区块\",\n props: {\n childTotalColumns: len || 12\n },\n children: [\n {\n componentName: \"NextBlockCell\",\n title: \"子区块\",\n props: {\n isAutoContainer: true,\n colSpan: 12,\n rowSpan: 1\n },\n children: [layoutPSchema]\n }\n ]\n });\n\n const dropLocation = dragment.document.designer.dropLocation;\n\n if (!dropLocation) {\n \n return;\n }\n const dropTarget = dropLocation.target;\n const dropTargetName = dropLocation.target.componentName || \"\";\n\n \n const targetId = (dropLocation && dropLocation.target.id) || \"\";\n \n let slotTarget =\n currentNode.slots.length > 0 &&\n currentNode.slots.find(item => item.id === targetId);\n\n const layoutPNode = currentNode.document.createNode(layoutPSchema);\n\n \n const isAsideSlot =\n slotTarget && [\"aside\"].indexOf(slotTarget._slotFor.key) > -1;\n \n const isNeedPSlot =\n slotTarget &&\n [\"header\", \"footer\", \"nav\"].indexOf(slotTarget._slotFor.key) > -1;\n\n const wrapWithBlock = (dragment, node, dropTargetName, blockLen) => {\n setTimeout(() => {\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] need to wrap with NextBlock > NextBlockCell > NextP [from NextPage2]`\n );\n const newNode = node.document.createNode(\n layoutBlockNode(blockLen).schema\n );\n node.insertBefore(newNode, dragment, false);\n dragment.remove(false);\n newNode\n .getChildren()\n .get(0)\n .getChildren()\n .get(0)\n .getChildren()\n .get(0)\n .select();\n }, 1);\n };\n\n const wrapWithP = (dragment, node, dropTargetName) => {\n setTimeout(() => {\n \n \n if (dropTargetName === \"NextP\") {\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] does't need to wrap with NextP. [from NextPage3]`\n );\n return;\n }\n\n console.log(\n `[${dragment.componentName}] to [${dropTargetName}] need to wrap with NextP [from NextPage3]`\n );\n const newNode = node.document.createNode(\n Object.assign(layoutPNode.schema)\n );\n node.insertBefore(newNode, dragment, false);\n dragment.remove(false);\n newNode\n .getChildren()\n .get(0)\n .select();\n }, 1);\n };\n\n \n \n if (\n [\"NextPage\"].includes(dropTargetName) &&\n currentNode.getChildren().has(dragment)\n ) {\n wrapWithBlock(dragment, currentNode, dropTargetName, 12);\n\n \n \n } else if (\n isAsideSlot &&\n slotTarget &&\n slotTarget.getChildren().has(dragment)\n ) {\n wrapWithBlock(dragment, slotTarget, dropTargetName, 1);\n\n \n \n \n } else if (\n dropTarget.getPropValue(\"isAutoContainer\") ||\n dropTargetName === \"Tab.Item\"\n ) {\n wrapWithP(dragment, dropTarget, dropTargetName);\n\n \n \n } else if (isNeedPSlot && slotTarget) {\n wrapWithP(dragment, slotTarget, dropTargetName);\n }\n\n \n }" + } + }, + "initials": [ + { + "name": "minHeight", + "initial": { + "type": "JSFunction", + "value": "() => \"100vh\"" + } + } + ] + }, + "icon": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png" + }, + { + "componentName": "NextTable", + "title": "表格", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "NextTable", + "version": "1.23.x", + "exportName": "NextTable", + "main": "lib/index.js", + "subName": "" + }, + "props": [ + { + "name": "columns", + "title": "数据列", + "propType": { + "type": "arrayOf", + "value": { + "type": "shape", + "value": [ + { + "name": "title", + "description": "列标题", + "propType": "string", + "defaultValue": "Title" + }, + { + "name": "dataKey", + "description": "列索引", + "propType": "string", + "defaultValue": "Key" + }, + { + "name": "dataType", + "description": "数据类型", + "propType": { + "type": "oneOf", + "value": [ + "text", + "timestamp", + "cascadeTimestamp", + "employee", + "money", + "moneyRange" + ] + }, + "defaultValue": "Key" + }, + { + "name": "editType", + "description": "编辑类型", + "propType": { + "type": "oneOf", + "value": ["select", "text", "radio", "date", "employee"] + }, + "defaultValue": "Key" + } + ] + } + } + }, + { + "name": "data", + "title": "数据源", + "propType": { + "type": "oneOfType", + "value": ["Json", "JSExpression"] + } + }, + { + "name": "actionTitle", + "title": "操作列标题", + "propType": "string" + }, + { + "name": "actionColumn", + "title": "操作列", + "propType": { + "type": "arrayOf", + "value": { + "type": "shape", + "value": [ + { + "name": "title", + "description": "列标题", + "propType": "string", + "defaultValue": "Title" + }, + { + "name": "callback", + "description": "callback", + "propType": "func", + "defaultValue": { + "type": "JSFunction", + "value": "(rowData, action, table) => {\n return table.editRow(rowData).then((row) => {\n console.log(row);\n })}" + } + } + ] + } + } + }, + { + "name": "customBarItem", + "isRequired": true, + "title": "自定义工具栏渲染", + "propType": "any" + } + ], + "configure": { + "props": [ + { + "name": "customBarItem", + "isRequired": true, + "title": "自定义工具栏渲染", + "setter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "render", + "title": "整体自定义渲染", + "setter": { + "componentName": "FunctionSetter", + "props": { + "supportParams": true + } + } + }, + { + "name": "rightRender", + "title": "底部自定义渲染", + "setter": { + "componentName": "SlotSetter", + "initialValue": { + "type": "JSSlot", + "params": ["value", "index", "record"], + "value": [] + } + } + }, + { + "name": "bottomRender", + "title": "右侧自定义渲染", + "setter": { + "componentName": "SlotSetter", + "initialValue": { + "type": "JSSlot", + "params": ["value", "index", "record"], + "value": [] + } + } + } + ] + } + } + } + }, + { + "name": "StyleAndTheme", + "title": "风格和样式", + "type": "group", + "extraProps": { + "display": "entry" + }, + "items": [ + { + "name": "theme", + "title": "主题", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "zebra", + "value": "zebra" + }, + { + "title": "split", + "value": "split" + }, + { + "title": "border", + "value": "border" + } + ] + } + } + }, + { + "name": "hasHeader", + "title": "是否显示表头", + "setter": "BoolSetter" + }, + { + "name": "fixedHeader", + "title": "是否固定表头", + "setter": "BoolSetter" + }, + { + "name": "stickyHeader", + "title": "表头是否是sticky", + "setter": "BoolSetter" + }, + { + "name": "setEmptyContent", + "title": "开启自定义空提示", + "setter": "BoolSetter" + }, + { + "description": "最大高度", + "name": "maxBodyHeight", + "setter": "StringSetter" + } + ] + }, + { + "name": "Selector", + "title": "行选择器", + "type": "group", + "extraProps": { + "display": "entry" + }, + "items": [ + { + "name": "rowSelector", + "title": "选择器模式", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "checkboxSelector", + "value": "checkboxSelector" + }, + { + "title": "radioSelector", + "value": "radioSelector" + } + ] + } + } + }, + { + "name": "showRowSelector", + "title": "是否启用选择模式", + "setter": "BoolSetter" + } + ] + }, + { + "name": "Pagination", + "title": "分页设置", + "type": "group", + "extraProps": { + "display": "entry" + }, + "items": [ + { + "name": "isPagination", + "title": "是否显示分页", + "setter": "BoolSetter", + "initialValue": true + }, + { + "name": "pagination", + "title": "分页设置", + "setter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "paginationPosition", + "title": "翻页器显示位置", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "left", + "value": "left" + }, + { + "title": "right", + "value": "right" + } + ] + } + } + }, + { + "name": "size", + "title": "分页组件大小", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "small", + "value": "small" + }, + { + "title": "medium", + "value": "medium" + }, + { + "title": "large", + "value": "large" + } + ] + } + } + }, + { + "name": "type", + "title": "分页组件类型", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "normal", + "value": "normal" + }, + { + "title": "simple", + "value": "simple" + }, + { + "title": "mini", + "value": "mini" + } + ] + } + } + }, + { + "name": "shape", + "title": "前进后退按钮样式", + "setter": { + "componentName": "SelectSetter", + "props": { + "options": [ + { + "title": "normal", + "value": "normal" + }, + { + "title": "arrow-only", + "value": "arrow-only" + }, + { + "title": "arrow-prev-only", + "value": "arrow-prev-only" + }, + { + "title": "no-border", + "value": "no-border" + } + ] + } + } + }, + { + "name": "pageSizeSelector", + "title": "每页显示选择器类型", + "setter": "BoolSetter" + }, + { + "name": "pageSizeList", + "title": "每页显示选择器可选值", + "setter": "StringSetter" + }, + { + "name": "pageSizePosition", + "title": "每页显示选择器在组件中的位置", + "setter": { + "componentName": "SelectSetter", + "props": { + "options": [ + { + "title": "start", + "value": "start" + }, + { + "title": "end", + "value": "end" + } + ] + } + } + }, + { + "name": "hideOnlyOnePage", + "title": "hideOnlyOnePage", + "setter": "BoolSetter" + }, + { + "name": "showJump", + "title": "showJump", + "setter": "BoolSetter" + }, + { + "name": "pageShowCount", + "title": "页码显示的数量", + "setter": "NumberSetter" + } + ] + } + }, + "initialValue": { + "type": "normal", + "shape": "arrow-only", + "pageSize": 10, + "pageSizeSelector": false, + "pageSizeList": "5,10,20", + "pageSizePosition": "end", + "paginationPosition": "right", + "hideOnlyOnePage": false, + "showJump": true + } + } + } + ] + }, + { + "name": "ExpandAndTree", + "title": "可折叠/树形表格", + "type": "group", + "extraProps": { + "display": "entry" + }, + "items": [ + { + "name": "hasExpandedRowCtrl", + "title": "启用折叠", + "setter": "BoolSetter" + }, + { + "name": "isTree", + "title": "启用树形", + "setter": "BoolSetter" + } + ] + }, + { + "name": "TopAction", + "title": "顶部操作选项", + "type": "group", + "extraProps": { + "display": "entry" + }, + "items": [ + { + "name": "showMiniPager", + "title": "顶部迷你分页器", + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "showActionBar", + "title": "显示操作条", + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "showLinkBar", + "title": "显示外链条", + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "showSearch", + "title": "显示搜索", + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "searchBarPlaceholder", + "title": "搜索 placeholder", + "setter": "StringSetter" + }, + { + "name": "showCustomColumn", + "title": "显示筛选器", + "setter": { + "componentName": "BoolSetter" + } + } + ] + }, + { + "name": "actionBar", + "title": "操作条", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "title", + "description": "标题", + "setter": "StringSetter", + "initialValue": "Title" + }, + { + "name": "callback", + "description": "callback", + "setter": { + "componentName": "FunctionSetter" + } + } + ] + } + }, + "initialValue": { + "title": "Title" + } + } + } + } + }, + { + "name": "linkBar", + "title": "外链操作条", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "title", + "description": "标题", + "setter": "StringSetter", + "initialValue": "Title" + }, + { + "name": "callback", + "description": "callback", + "setter": { + "componentName": "FunctionSetter" + } + } + ] + } + }, + "initialValue": { + "title": "Title" + } + } + } + } + }, + { + "name": "columns", + "title": "数据列", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + "ExpressionSetter", + { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "title", + "description": "列标题", + "setter": "StringSetter" + }, + { + "name": "dataKey", + "description": "列索引", + "setter": "StringSetter" + }, + { + "description": "宽度", + "name": "width", + "setter": "StringSetter" + }, + { + "name": "dataType", + "description": "数据类型", + "setter": { + "componentName": "SelectSetter", + "props": { + "options": [ + { + "title": "text", + "value": "text" + }, + { + "title": "timestamp", + "value": "timestamp" + }, + { + "title": "cascadeTimestamp", + "value": "cascadeTimestamp" + }, + { + "title": "employee", + "value": "employee" + }, + { + "title": "money", + "value": "money" + }, + { + "title": "moneyRange", + "value": "moneyRange" + } + ] + } + } + }, + { + "name": "editType", + "description": "编辑类型", + "setter": { + "componentName": "SelectSetter", + "props": { + "options": [ + { + "title": "select", + "value": "select" + }, + { + "title": "text", + "value": "text" + }, + { + "title": "radio", + "value": "radio" + }, + { + "title": "date", + "value": "date" + }, + { + "title": "employee", + "value": "employee" + } + ] + } + } + }, + { + "name": "lock", + "description": "锁定位置", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "左", + "value": "left" + }, + { + "title": "右", + "value": "right" + }, + { + "title": "无", + "value": "" + } + ] + }, + "initialValue": "" + } + }, + { + "description": "自定义渲染", + "name": "render", + "setter": { + "componentName": "SlotSetter", + "title": "单元格自定义", + "initialValue": { + "type": "JSSlot", + "params": [""], + "value": [ + { + "componentName": "Box" + } + ] + } + } + } + ] + } + }, + "initialValue": { + "title": "Title", + "dataKey": "Key", + "dataType": "text", + "editType": "text", + "width": 200, + "lock": "" + } + } + } + } + ] + } + } + }, + { + "name": "data", + "title": "数据源", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["JsonSetter", "ExpressionSetter"] + } + } + }, + { + "name": "action", + "title": "操作列选项", + "type": "group", + "extraProps": { + "display": "entry" + }, + "items": [ + { + "name": "actionTitle", + "title": "操作列标题", + "setter": "StringSetter" + }, + { + "name": "actionWidth", + "title": "操作列宽度", + "setter": "NumberSetter" + }, + { + "name": "actionType", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "link", + "value": "link" + }, + { + "title": "button", + "value": "button" + } + ] + } + } + }, + { + "name": "actionFixed", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "right", + "value": "right" + }, + { + "title": "none", + "value": "none" + } + ] + } + } + }, + { + "name": "actionHidden", + "setter": "BoolSetter", + "initialValue": false + } + ] + }, + { + "name": "actionColumn", + "title": "操作列", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "title", + "description": "列标题", + "setter": "StringSetter", + "initialValue": "Title" + }, + { + "name": "callback", + "description": "callback", + "setter": { + "componentName": "FunctionSetter" + } + } + ] + } + }, + "initialValue": { + "title": "Title", + "callback": { + "type": "JSFunction", + "value": "(rowData, action, table) => {\n return table.editRow(rowData).then((row) => {\n console.log(row);\n })}" + } + } + } + } + } + } + ], + "supports": { + "style": true, + "events": [ + "onFetchData", + "onSelect", + "onRowClick", + "onRowMouseEnter", + "onRowMouseLeave", + "onResizeChange", + "onColumnsChange", + "onRowOpen", + "onShowSearch", + "onHideSearch" + ] + } + }, + "icon": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png", + "category": "内容" + }, + { + "componentName": "NextText", + "title": "文本", + "category": "常用", + "npm": { + "package": "@alife/container", + "version": "0.3.7", + "exportName": "Text", + "main": "lib/index.js", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "classname", + "propType": "bool", + "defaultValue": true + }, + { + "name": "type", + "title": "字体大小", + "extraProps": { + "defaultValue": "body2" + }, + "defaultValue": "body2", + "initialValue": "body2", + "setter": { + "componentName": "SelectSetter", + "initialValue": "body2", + "props": { + "defaultValue": "body2", + "options": [ + { + "title": "默认", + "value": "inherit" + }, + { + "title": "h1", + "value": "h1" + }, + { + "title": "h2", + "value": "h2" + }, + { + "title": "h3", + "value": "h3" + }, + { + "title": "h4", + "value": "h4" + }, + { + "title": "h5", + "value": "h5" + }, + { + "title": "h6", + "value": "h6" + }, + { + "title": "body1", + "value": "body1" + }, + { + "title": "body2", + "value": "body2" + }, + { + "title": "caption", + "value": "caption" + }, + { + "title": "overline", + "value": "overline" + } + ] + } + } + }, + { + "name": "children", + "propType": "string" + }, + { + "name": "mark", + "title": "标记", + "propType": "bool", + "description": "添加标记样式", + "defaultValue": false + }, + { + "name": "code", + "title": "代码", + "propType": "bool", + "description": "添加代码样式", + "defaultValue": false + }, + { + "name": "delete", + "title": "删除线", + "propType": "bool", + "description": "添加删除线样式", + "defaultValue": false + }, + { + "name": "underline", + "title": "下划线", + "propType": "bool", + "description": "添加下划线样式", + "defaultValue": false + }, + { + "name": "strong", + "propType": "bool", + "description": "是否加粗", + "defaultValue": false + }, + { + "name": "onClick", + "propType": "func", + "description": "鼠标点击" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "classname", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文本内容", + "en_US": "Text" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性：children | 说明：文本内容", + "en_US": "prop: children | description: text of the content" + } + }, + "setter": "TextAreaSetter" + } + ] + } + } + }, + { + "componentName": "Wrapper", + "title": "备注容器", + "category": "Others", + "npm": { + "package": "@alifd/ali-lowcode-components", + "version": "latest", + "exportName": "NoteWrapper", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "note", + "propType": "string", + "defaultValue": "这是一个备注" + } + ], + "configure": { + "component": { + "isContainer": true, + "isModal": false + }, + "props": [ + { + "name": "style", + "setter": "StyleSetter" + }, + { + "name": "note", + "propType": "string", + "setter": "StringSetter" + } + ] + }, + "icon": "" + }, + { + "componentName": "NumberPicker", + "title": "数字输入框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "NumberPicker", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["large", "medium"] + }, + "description": "大小", + "defaultValue": "medium" + }, + { + "name": "type", + "propType": { + "type": "oneOf", + "value": ["normal", "inline"] + }, + "description": "设置类型", + "defaultValue": "normal" + }, + { + "name": "value", + "propType": "number", + "description": "当前值" + }, + { + "name": "defaultValue", + "propType": "number", + "description": "默认值" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "step", + "propType": "number", + "description": "步长", + "defaultValue": 1 + }, + { + "name": "precision", + "propType": "number", + "description": "保留小数点后位数", + "defaultValue": 0 + }, + { + "name": "editable", + "propType": "bool", + "description": "用户是否可以输入", + "defaultValue": true + }, + { + "name": "autoFocus", + "propType": "bool", + "description": "自动焦点" + }, + { + "name": "max", + "propType": "number", + "description": "最大值", + "defaultValue": null + }, + { + "name": "min", + "propType": "number", + "description": "最小值", + "defaultValue": null + }, + { + "name": "format", + "propType": "func", + "description": "格式化当前值" + }, + { + "name": "upBtnProps", + "propType": "object", + "description": "增加按钮的props" + }, + { + "name": "downBtnProps", + "propType": "object", + "description": "减少按钮的props" + }, + { + "name": "label", + "propType": "string", + "description": "内联 label" + }, + { + "name": "innerAfter", + "propType": { + "type": "oneOfType", + "value": ["string", "icon"] + }, + "description": "inner after" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态" + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {number} value 评分值" + }, + { + "name": "onChange", + "propType": "func", + "description": "数值被改变的事件\n@param {Number} value 数据\n@param {Event} e DOM事件对象" + }, + { + "name": "onKeyDown", + "propType": "func", + "description": "键盘按下" + }, + { + "name": "onFocus", + "propType": "func", + "description": "焦点获得" + }, + { + "name": "onBlur", + "propType": "func", + "description": "焦点失去" + }, + { + "name": "onCorrect", + "propType": "func", + "description": "数值订正后的回调\n@param {Object} obj {currentValue,oldValue:String}" + }, + { + "name": "onDisabled", + "propType": "func" + }, + { + "name": "className", + "propType": "string", + "description": "自定义class" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + } + ], + "configure": { + "props": [ + { + "name": "value", + "title": "当前值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "defaultValue", + "title": "默认值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 尺寸\n@enumdesc 小, 中, 大", + "en_US": "prop: size | description: size" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "defaultValue": "medium" + }, + { + "name": "type", + "title": "类型", + "defaultValue": "normal", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "普通", + "value": "normal" + }, + { + "title": "内联", + "value": "inline" + } + ] + } + }, + "ExpressionSetter" + ] + } + } + }, + { + "name": "innerAfter", + "title": "单位", + "setter": ["StringSetter", "ExpressionSetter"] + }, + { + "name": "step", + "title": "步长", + "defaultValue": 1, + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "precision", + "title": "小数位数", + "defaultValue": 0, + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "max", + "title": "最大值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "min", + "title": "最小值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "editable", + "title": "可以输入", + "defaultValue": true, + "setter": ["BoolSetter", "ExpressionSetter"] + }, + { + "name": "format", + "title": "格式化", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + } + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + }, + { + "name": "style", + "setter": { + "componentName": "StyleSetter" + } + } + ], + "supports": { + "events": ["onChange", "onKeyDown", "onFocus", "onBlur", "onCorrect"] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Page", + "title": "页面", + "props": [ + { + "name": "style", + "propType": "object", + "defaultValue": { + "padding": 12 + } + } + ], + "configure": { + "supports": { + "style": true + }, + "component": { + "isContainer": true, + "disableBehaviors": "*", + "nestingRule": { + "childWhitelist": ["NextPage"] + } + } + }, + "category": "基础" + }, + { + "componentName": "Pagination", + "title": "翻页器", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Pagination", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "type", + "title": { + "label": "组件类型", + "tip": "分页组件类型" + }, + "propType": { + "type": "oneOf", + "value": ["normal", "simple", "mini"] + }, + "description": "分页组件类型", + "defaultValue": "normal" + }, + { + "name": "shape", + "title": { + "label": "按钮样式", + "tip": "前进后退按钮样式" + }, + "propType": { + "type": "oneOf", + "value": ["normal", "arrow-only", "arrow-prev-only", "no-border"] + }, + "description": "前进后退按钮样式", + "defaultValue": "normal" + }, + { + "name": "size", + "title": { + "label": "尺寸", + "tip": "分页组件大小" + }, + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "分页组件大小", + "defaultValue": "medium" + }, + { + "name": "current", + "propType": "number", + "description": "（受控）当前页码" + }, + { + "name": "defaultCurrent", + "title": { + "label": "初始页码", + "tip": "（非受控）初始页码" + }, + "propType": "number", + "description": "（非受控）初始页码", + "defaultValue": 1 + }, + { + "name": "onChange", + "propType": "func", + "description": "页码发生改变时的回调函数\n@param {Number} current 改变后的页码数\n@param {Object} e 点击事件对象" + }, + { + "name": "total", + "propType": "number", + "description": "总记录数", + "defaultValue": 100 + }, + { + "name": "totalRender", + "propType": "func", + "title": { + "label": "总数渲染", + "tip": "总数的渲染函数\n@param {Number} total 总数\n@param {Array} range 当前数据在总数中的区间" + } + }, + { + "name": "pageShowCount", + "propType": "number", + "title": { + "label": "显示页数", + "tip": "页码显示的数量，更多的使用...代替" + }, + "defaultValue": 5 + }, + { + "name": "pageSize", + "title": { + "label": "单页记录", + "tip": "一页中的记录数" + }, + "propType": "number", + "description": "一页中的记录数", + "defaultValue": 10 + }, + { + "name": "pageSizeSelector", + "title": { + "label": "选择器类型", + "tip": "每页显示选择器类型" + }, + "propType": { + "type": "oneOf", + "value": [false, "filter", "dropdown"] + }, + "description": "每页显示选择器类型", + "defaultValue": false + }, + { + "name": "pageNumberRender", + "propType": "func", + "title": { + "label": "自定义页码", + "tip": "自定义页码渲染函数，函数作用于页码button以及当前页/总页数的数字渲染\n@param {Number} index 分页的页码，从1开始\n@return {ReactNode} 返回渲染结果" + } + }, + { + "name": "pageSizePosition", + "title": { + "label": "选择器位置", + "tip": "每页显示选择器在组件中的位置" + }, + "propType": { + "type": "oneOf", + "value": ["start", "end"] + }, + "description": "每页显示选择器在组件中的位置", + "defaultValue": "start" + }, + { + "name": "onPageSizeChange", + "propType": "func", + "description": "每页显示记录数量改变时的回调函数\n@param {Number} pageSize 改变后的每页显示记录数" + }, + { + "name": "hideOnlyOnePage", + "propType": "bool", + "title": { + "label": "单页隐藏", + "tip": "当分页数为1时，是否隐藏分页器" + }, + "defaultValue": false + }, + { + "name": "showJump", + "propType": "bool", + "title": { + "label": "显示跳转", + "tip": "type 设置为 normal 时，在页码数超过5页后，会显示跳转输入框与按钮，当设置 showJump 为 false 时，不再显示该跳转区域" + }, + "defaultValue": true + }, + { + "name": "link", + "title": { + "label": "跳转链接", + "tip": "设置页码按钮的跳转链接，它的值为一个包含 {page} 的模版字符串" + }, + "propType": "string", + "description": "设置页码按钮的跳转链接，它的值为一个包含 {page} 的模版字符串" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "rtl", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "current", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "title": { + "label": "当前页面", + "tip": "（受控）当前页码" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["NumberSetter", "ExpressionSetter"] + } + } + }, + { + "name": "total", + "title": { + "label": "总记录数", + "tip": "总记录数" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["NumberSetter", "ExpressionSetter"] + } + } + } + ] + } + }, + "icon": "", + "category": "导航" + }, + { + "componentName": "Paragraph", + "title": "Paragraph", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Typography", + "main": "", + "destructuring": true, + "subName": "Paragraph" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "component", + "propType": { + "type": "instanceOf", + "value": "elementType" + }, + "description": "设置标签类型", + "defaultValue": "p" + }, + { + "name": "type", + "defaultValue": "long" + }, + { + "name": "size", + "defaultValue": "medium" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "title": "饼图", + "category": "常用图表(试验)", + "componentName": "PieChart", + "icon": "https://unpkg.alibaba-inc.com/@ali/vc-bizcharts@1.1.4/src/vc-PieChart/logo.svg", + "npm": { + "package": "bizcharts", + "version": "4.0.14", + "exportName": "PieChart", + "main": "", + "destructuring": true, + "subName": "" + }, + "configure": { + "props": [ + { + "name": "angleField", + "title": "占比字段", + "tip": "扇形切片大小（弧度）所对应的数据字段名", + "setter": "StringSetter" + }, + { + "name": "colorField", + "title": "颜色字段", + "tip": "扇形颜色映射对应的数据字段名", + "setter": "StringSetter" + }, + { + "name": "titleConfig", + "title": "标题配置", + "display": "block", + "type": "group", + "items": [ + { + "name": "title.text", + "title": "标题", + "setter": "StringSetter" + }, + { + "name": "title.visible", + "title": "是否展示", + "setter": "BoolSetter" + } + ] + }, + { + "name": "descriptionConfig", + "title": "描述配置", + "display": "block", + "type": "group", + "items": [ + { + "name": "description.text", + "title": "描述", + "setter": "StringSetter" + }, + { + "name": "description.visible", + "title": "是否展示", + "setter": "BoolSetter" + } + ] + }, + { + "name": "data", + "title": "图表数据", + "tip": "配置图表数据", + "setter": "JsonSetter" + } + ], + "supports": { + "style": true + } + } + }, + { + "componentName": "PopupItem", + "title": "PopupItem", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Nav", + "main": "", + "destructuring": true, + "subName": "PopupItem" + }, + "props": [ + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "icon", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "instanceOf", + "value": "node" + } + ] + }, + "description": "自定义图标，可以使用 Icon 的 type, 也可以使用组件 ``" + }, + { + "name": "label", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "标签内容" + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "弹出内容" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "Progress", + "title": "进度指示器", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Progress", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "shape", + "propType": { + "type": "oneOf", + "value": ["circle", "line"] + }, + "description": "形态", + "defaultValue": "line" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "尺寸", + "defaultValue": "medium" + }, + { + "name": "percent", + "title": "百分比", + "propType": "number", + "description": "所占百分比", + "defaultValue": 0 + }, + { + "name": "state", + "title": "进度状态", + "propType": { + "type": "oneOf", + "value": ["normal", "success", "error"] + }, + "description": "进度状态, 显示优先级: color > progressive > state", + "defaultValue": "normal" + }, + { + "name": "progressive", + "title": { + "label": "色阶变化", + "tip": "是否为色彩阶段变化模式, 显示优先级: color > progressive > state" + }, + "propType": "bool", + "description": "是否为色彩阶段变化模式, 显示优先级: color > progressive > state", + "defaultValue": false + }, + { + "name": "hasBorder", + "title": "边框", + "propType": "bool", + "description": "是否添加 Border（只适用于 Line Progress)", + "defaultValue": false + }, + { + "name": "textRender", + "title": { + "label": "文本渲染", + "tip": "文本渲染函数\n@param {Number} percent 当前的进度信息\n@param {Object} option 额外的参数\n@property {Boolean} option.rtl 是否在rtl 模式下渲染\n@return {ReactNode} 返回文本节点" + }, + "propType": "func", + "description": "文本渲染函数\n@param {Number} percent 当前的进度信息\n@param {Object} option 额外的参数\n@property {Boolean} option.rtl 是否在rtl 模式下渲染\n@return {ReactNode} 返回文本节点" + }, + { + "name": "color", + "propType": "string", + "description": "进度条颜色, 显示优先级: color > progressive > state" + }, + { + "name": "backgroundColor", + "propType": "string", + "description": "背景色" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "rtl", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "color", + "title": { + "label": "进度条颜色", + "tip": "color|进度条颜色, 显示优先级: color > progressive > state" + }, + "setter": { + "componentName": "ColorSetter" + } + }, + { + "name": "backgroundColor", + "title": { + "label": "背景色", + "tip": "backgroundColor|背景色" + }, + "setter": { + "componentName": "ColorSetter" + } + } + ] + } + }, + "icon": "", + "category": "反馈" + }, + { + "componentName": "RadioItem", + "title": "单选菜单项", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Menu", + "main": "", + "destructuring": true, + "subName": "RadioItem" + }, + "props": [ + { + "name": "checked", + "propType": "bool", + "description": "是否选中", + "defaultValue": false + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "onChange", + "propType": "func", + "description": "选中或取消选中触发的回调函数\n@param {Boolean} checked 是否选中\n@param {Object} event 选中事件对象" + }, + { + "name": "helper", + "propType": "node", + "description": "帮助文本" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["Menu", "SubMenu", "Menu.Group", "MenuButton"] + } + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Radio.Group", + "title": "单选框组", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Radio", + "main": "", + "destructuring": true, + "subName": "Group" + }, + "props": [ + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "name", + "propType": "string", + "description": "name" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["large", "medium", "small"] + }, + "description": "尺寸", + "defaultValue": "medium" + }, + { + "name": "shape", + "propType": { + "type": "oneOf", + "value": ["normal", "button"] + }, + "description": "展示形态" + }, + { + "name": "value", + "propType": { + "type": "oneOfType", + "value": ["string", "number", "bool"] + }, + "description": "选中项的值" + }, + { + "name": "defaultValue", + "propType": { + "type": "oneOfType", + "value": ["string", "number", "bool"] + }, + "description": "默认值" + }, + { + "name": "component", + "propType": "string", + "description": "设置标签类型", + "defaultValue": "div" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否被禁用" + }, + { + "name": "dataSource", + "propType": "object", + "description": "可选项列表" + }, + { + "name": "itemDirection", + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "子项目的排列方式", + "defaultValue": "hoz" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态", + "defaultValue": false + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {number} value 评分值" + }, + { + "name": "onChange", + "propType": "func", + "description": "选中值改变时的事件\n@param {String/Number} value 选中项的值\n@param {Event} e Dom 事件对象" + } + ], + "configure": { + "props": [ + { + "name": "shape", + "title": "展示形状", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "默认", + "value": "normal" + }, + { + "title": "按钮", + "value": "button" + } + ] + } + }, + "defaultValue": "normal" + }, + { + "name": "disabled", + "title": "是否禁用", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + } + }, + { + "name": "itemDirection", + "title": "排列方式", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "水平排列", + "value": "hoz" + }, + { + "title": "垂直排列", + "value": "ver" + } + ] + } + }, + "defaultValue": "hoz" + }, + { + "name": "isPreview", + "title": "预览态", + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "defaultValue", + "title": "默认值", + "defaultValue": "", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + } + }, + { + "name": "dataSource", + "display": "block", + "title": "选项", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "label", + "title": "label", + "setter": "StringSetter" + }, + { + "name": "value", + "title": "value", + "setter": "StringSetter" + } + ] + } + }, + "initialValue": { + "label": "选项一", + "value": "1" + } + } + } + }, + "ExpressionSetter" + ] + } + } + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ], + "supports": { + "style": true, + "events": ["onChange"] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Radio", + "title": "单选框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Radio", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "id", + "propType": "string", + "description": "input元素id" + }, + { + "name": "name", + "propType": "string", + "description": "name" + }, + { + "name": "checked", + "propType": "bool", + "description": "是否选中" + }, + { + "name": "defaultChecked", + "propType": "bool", + "description": "是否默认选中" + }, + { + "name": "label", + "propType": "string", + "description": "通过属性配置label" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否被禁用" + }, + { + "name": "value", + "propType": { + "type": "oneOfType", + "value": ["string", "number", "bool"] + }, + "description": "value" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态", + "defaultValue": false + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容" + }, + { + "name": "onChange", + "propType": "func", + "description": "状态变化时触发的事件\n@param {Boolean} checked 是否选中\n@param {Event} e Dom 事件对象" + }, + { + "name": "onMouseEnter", + "propType": "func", + "description": "鼠标进入enter事件\n@param {Event} e Dom 事件对象" + }, + { + "name": "onMouseLeave", + "propType": "func", + "description": "鼠标离开事件\n@param {Event} e Dom 事件对象" + } + ], + "icon": "", + "category": "内容" + }, + { + "componentName": "RangeCalendar", + "title": "RangeCalendar", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Calendar", + "main": "", + "destructuring": true, + "subName": "RangeCalendar" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "description": "样式前缀", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "defaultStartValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "默认的开始日期" + }, + { + "name": "defaultEndValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "默认的结束日期" + }, + { + "name": "startValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "开始日期（moment 对象）" + }, + { + "name": "endValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "结束日期（moment 对象）" + }, + { + "name": "disableChangeMode", + "propType": "bool", + "defaultValue": false + }, + { + "name": "format", + "propType": "string", + "defaultValue": "YYYY-MM-DD" + }, + { + "name": "showOtherMonth", + "propType": "bool", + "description": "是否显示非本月的日期", + "defaultValue": false + }, + { + "name": "defaultVisibleMonth", + "propType": "func", + "description": "模板展示的月份（起始月份）" + }, + { + "name": "onVisibleMonthChange", + "propType": "func", + "description": "展现的月份变化时的回调\n@param {Object} value 显示的月份 (moment 对象)\n@param {String} reason 触发月份改变原因" + }, + { + "name": "disabledDate", + "propType": "func", + "description": "不可选择的日期\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\n@returns {Boolean}" + }, + { + "name": "onSelect", + "propType": "func", + "description": "选择日期单元格时的回调\n@param {Object} value 对应的日期值 (moment 对象)" + }, + { + "name": "dateCellRender", + "propType": "func", + "description": "自定义日期单元格渲染" + }, + { + "name": "monthCellRender", + "propType": "func", + "description": "自定义月份渲染函数\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@returns {ReactNode}" + }, + { + "name": "yearCellRender", + "propType": "func" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "startValue", + "setter": "DateSetter" + }, + { + "name": "defaultStartValue", + "setter": "DateSetter" + }, + { + "name": "defaultEndValue", + "setter": "DateSetter" + }, + { + "name": "endValue", + "setter": "DateSetter" + } + ] + } + }, + "category": "基础" + }, + { + "componentName": "RangePicker", + "title": "日期区段选择", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "DatePicker", + "main": "", + "destructuring": true, + "subName": "RangePicker" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "type", + "propType": { + "type": "oneOf", + "value": ["date", "month", "year"] + }, + "description": "日期范围类型", + "defaultValue": "date" + }, + { + "name": "defaultVisibleMonth", + "propType": "func", + "description": "默认展示的起始月份\n@return {MomentObject} 返回包含指定月份的 moment 对象实例" + }, + { + "name": "onVisibleMonthChange", + "propType": "func" + }, + { + "name": "value", + "propType": "array", + "description": "日期范围值数组 [moment, moment]" + }, + { + "name": "defaultValue", + "propType": "array", + "description": "初始的日期范围值数组 [moment, moment]" + }, + { + "name": "format", + "propType": "string", + "description": "日期格式", + "defaultValue": "YYYY-MM-DD" + }, + { + "name": "showTime", + "propType": "bool", + "description": "是否使用时间控件，支持传入 TimePicker 的属性", + "defaultValue": false + }, + { + "name": "resetTime", + "propType": "bool", + "description": "每次选择是否重置时间（仅在 showTime 开启时有效）", + "defaultValue": false + }, + { + "name": "disabledDate", + "propType": "func", + "description": "禁用日期函数\n@param {MomentObject} 日期值\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\n@return {Boolean} 是否禁用" + }, + { + "name": "footerRender", + "propType": "func", + "description": "自定义面板页脚\n@return {Node} 自定义的面板页脚组件" + }, + { + "name": "onChange", + "propType": "func", + "description": "日期范围值改变时的回调 [ MomentObject|String, MomentObject|String ]\n@param {Array} value 日期值" + }, + { + "name": "onOk", + "propType": "func", + "description": "点击确认按钮时的回调 返回开始时间和结束时间`[ MomentObject|String, MomentObject|String ]`\n@return {Array} 日期范围" + }, + { + "name": "label", + "propType": "string", + "description": "输入框内置标签" + }, + { + "name": "state", + "propType": { + "type": "oneOf", + "value": ["error", "loading", "success"] + }, + "description": "输入框状态" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "输入框尺寸", + "defaultValue": "medium" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "hasClear", + "propType": "bool", + "description": "是否显示清空按钮", + "defaultValue": true + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层显示状态" + }, + { + "name": "defaultVisible", + "propType": "bool", + "description": "弹层默认是否显示", + "defaultValue": false + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层展示状态变化时的回调\n@param {Boolean} visible 弹层是否显示\n@param {String} type 触发弹层显示和隐藏的来源 okBtnClick 表示由确认按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "popupTriggerType", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "弹层触发方式", + "defaultValue": "click" + }, + { + "name": "popupAlign", + "propType": "string", + "description": "弹层对齐方式, 具体含义见 OverLay文档", + "defaultValue": "tl tl" + }, + { + "name": "popupContainer", + "propType": "node", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹层自定义样式类" + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "startDateInputAriaLabel", + "propType": "string", + "description": "开始日期输入框的 aria-label 属性" + }, + { + "name": "startTimeInputAriaLabel", + "propType": "string", + "description": "开始时间输入框的 aria-label 属性" + }, + { + "name": "endDateInputAriaLabel", + "propType": "string", + "description": "结束日期输入框的 aria-label 属性" + }, + { + "name": "endTimeInputAriaLabel", + "propType": "string", + "description": "结束时间输入框的 aria-label 属性" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "name", + "propType": "string" + }, + { + "name": "popupComponent", + "propType": "string" + }, + { + "name": "popupContent", + "propType": "node" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "supports": { + "style": true, + "events": ["onVisibleMonthChange", "onChange", "onOk", "onVisibleChange"] + }, + "props": [ + { + "name": "defaultValue", + "title": { + "label": "默认值", + "tip": "初始的日期范围值数组 [moment, moment]" + }, + "setter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": 0, + "title": "开始时间", + "setter": "DateSetter" + }, + { + "name": 1, + "title": "结束时间", + "setter": "DateSetter" + } + ] + } + } + } + }, + { + "name": "type", + "title": "日期类型", + "setter": { + "setter": "RadioGroupSetter", + "props": { + "options": ["date", "month", "year"] + } + }, + "description": "日期范围类型", + "defaultValue": "date" + }, + { + "name": "label", + "title": "内置标签", + "setter": "StringSetter", + "description": "输入框内置标签" + }, + { + "name": "state", + "title": "输入状态", + "setter": { + "setter": "RadioGroupSetter", + "props": { + "options": ["error", "loading", "success"] + } + }, + "description": "输入框状态" + }, + { + "name": "size", + "title": "尺寸", + "setter": { + "setter": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "description": "输入框尺寸", + "defaultValue": "medium" + }, + { + "name": "disabled", + "setter": "BoolSetter", + "title": "是否禁用" + }, + { + "name": "hasClear", + "setter": "BoolSetter", + "title": "清空按钮", + "defaultValue": true + }, + { + "name": "defaultVisible", + "setter": "BoolSetter", + "title": "显示弹层", + "defaultValue": false + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ] + }, + "category": "内容", + "icon": "" + }, + { + "componentName": "Range", + "title": "区段选择器", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Range", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "id", + "propType": "string" + }, + { + "name": "name", + "propType": "string", + "description": "name" + }, + { + "name": "value", + "propType": "number", + "description": "分值" + }, + { + "name": "slider", + "title": { + "label": "滑块个数", + "tip": "滑块个数: 单个, 两个" + }, + "propType": { + "type": "oneOf", + "value": ["single", "double"] + }, + "description": "滑块个数\n@enumdesc 单个, 两个", + "defaultValue": "single" + }, + { + "name": "min", + "title": { + "label": "最小值" + }, + "propType": "number", + "description": "最小值", + "defaultValue": 0 + }, + { + "name": "max", + "title": { + "label": "最大值" + }, + "propType": "number", + "description": "最大值", + "defaultValue": 100 + }, + { + "name": "step", + "title": { + "label": "步长", + "tip": "步长，取值必须大于 0，并且可被 (max - min) 整除。" + }, + "propType": "number", + "description": "步长，取值必须大于 0，并且可被 (max - min) 整除。", + "defaultValue": 1 + }, + { + "name": "marksPosition", + "title": { + "label": "Marks 位置", + "tip": "marksPosition|marks显示在上方('above')or下方('below')" + }, + "propType": { + "type": "oneOf", + "value": ["above", "below"] + }, + "description": "marks显示在上方('above')or下方('below')", + "defaultValue": "above" + }, + { + "name": "disabled", + "propType": "bool", + "description": "值为 `true` 时，滑块为禁用状态", + "defaultValue": false + }, + { + "name": "onChange", + "propType": "func", + "description": "当 Range 的值发生改变后，会触发 onChange 事件，并把改变后的值作为参数传入, 如果设置了value, 要配合此函数做受控使用\n@param {String/number} value" + }, + { + "name": "onProcess", + "propType": "func", + "description": "滑块拖动的时候触发的事件,不建议在这里setState, 一般情况下不需要用, 滑动时有特殊需求时使用\n@param {String/number} value" + }, + { + "name": "hasTip", + "title": { + "label": "是否显示 tip", + "tip": "hasTip" + }, + "propType": "bool", + "description": "是否显示 tip", + "defaultValue": true + }, + { + "name": "reverse", + "title": { + "label": "选中态反转", + "tip": "reverse" + }, + "propType": "bool", + "description": "选中态反转", + "defaultValue": false + }, + { + "name": "pure", + "propType": "bool", + "description": "是否pure render", + "defaultValue": false + }, + { + "name": "fixedWidth", + "propType": "bool", + "description": "是否为拖动线段类型,默认slider为double, defaultValue必传且指定区间", + "defaultValue": false + }, + { + "name": "tooltipVisible", + "propType": "bool", + "description": "tooltip是否默认展示", + "defaultValue": false + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态", + "defaultValue": false + } + ], + "configure": { + "props": [ + { + "name": "value", + "title": "当前值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "defaultValue", + "title": "默认值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "min", + "title": { + "label": "最小值" + }, + "setter": "NumberSetter", + "description": "最小值", + "defaultValue": 0 + }, + { + "name": "max", + "title": { + "label": "最大值" + }, + "setter": "NumberSetter", + "description": "最大值", + "defaultValue": 100 + }, + { + "name": "step", + "title": { + "label": "步长", + "tip": "步长，取值必须大于 0，并且可被 (max - min) 整除。" + }, + "setter": "NumberSetter", + "description": "步长，取值必须大于 0，并且可被 (max - min) 整除。", + "defaultValue": 1 + }, + { + "name": "slider", + "title": { + "label": "滑块个数", + "tip": "滑块个数: 单个, 两个" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["single", "double"] + } + }, + "description": "滑块个数\n@enumdesc 单个, 两个", + "defaultValue": "single" + }, + { + "name": "marksPosition", + "title": { + "label": "Marks 位置", + "tip": "marksPosition|marks显示在上方('above')or下方('below')" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["above", "below"] + } + }, + "description": "marks显示在上方('above')or下方('below')", + "defaultValue": "above" + }, + { + "name": "disabled", + "title": "是否禁用", + "setter": "BoolSetter", + "description": "值为 `true` 时，滑块为禁用状态", + "defaultValue": false + }, + { + "name": "hasTip", + "title": { + "label": "显示 Tip", + "tip": "hasTip" + }, + "setter": "BoolSetter", + "description": "是否显示 tip", + "defaultValue": true + }, + { + "name": "fixedWidth", + "title": "固定宽度", + "setter": "BoolSetter", + "description": "是否为拖动线段类型,默认slider为double, defaultValue必传且指定区间", + "defaultValue": false + }, + { + "name": "tooltipVisible", + "display": "block", + "setter": "BoolSetter", + "title": "tooltip是否默认展示", + "defaultValue": false + }, + { + "name": "reverse", + "display": "block", + "title": { + "label": "选中态反转", + "tip": "reverse" + }, + "setter": "BoolSetter", + "description": "选中态反转", + "defaultValue": false + }, + { + "name": "isPreview", + "display": "block", + "setter": "BoolSetter", + "title": "是否为预览态", + "defaultValue": false + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ] + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Rating", + "title": "评分", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Rating", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "name", + "propType": "string", + "description": "name" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "defaultValue", + "propType": "number", + "description": "默认值", + "defaultValue": 0 + }, + { + "name": "value", + "propType": "number", + "description": "值" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "尺寸", + "defaultValue": "medium" + }, + { + "name": "count", + "propType": "number", + "description": "评分的总数", + "defaultValue": 5 + }, + { + "name": "showGrade", + "propType": "bool", + "description": "是否显示 grade", + "defaultValue": false + }, + { + "name": "allowHalf", + "propType": "bool", + "description": "是否允许半星评分", + "defaultValue": false + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态", + "defaultValue": false + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容" + }, + { + "name": "readOnly", + "propType": "bool", + "description": "是否为只读态，效果上同 disabeld", + "defaultValue": false + }, + { + "name": "onChange", + "propType": "func", + "description": "用户点击评分时触发的回调\n@param {String} value 评分值" + }, + { + "name": "onHoverChange", + "propType": "func", + "description": "用户hover评分时触发的回调\n@param {String} value 评分值" + } + ], + "configure": { + "props": [ + { + "name": "value", + "title": "当前值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "defaultValue", + "title": "默认值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 尺寸\n@enumdesc 小, 中, 大", + "en_US": "prop: size | description: size" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "defaultValue": "medium" + }, + { + "name": "count", + "title": "评分总数", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "allowHalf", + "title": "半星评分", + "setter": ["BoolSetter", "ExpressionSetter"] + }, + { + "name": "showGrade", + "title": "显示分数", + "setter": ["BoolSetter", "ExpressionSetter"] + }, + { + "name": "readAs", + "title": "评分文案生成方法", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + } + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + }, + { + "name": "style", + "setter": { + "componentName": "StyleSetter" + } + } + ], + "supports": { + "events": ["onChange", "onHoverChange"] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "ResponsiveGrid.Cell", + "title": "布局容器 Cell", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "ResponsiveGrid", + "main": "", + "destructuring": true, + "subName": "Cell" + }, + "props": [ + { + "name": "colSpan", + "propType": "number", + "description": "横向，占据几列" + }, + { + "name": "rowSpan", + "propType": "number", + "description": "纵向，占据几行" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + } + }, + "experimental": { + "getResizingHandlers": { + "type": "JSFunction", + "value": "node => {\n const currentNodeIndex = node.getIndex();\n const parent = node.getParent();\n if (!parent) return [];\n let layout = parent.getPropValue(\"layout\");\n if (!layout) return [];\n layout = layout.split(\":\").map(item => parseInt(item, 10));\n \n if (currentNodeIndex >= layout.length - 1) {\n return [];\n }\n return [\"e\"];\n }" + }, + "callbacks": { + "onResizeStart": { + "type": "JSFunction", + "value": "(e, currentNode) => {\n const { trigger } = e;\n let nodeIndex = currentNode.getIndex();\n let startLayout = currentNode.getParent().getPropValue(\"layout\");\n startLayout = startLayout.split(\":\").map(item => parseInt(item, 10));\n let eachWidth = currentNode.getRect().width / startLayout[nodeIndex];\n \n currentNode.nodeIndex = nodeIndex;\n currentNode.startLayout = startLayout;\n currentNode.eachWidth = eachWidth;\n }" + }, + "onResize": { + "type": "JSFunction", + "value": "(e, currentNode) => {\n const { trigger, deltaX, deltaY } = e;\n const { nodeIndex, startLayout, eachWidth } = currentNode;\n let moveColumn = Math.round(deltaX / eachWidth);\n const layout = [...startLayout]; \n if (moveColumn > 0) {\n moveColumn = Math.min(moveColumn, layout[nodeIndex + 1] - 1);\n } else {\n moveColumn = -Math.min(-moveColumn, layout[nodeIndex] - 1);\n }\n layout[nodeIndex] += moveColumn;\n layout[nodeIndex + 1] -= moveColumn;\n \n let nextNode = currentNode\n .getParent()\n .getChildren()\n .filter((c, index) => {\n return index === nodeIndex + 1;\n });\n \n currentNode.setPropValue(\"colSpan\", layout[nodeIndex]);\n \n if (nextNode && nextNode[0]) {\n nextNode[0].setPropValue(\"colSpan\", layout[nodeIndex + 1]);\n }\n \n currentNode.getParent().setPropValue(\"layout\", layout.join(\":\"));\n }" + } + } + }, + "icon": "", + "category": "容器" + }, + { + "componentName": "ResponsiveGrid", + "title": "布局容器", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "ResponsiveGrid", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "any" + }, + { + "name": "device", + "propType": { + "type": "oneOf", + "value": ["phone", "tablet", "desktop"] + }, + "description": "设备，用来做自适应，默认为PC", + "defaultValue": "desktop" + }, + { + "name": "columns", + "propType": "number", + "description": "分为几列", + "defaultValue": 12 + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": [ + { + "name": "layout", + "title": "布局", + "defaultValue": "6:6", + "setter": { + "componentName": "StringSetter" + }, + "extraProps": { + "setValue": { + "type": "JSFunction", + "value": "setValue(target, value) {\n \n let arrValue = value.split(\":\");\n arrValue = arrValue.filter(item => {\n return item && item.trim(); \n });\n const flag = arrValue.find(item => {\n return isNaN(Number(item));\n });\n if (flag) {\n return;\n }\n const node = target.getNode();\n node.mergeChildren(\n (child, index) => {\n child.setPropValue(\"colSpan\", arrValue[index]);\n return index >= arrValue.length;\n },\n children => {\n let l = children.length;\n const items = [];\n while (l++ < arrValue.length) {\n items.push({\n componentName: \"ResponsiveGrid.Cell\",\n props: {\n colSpan: arrValue[l - 1] || 1\n }\n });\n }\n return items;\n },\n null\n );\n }" + } + } + }, + { + "name": "gap", + "title": "列间距", + "defaultValue": 0, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "NumberSetter", + "props": { + "defaultValue": 8 + } + }, + { + "componentName": "JsonSetter", + "props": { + "defaultValue": [8, 4] + } + }, + "ExpressionSetter" + ] + } + } + }, + { + "name": "dense", + "title": "紧密模式", + "defaultValue": false, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + } + }, + { + "name": "style", + "setter": { + "componentName": "StyleSetter" + } + } + ] + }, + "icon": "", + "category": "容器" + }, + { + "componentName": "RichText", + "title": "需求占位", + "npm": { + "package": "@alifd/ali-lowcode-components", + "version": "latest", + "exportName": "RichText", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "override": [ + { + "name": "style", + "propType": "object" + }, + { + "name": "maxHeight", + "title": "最大高度", + "propType": "number", + "setter": "NumberSetter", + "description": "最大高度" + }, + { + "name": "content", + "title": "需求内容", + "display": "inline", + "supportVariable": true, + "setter": { + "componentName": "EditSetter", + "props": { + "title": "点击编辑需求内容" + } + } + } + ] + } + }, + "experimental": { + "getResizingHandlers": { + "type": "JSFunction", + "value": "() => {\n return [\"e\"];\n }" + }, + "callbacks": { + "onResizeStart": { + "type": "JSFunction", + "value": "(e, currentNode) => {\n const parent = currentNode.getParent();\n if (parent) {\n const parentNode = parent.getDOMNode();\n if (parentNode) {\n currentNode.parentRect = parentNode.getBoundingClientRect();\n }\n }\n currentNode.beforeSpan = currentNode.getPropValue(\"colSpan\") || 12;\n currentNode.startRect = currentNode.getRect();\n }" + }, + "onResize": { + "type": "JSFunction", + "value": "(e, currentNode) => {\n const { deltaX } = e;\n const startWidth = currentNode.startRect\n ? currentNode.startRect.width\n : currentNode.beforeSpan * (currentNode.parentRect.width / 12);\n let width = startWidth + deltaX;\n if (!currentNode.startRect) {\n currentNode.startRect = {\n width\n };\n }\n width = Math.max(0, width); \n width = Math.min(width, currentNode.parentRect.width); \n currentNode.getDOMNode().style[\"width\"] = `${Math.round(width)}px`;\n }" + }, + "onResizeEnd": { + "type": "JSFunction", + "value": "(e, currentNode) => {\n currentNode.setPropValue(\"style.width\", currentNode.getDOMNode().style[\"width\"]);\n }" + } + } + }, + "icon": "https://img.alicdn.com/imgextra/i3/O1CN01G7Lc8e1pZL7p4cdKc_!!6000000005374-2-tps-112-112.png", + "category": "常用" + }, + { + "componentName": "Search", + "title": "搜索", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Search", + "main": "", + "destructuring": true, + "subName": "" + }, + "configure": { + "supports": { + "style": true, + "events": ["onChange", "onSearch", "onFilterChange"] + }, + "props": [ + { + "name": "placeholder", + "title": "提示文字", + "setter": "StringSetter", + "description": "默认提示" + }, + { + "name": "defaultValue", + "title": "默认值", + "setter": "StringSetter", + "description": "搜索框默认值" + }, + { + "name": "searchText", + "title": "按钮文案", + "setter": "StringSetter", + "description": "button 的内容" + }, + { + "name": "size", + "title": { + "label": "尺寸", + "tip": "size|'大', '小'" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "large", + "value": "large" + }, + { + "title": "medium", + "value": "medium" + } + ] + } + }, + "description": "大小\n@enumdesc '大', '小'", + "defaultValue": "medium" + }, + { + "name": "shape", + "title": { + "label": "形状", + "tip": "shape|形状" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["normal", "simple"] + } + }, + "description": "形状", + "defaultValue": "normal" + }, + { + "name": "type", + "title": { + "label": "类型", + "tip": "type|类型 shape=normal: primary/secondary; shape=simple: normal/dark;" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["primary", "secondary", "normal", "dark"] + } + }, + "description": "类型 shape=normal: primary/secondary; shape=simple: normal/dark;", + "defaultValue": "normal" + }, + { + "name": "hasClear", + "title": "清除按钮", + "setter": "BoolSetter", + "description": "是否显示清除按钮", + "defaultValue": false + }, + { + "name": "hasIcon", + "title": "搜索图标", + "setter": "BoolSetter", + "description": "是否显示搜索按钮", + "defaultValue": true + }, + { + "name": "disabled", + "title": "是否禁用", + "setter": "BoolSetter", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "dataSource", + "display": "block", + "title": { + "label": "搜索框下拉联想列表", + "tip": "dataSource | 搜索框下拉联想列表" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["JsonSetter", "ExpressionSetter"] + } + } + }, + { + "name": "filter", + "display": "block", + "title": { + "label": "选择器数据", + "tip": "filter|选择器数据" + }, + "setter": { + "componentName": "JsonSetter" + } + }, + { + "name": "defaultFilterValue", + "display": "block", + "title": "选择器默认值", + "setter": "StringSetter", + "description": "选择器默认值" + } + ] + }, + "experimental": { + "initials": [ + { + "name": "dataSource", + "initial": { + "type": "JSFunction", + "value": "() => [\n {\n label: \"Recent\",\n value: \"Recent\"\n },\n {\n label: \"dress\",\n value: \"dress\"\n },\n {\n label: \"sunglasses\",\n value: \"sunglasses\"\n },\n {\n label: \"t-shirt\",\n value: \"t-shirt\"\n }\n ]" + } + } + ] + }, + "icon": "", + "category": "导航" + }, + { + "componentName": "Select.Option", + "title": "Select.Option", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Select", + "main": "", + "destructuring": true, + "subName": "Option" + }, + "props": [ + { + "name": "value", + "propType": "string", + "description": "选项值", + "defaultValue": "test" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + } + ], + "configure": { + "component": { + "isContainer": true + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Select", + "title": "选择器", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Select", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "placeholder", + "title": { + "label": "占位提示", + "tip": "属性: placeholder" + }, + "defaultValue": "请选择", + "propType": "string" + }, + { + "name": "mode", + "propType": { + "type": "oneOf", + "value": ["single", "multiple", "tag"] + }, + "description": "选择器模式" + }, + { + "name": "hasClear", + "title": { + "label": "清除按钮", + "tip": "属性: hasClear" + }, + "propType": "bool", + "defaultValue": false + }, + { + "name": "showSearch", + "title": { + "label": "可搜索", + "tip": "属性: showSearch" + }, + "propType": "bool", + "defaultValue": false + }, + { + "name": "dataSource" + }, + { + "type": "group", + "title": "其他配置", + "display": "block", + "items": [ + { + "name": "id", + "setter": "StringSetter", + "title": "ID" + }, + { + "name": "notFoundContent", + "title": { + "label": "空文案", + "tip": "notFoundContent|弹层内容为空的文案" + }, + "setter": "StringSetter", + "description": "弹层内容为空的文案" + }, + { + "name": "hasBorder", + "title": { + "label": "边框", + "tip": "是否有边框" + }, + "propType": "bool", + "setter": "BoolSetter", + "description": "是否有边框" + }, + { + "name": "autoWidth", + "title": "下拉等宽", + "propType": "bool", + "setter": "BoolSetter" + }, + { + "name": "hasArrow", + "title": "下拉箭头", + "propType": "bool", + "setter": "BoolSetter", + "description": "是否有下拉箭头", + "defaultValue": true + } + ] + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "dataSource", + "display": "block", + "title": "选项", + "tip": { + "title": "数据格式", + "url": "" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "label", + "title": "label", + "setter": "StringSetter" + }, + { + "name": "value", + "title": "value", + "setter": "StringSetter" + } + ] + } + }, + "initialValue": { + "title": "Title" + } + } + } + }, + "ExpressionSetter" + ] + } + } + }, + { + "name": "mode", + "title": { + "label": "模式", + "tip": "属性: mode" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "defaultValue": "single", + "options": [ + { + "value": "single", + "title": "单选" + }, + { + "value": "multiple", + "title": "多选" + }, + { + "value": "tag", + "title": "标签" + } + ] + } + } + } + ] + }, + "supports": { + "style": true, + "events": [ + { + "name": "onChange", + "propType": "func", + "description": "值发生变化" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层显示隐藏变化" + }, + { + "name": "onRemove", + "propType": "func", + "description": "Tag 被删除" + }, + { + "name": "onSearch", + "propType": "func", + "description": "搜索" + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Slider", + "title": "图片轮播", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Slider", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "className", + "propType": "any", + "description": "自定义传入的样式" + }, + { + "name": "slidesToShow", + "title": { + "label": "图片数量", + "tip": "slidesToShow|同时展示的图片数量" + }, + "propType": "number", + "description": "同时展示的图片数量", + "defaultValue": 1 + }, + { + "name": "slidesToScroll", + "title": { + "label": "同时滑动的图片数量", + "tip": "slidesToScroll" + }, + "propType": "number", + "description": "同时滑动的图片数量", + "defaultValue": 1 + }, + { + "name": "speed", + "title": { + "label": "轮播速度", + "tip": "speed" + }, + "propType": "number", + "description": "轮播速度", + "defaultValue": 600 + }, + { + "name": "activeIndex", + "title": { + "label": "指定轮播图", + "tip": "activeIndex|跳转到指定的轮播图（受控）" + }, + "propType": "number", + "description": "跳转到指定的轮播图（受控）" + }, + { + "name": "adaptiveHeight", + "title": { + "label": "自适应高度", + "tip": "adaptiveHeight" + }, + "propType": "bool", + "description": "是否使用自适应高度", + "defaultValue": false + }, + { + "name": "animation", + "title": { + "label": "动效类型", + "tip": "animation" + }, + "propType": { + "type": "oneOfType", + "value": ["string", "bool"] + }, + "description": "动效类型，默认是'slide'", + "defaultValue": "slide" + }, + { + "name": "arrows", + "title": { + "label": "箭头", + "tip": "arrows|是否显示箭头" + }, + "propType": "bool", + "description": "是否显示箭头", + "defaultValue": true + }, + { + "name": "arrowSize", + "title": { + "label": "箭头大小", + "tip": "arrowSize|导航箭头大小 可选值: 'medium', 'large'" + }, + "propType": { + "type": "oneOf", + "value": ["medium", "large"] + }, + "description": "导航箭头大小 可选值: 'medium', 'large'", + "defaultValue": "medium" + }, + { + "name": "arrowPosition", + "title": { + "label": "箭头位置", + "tip": "arrowPosition|导航箭头位置 可选值: 'inner', 'outer'" + }, + "propType": { + "type": "oneOf", + "value": ["inner", "outer"] + }, + "description": "导航箭头位置 可选值: 'inner', 'outer'", + "defaultValue": "inner" + }, + { + "name": "arrowDirection", + "title": { + "label": "箭头方向", + "tip": "arrowDirection|导航箭头的方向 可选值: 'hoz', 'ver'" + }, + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "导航箭头的方向 可选值: 'hoz', 'ver'", + "defaultValue": "hoz" + }, + { + "name": "autoplay", + "title": { + "label": "自动播放", + "tip": "autoplay" + }, + "propType": "bool", + "description": "是否自动播放", + "defaultValue": false + }, + { + "name": "autoplaySpeed", + "title": { + "label": "自动播放的速度", + "tip": "autoplaySpeed, 默认 3000 毫秒" + }, + "propType": "number", + "description": "自动播放的速度", + "defaultValue": 3000 + }, + { + "name": "nextArrow", + "propType": "node", + "description": "向后箭头", + "defaultValue": null + }, + { + "name": "prevArrow", + "propType": "node", + "description": "向前箭头", + "defaultValue": null + }, + { + "name": "centerMode", + "title": { + "label": "居中模式", + "tip": "centerMode" + }, + "propType": "bool", + "description": "是否启用居中模式", + "defaultValue": false + }, + { + "name": "dots", + "title": { + "label": "导航锚点", + "tip": "dots|是否显示导航锚点" + }, + "propType": "bool", + "description": "是否显示导航锚点", + "defaultValue": true + }, + { + "name": "dotsDirection", + "title": { + "label": "导航锚点位置", + "tip": "dotsDirection" + }, + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "导航锚点位置", + "defaultValue": "hoz" + }, + { + "name": "draggable", + "title": { + "label": "可拖拽", + "tip": "draggable" + }, + "propType": "bool", + "description": "是否可拖拽", + "defaultValue": true + }, + { + "name": "infinite", + "title": { + "label": "无穷循环", + "tip": "infinite" + }, + "propType": "bool", + "description": "是否使用无穷循环模式", + "defaultValue": true + }, + { + "name": "defaultActiveIndex", + "title": { + "label": "初始轮播图", + "tip": "defaultActiveIndex|初始被激活的轮播图" + }, + "propType": "number", + "description": "初始被激活的轮播图", + "defaultValue": 0 + }, + { + "name": "lazyLoad", + "title": { + "label": "懒加载", + "tip": "lazyLoad|是否启用懒加载" + }, + "propType": "bool", + "description": "是否启用懒加载", + "defaultValue": false + }, + { + "name": "slideDirection", + "title": { + "label": "轮播方向", + "tip": "slideDirection" + }, + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "轮播方向", + "defaultValue": "hoz" + }, + { + "name": "triggerType", + "title": { + "label": "触发方式", + "tip": "triggerType|锚点导航触发方式" + }, + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "锚点导航触发方式", + "defaultValue": "click" + }, + { + "name": "onChange", + "propType": "func", + "description": "轮播切换的回调函数\n@param {Number} index 幻灯片的索引" + }, + { + "name": "onBeforeChange", + "propType": "func" + }, + { + "name": "style", + "propType": "object", + "description": "自定义传入的class", + "defaultValue": null + }, + { + "name": "focusOnSelect", + "title": { + "label": "自动居中", + "tip": "focusOnSelect|多图轮播时，点击选中后自动居中" + }, + "propType": "bool", + "description": "多图轮播时，点击选中后自动居中", + "defaultValue": false + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "rtl", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "SplitButton", + "title": "分隔按钮", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "SplitButton", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "label", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "主按钮的文案" + }, + { + "name": "type", + "title": "按钮类型", + "propType": { + "type": "oneOf", + "value": ["normal", "primary", "secondary"] + }, + "description": "按钮的类型", + "defaultValue": "normal" + }, + { + "name": "size", + "title": "按钮尺寸", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "按钮组的尺寸", + "defaultValue": "medium" + }, + { + "name": "component", + "title": "标签类型", + "propType": { + "type": "oneOf", + "value": ["button", "a"] + }, + "defaultValue": "button", + "description": "设置标签类型" + }, + { + "name": "ghost", + "title": "幽灵按钮", + "propType": { + "type": "oneOf", + "value": ["light", "dark", false, true] + }, + "description": "是否为幽灵按钮" + }, + { + "name": "defaultSelectedKeys", + "propType": { + "type": "instanceOf", + "value": "array" + }, + "description": "默认激活的菜单项（用法同 Menu 非受控）", + "defaultValue": [] + }, + { + "name": "selectedKeys", + "propType": { + "type": "instanceOf", + "value": "array" + }, + "description": "激活的菜单项（用法同 Menu 受控）" + }, + { + "name": "selectMode", + "title": "单选多选", + "propType": { + "type": "oneOf", + "value": ["single", "multiple"] + }, + "defaultValue": "single", + "description": "菜单的选择模式" + }, + { + "name": "onSelect", + "propType": "func", + "description": "选择菜单项时的回调，参考 Menu" + }, + { + "name": "onItemClick", + "propType": "func", + "description": "点击菜单项时的回调，参考 Menu" + }, + { + "name": "triggerProps", + "propType": "object", + "description": "触发按钮的属性（支持 Button 的所有属性透传）" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层显示状态变化时的回调函数\n@param {Boolean} visible 弹层显示状态\n@param {String} type 触发弹层显示或隐藏的来源 menuSelect 表示由menu触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "popupTriggerType", + "title": "弹层触发", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "弹层的触发方式", + "defaultValue": "click" + }, + { + "name": "popupAlign", + "title": "弹层对齐", + "propType": "string", + "description": "弹层对齐方式, 详情见Overlay align" + }, + { + "name": "popupStyle", + "propType": "object", + "description": "弹层自定义样式" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹层自定义样式类" + }, + { + "name": "popupProps", + "propType": "object", + "description": "透传给弹层的属性" + }, + { + "name": "autoWidth", + "title": "自动宽度", + "propType": "bool", + "description": "弹层菜单的宽度是否与按钮组一致", + "defaultValue": true + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层是否显示" + }, + { + "name": "defaultVisible", + "title": "默认显示", + "defaultValue": true, + "propType": "bool", + "description": "弹层默认是否显示" + }, + { + "name": "followTrigger", + "title": "跟随滚动", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "menuProps", + "propType": "object", + "description": "透传给 Menu 的属性" + }, + { + "name": "leftButtonProps", + "propType": "object", + "description": "透传给 左侧按钮 的属性" + }, + { + "name": "className", + "propType": "string" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [ + { + "name": "prefix", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "defaultSelectedKeys", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "selectedKeys", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "triggerProps", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "leftButtonProps", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "menuProps", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupStyle", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupClassName", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupProps", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "visible", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "label", + "title": "按钮文案", + "setter": "StringSetter" + }, + { + "name": "ghost", + "title": "幽灵按钮", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["light", "dark", false, true] + } + }, + "defaultValue": false + } + ] + } + }, + "experimental": { + "initials": [ + { + "name": "label", + "initial": { + "type": "JSFunction", + "value": "() => \"分隔按钮\"" + } + } + ] + }, + "icon": "", + "category": "常用" + }, + { + "componentName": "Step.Item", + "title": "步骤项", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Step", + "main": "", + "destructuring": true, + "subName": "Item" + }, + "props": [ + { + "name": "icon", + "propType": "string", + "description": "图标" + }, + { + "name": "title", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "标题" + }, + { + "name": "content", + "title": { + "label": "内容", + "tip": "content|内容填充, shape为 arrow 时无效" + }, + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "内容填充, shape为 arrow 时无效" + }, + { + "name": "status", + "title": { + "label": "状态", + "tip": "status|步骤的状态，如不传，会根据外层的 Step 的 current 属性生成，可选值为 `wait`, `process`, `finish`" + }, + "propType": { + "type": "oneOf", + "value": ["wait", "process", "finish"] + }, + "description": "步骤的状态，如不传，会根据外层的 Step 的 current 属性生成，可选值为 `wait`, `process`, `finish`" + }, + { + "name": "percent", + "propType": "number", + "description": "百分比" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "onClick", + "propType": "func", + "description": "点击步骤时的回调\n@param {Number} index 节点索引" + }, + { + "name": "className", + "propType": "string", + "description": "自定义样式" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "icon", + "title": { + "label": "图标", + "tip": "icon|图标" + }, + "setter": { + "componentName": "IconSetter" + } + }, + { + "name": "content", + "title": { + "label": "内容", + "tip": "content|内容" + }, + "setter": { + "componentName": "TextAreaSetter" + } + }, + { + "name": "status", + "title": { + "label": "状态", + "tip": "status|状态" + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "等待", + "value": "wait" + }, + { + "title": "进行中", + "value": "process" + }, + { + "title": "结束", + "value": "finish" + }, + { + "title": "默认", + "value": "" + } + ] + } + } + } + ] + } + }, + "category": "null", + "icon": "" + }, + { + "componentName": "Step", + "title": "步骤条", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Step", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "current", + "propType": "number", + "description": "当前步骤", + "defaultValue": 0 + }, + { + "name": "direction", + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "展示方向", + "defaultValue": "hoz" + }, + { + "name": "labelPlacement", + "propType": { + "type": "oneOf", + "value": ["hoz", "ver"] + }, + "description": "横向布局时( direction 为 hoz )的内容排列", + "defaultValue": "ver" + }, + { + "name": "shape", + "propType": { + "type": "oneOf", + "value": ["circle", "arrow", "dot"] + }, + "description": "类型", + "defaultValue": "circle" + }, + { + "name": "readOnly", + "propType": "bool", + "description": "是否只读模式" + }, + { + "name": "animation", + "propType": "bool", + "description": "是否开启动效", + "defaultValue": true + }, + { + "name": "className", + "propType": "string", + "description": "自定义样式名" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": [ + { + "name": "items", + "title": "步骤项", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "icon", + "title": "图标", + "setter": "IconSetter", + "description": "图标" + }, + { + "name": "title", + "title": "标题", + "setter": "StringSetter", + "description": "标题" + }, + { + "name": "status", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["wait", "process", "finish"] + } + }, + "description": "步骤的状态，如不传，会根据外层的 Step 的 current 属性生成，可选值为 `wait`, `process`, `finish`" + }, + { + "name": "content", + "title": { + "label": "内容", + "tip": "content|内容填充, shape为 arrow 时无效" + }, + "setter": "TextAreaSetter", + "description": "内容填充, shape为 arrow 时无效" + }, + { + "name": "percent", + "title": "百分比", + "setter": "NumberSetter", + "description": "百分比" + }, + { + "name": "disabled", + "title": "是否禁用", + "setter": "BoolSetter", + "description": "是否禁用" + } + ] + } + }, + "initialValue": { + "type": "JSFunction", + "value": "() => {\n return {\n primaryKey: String(Math.floor(Math.random() * 10000)),\n title: \"StepItem\"\n };\n }" + } + } + } + }, + "extraProps": { + "getValue": { + "type": "JSFunction", + "value": "getValue(target, fieldValue) {\n \n \n const map = target.getNode().children.map(child => {\n const primaryKey = child.getPropValue(\"primaryKey\")\n ? String(child.getPropValue(\"primaryKey\"))\n : child.id;\n return {\n primaryKey: primaryKey,\n icon: child.getPropValue(\"icon\"),\n title: child.getPropValue(\"title\"),\n status: child.getPropValue(\"status\"),\n content: child.getPropValue(\"content\"),\n percent: child.getPropValue(\"percent\"),\n disabled: child.getPropValue(\"disabled\"),\n };\n });\n return map;\n }" + }, + "setValue": { + "type": "JSFunction", + "value": "setValue(target, value) {\n const node = target.getNode();\n const map = {};\n if (!Array.isArray(value)) {\n value = [];\n }\n value.forEach(item => {\n const tabitem = Object.assign({}, item);\n map[item.primaryKey] = tabitem;\n });\n\n node.mergeChildren(\n child => {\n const primaryKey = String(child.getPropValue(\"primaryKey\"));\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n child.setPropValue(\"icon\", map[primaryKey].icon);\n child.setPropValue(\"title\", map[primaryKey].title);\n child.setPropValue(\"content\", map[primaryKey].content);\n child.setPropValue(\"status\", map[primaryKey].status);\n child.setPropValue(\"percent\", map[primaryKey].percent);\n child.setPropValue(\"disabled\", map[primaryKey].disabled);\n delete map[primaryKey];\n return false;\n }\n return true;\n },\n () => {\n const items = [];\n for (const primaryKey in map) {\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n items.push({\n componentName: \"Step.Item\",\n props: map[primaryKey]\n });\n }\n }\n return items;\n },\n (child1, child2) => {\n const a = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child1.getPropValue(\"primaryKey\"))\n );\n const b = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child2.getPropValue(\"primaryKey\"))\n );\n return a - b;\n }\n );\n }" + } + } + }, + { + "name": "current", + "setter": { + "type": "JSFunction", + "value": "() => {\n const items = this.props.getPropValue('items');\n return {\n componentName: \"MixedSetter\",\n props: {\n setters: [\n {\n componentName: \"NumberSetter\",\n props: {\n min: 0,\n max: items.length - 1,\n defaultValue: 0\n }\n }, \n \"ExpressionSetter\"\n ]\n }\n };\n }" + }, + "title": "当前步骤", + "defaultValue": 0 + }, + { + "name": "direction", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["hoz", "ver"] + } + }, + "title": "展示方向", + "defaultValue": "hoz" + }, + { + "name": "labelPlacement", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["hoz", "ver"] + } + }, + "title": "内容排列", + "defaultValue": "ver" + }, + { + "name": "shape", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["circle", "arrow", "dot"] + } + }, + "title": "类型", + "defaultValue": "circle" + }, + { + "name": "readOnly", + "setter": "BoolSetter", + "title": "是否只读" + }, + { + "name": "animation", + "setter": "BoolSetter", + "title": "开启动效", + "defaultValue": true + } + ] + }, + "icon": "", + "category": "导航" + }, + { + "componentName": "SubMenu", + "title": "子菜单", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Menu", + "main": "", + "destructuring": true, + "subName": "SubMenu" + }, + "props": [ + { + "name": "key", + "propType": "string", + "description": "子菜单标识符" + }, + { + "name": "label", + "propType": "node", + "description": "标签内容" + }, + { + "name": "selectable", + "propType": "bool", + "description": "是否可选，该属性仅在设置 Menu 组件 selectMode 属性后生效", + "defaultValue": false + }, + { + "name": "mode", + "propType": { + "type": "oneOf", + "value": ["inline", "popup"] + }, + "description": "子菜单打开方式，如果设置会覆盖 Menu 上的同名属性\n@default Menu 的 mode 属性值" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["Menu", "SubMenu", "Menu.Group", "MenuButton"] + } + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "SubNav", + "title": "SubNav", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Nav", + "main": "", + "destructuring": true, + "subName": "SubNav" + }, + "props": [ + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "icon", + "propType": { + "type": "oneOfType", + "value": [ + "string", + { + "type": "instanceOf", + "value": "node" + } + ] + }, + "description": "自定义图标，可以使用 Icon 的 type，也可以使用组件 ``" + }, + { + "name": "label", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "标签内容" + }, + { + "name": "selectable", + "propType": "bool", + "description": "是否可选", + "defaultValue": false + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "导航项和子导航" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "Switch", + "title": "开关", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Switch", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "name", + "propType": "string", + "description": "name" + }, + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内敛样式" + }, + { + "name": "checked", + "propType": "bool", + "description": "当前状态" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["medium", "small"] + }, + "description": "尺寸", + "defaultValue": "medium" + }, + { + "name": "checkedChildren", + "propType": "string", + "description": "打开时的内容" + }, + { + "name": "unCheckedChildren", + "propType": "string", + "description": "关闭时的内容" + }, + { + "name": "onChange", + "propType": "func", + "description": "开关状态改变是触发此事件\n@param {Boolean} checked 是否为打开状态\n@param {Event} e DOM事件对象" + }, + { + "name": "onClick", + "propType": "func", + "description": "鼠标点击事件\n@param {Event} e DOM事件对象" + }, + { + "name": "onKeyDown", + "propType": "func", + "description": "键盘按键事件\n@param {Event} e DOM事件对象" + } + ], + "configure": { + "props": [ + { + "name": "checked", + "title": { + "label": { + "type": "i18n", + "zh_CN": "当前状态", + "en_US": "Checked" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: checked | 说明: 当前状态", + "en_US": "prop: checked | description: current status" + } + }, + "setter": "BoolSetter" + }, + { + "name": "disabled", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否禁用", + "en_US": "Disabled" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: disabled | 说明: 是否被禁用", + "en_US": "prop: disabled | description: disabled" + } + }, + "setter": "BoolSetter", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 尺寸", + "en_US": "prop: size | description: size" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["medium", "small"] + } + }, + "defaultValue": "medium" + }, + { + "name": "checkedChildren", + "title": { + "label": { + "type": "i18n", + "zh_CN": "开启内容", + "en_US": "Checked Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: checkedChildren | 说明: 打开时的内容", + "en_US": "prop: checkedChildren | description: checked content" + } + }, + "setter": "StringSetter", + "description": "打开时的内容" + }, + { + "name": "unCheckedChildren", + "title": { + "label": { + "type": "i18n", + "zh_CN": "关闭内容", + "en_US": "UnChecked Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: unCheckedChildren | 说明: 关闭时的内容", + "en_US": "prop: unCheckedChildren | description: unchecked content" + } + }, + "setter": "StringSetter" + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ], + "supports": { + "style": true, + "events": ["onChange", "onClick", "onKeyDown"] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Tab.Item", + "title": "选项卡Item", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Tab", + "main": "", + "destructuring": true, + "subName": "Item" + }, + "props": [ + { + "name": "isAutoContainer", + "initialValue": true, + "defaultValue": true, + "setter": "BoolSetter", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "title", + "propType": "string", + "description": "选项卡标题" + }, + { + "name": "closeable", + "propType": "bool", + "description": "单个选项卡是否可关闭", + "defaultValue": false + }, + { + "name": "disabled", + "propType": "bool", + "description": "选项卡是否被禁用" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": ["Tab"] + } + } + }, + "icon": "", + "category": "null" + }, + { + "componentName": "Tab.TabPane", + "title": "Tab.TabPane", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Tab", + "main": "", + "destructuring": true, + "subName": "TabPane" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "title", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "选项卡标题" + }, + { + "name": "closeable", + "propType": "bool", + "description": "单个选项卡是否可关闭", + "defaultValue": false + }, + { + "name": "disabled", + "propType": "bool", + "description": "选项卡是否被禁用" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + } + }, + "category": "基础" + }, + { + "componentName": "Tab", + "title": "选项卡", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Tab", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "device", + "propType": { + "type": "oneOf", + "value": ["tablet", "desktop", "phone"] + } + }, + { + "name": "shape", + "propType": { + "type": "oneOf", + "value": ["pure", "wrapped", "text", "capsule"] + }, + "description": "外观形态", + "defaultValue": "pure" + }, + { + "name": "animation", + "propType": "bool", + "description": "是否开启动效", + "defaultValue": true + }, + { + "name": "excessMode", + "propType": { + "type": "oneOf", + "value": ["slide", "dropdown"] + }, + "description": "选项卡过多时的滑动模式", + "defaultValue": "slide" + }, + { + "name": "tabPosition", + "propType": { + "type": "oneOf", + "value": ["top", "bottom", "left", "right"] + }, + "description": "导航选项卡的位置，只适用于包裹型（wrapped）选项卡", + "defaultValue": "top" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium"] + }, + "description": "尺寸", + "defaultValue": "medium" + }, + { + "name": "triggerType", + "propType": { + "type": "oneOf", + "value": ["hover", "click"] + }, + "description": "激活选项卡的触发方式", + "defaultValue": "click" + }, + { + "name": "lazyLoad", + "propType": "bool", + "description": "是否延迟加载 TabPane 的内容, 默认开启, 即不提前渲染", + "defaultValue": true + }, + { + "name": "unmountInactiveTabs", + "propType": "bool", + "description": "是否自动卸载未处于激活状态的选项卡", + "defaultValue": false + }, + { + "name": "navClassName", + "propType": "string", + "description": "导航条的自定义样式类" + }, + { + "name": "contentClassName", + "propType": "string", + "description": "内容区容器的自定义样式类" + }, + { + "name": "extra", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "导航栏附加内容" + }, + { + "name": "onClick", + "propType": "func", + "description": "点击单个选项卡时触发的回调" + }, + { + "name": "onChange", + "propType": "func", + "description": "选项卡发生切换时的事件回调\n@param {String|Number} key 改变后的 key" + }, + { + "name": "onClose", + "propType": "func", + "description": "选项卡被关闭时的事件回调\n@param {String|Number} key 关闭的选项卡的 key" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": [ + { + "name": "items", + "title": "标签项", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "title", + "title": "名称", + "initialValue": "标签项", + "setter": "StringSetter" + }, + { + "name": "primaryKey", + "title": "项目编号", + "condition": { + "type": "JSFunction", + "value": "() => false" + }, + "initialValue": { + "type": "JSFunction", + "value": "val => {\n if (val) return val;\n return String(Math.floor(Math.random() * 10000));\n }" + }, + "setter": "StringSetter" + }, + { + "name": "closeable", + "title": "可关闭", + "initialValue": false, + "setter": "BoolSetter" + }, + { + "name": "disabled", + "title": "是否禁用", + "initialValue": false, + "setter": "BoolSetter" + } + ] + } + }, + "initialValue": { + "type": "JSFunction", + "value": "() => {\n return {\n primaryKey: String(Math.floor(Math.random() * 10000)),\n title: \"标签项\",\n closeable: false,\n disabled: false\n };\n }" + } + } + } + }, + "extraProps": { + "getValue": { + "type": "JSFunction", + "value": "getValue(target, fieldValue) {\n \n \n const map = target.getNode().children.map(child => {\n const primaryKey = child.getPropValue(\"primaryKey\")\n ? String(child.getPropValue(\"primaryKey\"))\n : child.id;\n return {\n primaryKey: primaryKey,\n title: child.getPropValue(\"title\"),\n closeable: child.getPropValue(\"closeable\"),\n disabled: child.getPropValue(\"disabled\")\n };\n });\n return map;\n }" + }, + "setValue": { + "type": "JSFunction", + "value": "setValue(target, value) {\n const node = target.getNode();\n const map = {};\n if (!Array.isArray(value)) {\n value = [];\n }\n value.forEach(item => {\n const tabitem = Object.assign({}, item);\n map[item.primaryKey] = tabitem;\n });\n\n node.mergeChildren(\n child => {\n const primaryKey = String(child.getPropValue(\"primaryKey\"));\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n child.setPropValue(\"title\", map[primaryKey].title);\n child.setPropValue(\"closeable\", map[primaryKey].closeable);\n child.setPropValue(\"disabled\", map[primaryKey].disabled);\n delete map[primaryKey];\n return false;\n }\n return true;\n },\n () => {\n const items = [];\n for (const primaryKey in map) {\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n items.push({\n componentName: \"Tab.Item\",\n props: map[primaryKey]\n });\n }\n }\n return items;\n },\n (child1, child2) => {\n const a = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child1.getPropValue(\"primaryKey\"))\n );\n const b = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child2.getPropValue(\"primaryKey\"))\n );\n return a - b;\n }\n );\n }" + } + } + }, + { + "name": "shape", + "title": "形态", + "defaultValue": "pure", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "普通型", + "value": "pure" + }, + { + "title": "包裹型", + "value": "wrapped" + }, + { + "title": "文本型", + "value": "text" + }, + { + "title": "胶囊型", + "value": "capsule" + } + ] + } + } + }, + { + "name": "size", + "title": "尺寸", + "defaultValue": "medium", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "小", + "value": "small" + }, + { + "title": "中", + "value": "medium" + } + ] + } + } + }, + { + "name": "excessMode", + "title": "选项卡过多时的滑动模式", + "defaultValue": "slide", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "小", + "value": "slide" + }, + { + "title": "中", + "value": "dropdown" + } + ] + } + } + }, + { + "name": "advance", + "title": "高级", + "type": "group", + "extraProps": { + "display": "accordion" + }, + "items": [ + { + "name": "unmountInactiveTabs", + "title": "切换销毁", + "defaultValue": false, + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "needBadge", + "title": "开启徽标", + "defaultValue": false, + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "renderBadge", + "title": "徽标渲染", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + }, + "condition": { + "type": "JSFunction", + "value": "condition(target) {\n return target.getProps().getPropValue(\"needBadge\") || false;\n }" + } + }, + { + "name": "tabRender", + "title": "自定义渲染选项卡", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + } + }, + { + "name": "extraRender", + "title": "渲染导航栏附加内容", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + } + } + ] + }, + { + "name": "style", + "setter": { + "componentName": "StyleSetter" + } + } + ], + "supports": { + "events": ["onClick", "onChange", "onClose"] + } + }, + "experimental": { + "initialChildren": [ + { + "componentName": "Tab.Item", + "props": { + "primaryKey": "item1" + } + }, + { + "componentName": "Tab.Item", + "props": { + "primaryKey": "item2" + } + } + ] + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Table.Column", + "title": "Table.Column", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Table", + "main": "", + "destructuring": true, + "subName": "Column" + }, + "props": [ + { + "name": "title", + "propType": "string" + }, + { + "name": "dataIndex", + "propType": "string" + }, + { + "name": "cell", + "propType": "func" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "cell", + "setter": { + "componentName": "SlotSetter", + "props": { + "supportParams": true + } + }, + "extraProps": { + "display": "block" + } + } + ] + } + }, + "category": "基础" + }, + { + "componentName": "Table", + "title": "Table", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Table", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string" + }, + { + "name": "children", + "propType": "string" + }, + { + "name": "pure", + "propType": "bool" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "tableLayout", + "propType": { + "type": "oneOf", + "value": ["fixed", "auto"] + } + }, + { + "name": "tableWidth", + "propType": "number" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium"] + } + }, + { + "name": "dataSource", + "propType": { + "type": "arrayOf", + "value": "object" + } + }, + { + "name": "entireDataSource", + "propType": "array" + }, + { + "name": "onRowClick", + "propType": "func" + }, + { + "name": "onRowMouseEnter", + "propType": "func" + }, + { + "name": "rowProps", + "propType": "func" + }, + { + "name": "cellProps", + "propType": "func" + }, + { + "name": "hasBorder", + "propType": "bool" + }, + { + "name": "hasHeader", + "propType": "bool" + }, + { + "name": "isZebra", + "propType": "bool" + }, + { + "name": "loading", + "propType": "bool" + }, + { + "name": "filterParams", + "propType": "object" + }, + { + "name": "sort", + "propType": "object" + }, + { + "name": "sortIcons", + "propType": "object" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "components", + "propType": "object" + }, + { + "name": "columns", + "propType": { + "type": "arrayOf", + "value": { + "type": "shape", + "value": [ + { + "name": "title", + "description": "列标题", + "propType": "string" + }, + { + "name": "dataIndex", + "description": "列名称", + "propType": "string" + } + ] + } + } + }, + { + "name": "emptyContent", + "propType": "node" + }, + { + "name": "primaryKey", + "propType": "string" + }, + { + "name": "lockType", + "propType": { + "type": "oneOf", + "value": ["left", "right"] + } + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "wrapperContent", + "propType": "any" + }, + { + "name": "refs", + "propType": "object" + }, + { + "name": "expandedRowRender", + "propType": "func" + }, + { + "name": "expandedRowIndent", + "propType": "array" + }, + { + "name": "hasExpandedRowCtrl", + "propType": "bool" + }, + { + "name": "getExpandedColProps", + "propType": "func" + }, + { + "name": "openRowKeys", + "propType": "array" + }, + { + "name": "onRowOpen", + "propType": "func" + }, + { + "name": "onExpandedRowClick", + "propType": "func" + }, + { + "name": "fixedHeader", + "propType": "bool" + }, + { + "name": "rowSelection", + "propType": "object" + }, + { + "name": "stickyHeader", + "propType": "bool" + }, + { + "name": "offsetTop", + "propType": "number" + }, + { + "name": "affixProps", + "propType": "object" + }, + { + "name": "indent", + "propType": "number" + }, + { + "name": "isTree", + "propType": "bool" + }, + { + "name": "useVirtual", + "propType": "bool" + }, + { + "name": "onBodyScroll", + "propType": "func" + }, + { + "name": "expandedIndexSimulate", + "propType": "bool" + }, + { + "name": "crossline", + "propType": "bool" + }, + { + "name": "lengths", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "dataSource", + "setter": "JsonSetter" + }, + { + "name": "children", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "componentName", + "title": "子组件", + "defaultValue": "Table.Column", + "setter": { + "componentName": "StringSetter" + } + }, + { + "name": "props", + "title": "props", + "setter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "title", + "setter": { + "componentName": "StringSetter" + } + }, + { + "name": "dataIndex", + "setter": { + "componentName": "StringSetter" + } + } + ] + } + } + } + } + ] + } + } + } + } + }, + "extraProps": { + "defaultValue": "", + "onChange": { + "type": "JSFunction", + "value": "(val, field, editor) => {\n debugger;\n console.log('val', val);//field.nodes[0].children.import(val && {\"componentName\": \"Table.Column\", \"props\": {\"type\": val, \"style\": {\"marginRight\": 5}}}, true); //field.top.setPropValue('children', [{\"componentName\": \"Icon\", \"props\": {\"type\": val}}, (field.top.getPropValue('children') || []).slice(-1)]);\n}" + } + } + } + ] + } + }, + "category": "基础" + }, + { + "componentName": "Tag.Closeable", + "title": "可关闭标签", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Tag", + "main": "", + "destructuring": true, + "subName": "Closeable" + }, + "props": [ + { + "name": "closeArea", + "title": { + "label": { + "type": "i18n", + "zh_CN": "关闭区域", + "en_US": "Close Area" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: closeArea | 说明: closeable 标签的 onClose 响应区域, tag: 标签体, tail(默认): 关闭按钮", + "en_US": "prop: closeArea | description: close area" + } + }, + "propType": { + "type": "oneOf", + "value": ["tag", "tail"] + }, + "description": "closeable 标签的 onClose 响应区域, tag: 标签体, tail(默认): 关闭按钮" + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签尺寸", + "en_US": "Tag Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 标签的尺寸（large 尺寸为兼容表单场景 large = medium）", + "en_US": "prop: size | description: tag size" + } + }, + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "标签的尺寸（large 尺寸为兼容表单场景 large = medium）" + }, + { + "name": "onClose", + "propType": "func", + "description": "点击关闭按钮时的回调，返回值 true 则关闭, false 阻止关闭" + }, + { + "name": "onClick", + "propType": "func", + "description": "点击回调" + }, + { + "name": "afterClose", + "propType": "func", + "description": "标签关闭后执行的回调" + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签文本", + "en_US": "Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: children | 说明: 标签文本内容", + "en_US": "prop: children | description: tag content" + } + }, + "propType": "string", + "description": "内容" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": {}, + "icon": "", + "category": "内容" + }, + { + "componentName": "Tag.Selectable", + "title": "可选中标签", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Tag", + "main": "", + "destructuring": true, + "subName": "Selectable" + }, + "props": [ + { + "name": "checked", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否选中", + "en_US": "Checked" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: checked | 说明: 标签是否被选中，受控用法", + "en_US": "prop: checked | description: tag checked" + } + }, + "propType": "bool", + "description": "标签是否被选中，受控用法" + }, + { + "name": "defaultChecked", + "title": { + "label": { + "type": "i18n", + "zh_CN": "默认选中", + "en_US": "Default Checked" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: defaultChecked | 说明: 标签是否默认被选中，非受控用法", + "en_US": "prop: defaultChecked | description: tag default checked" + } + }, + "propType": "bool", + "description": "标签是否默认被选中，非受控用法" + }, + { + "name": "disabled", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否禁用", + "en_US": "Disabled" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: disabled | 说明: 标签是否被禁用", + "en_US": "prop: disabled | description: tag disabled" + } + }, + "propType": "bool", + "description": "标签是否被禁用" + }, + { + "name": "onChange", + "propType": "func", + "description": "选中状态变化时触发的事件 Function(checked: Boolean, e: Event) => void" + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签文本", + "en_US": "Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: children | 说明: 标签文本内容", + "en_US": "prop: children | description: tag content" + } + }, + "propType": "string", + "description": "内容" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": {}, + "icon": "", + "category": "内容" + }, + { + "componentName": "Tag", + "title": "标签", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Tag", + "main": "", + "destructuring": true + }, + "props": [ + { + "name": "type", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签类型", + "en_US": "Tag Type" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: type | 说明: 标签的类型", + "en_US": "prop: type | description: tag type" + } + }, + "propType": { + "type": "oneOf", + "value": ["normal", "primary"] + }, + "description": "标签的类型" + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签尺寸", + "en_US": "Tag Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 标签的尺寸（large 尺寸为兼容表单场景 large = medium）", + "en_US": "prop: size | description: tag size" + } + }, + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "标签的尺寸（large 尺寸为兼容表单场景 large = medium）" + }, + { + "name": "color", + "propType": "string", + "description": "标签颜色, 目前支持：blue、 green、 orange、red、 turquoise、 yellow 和 hex 颜色值 （`color keywords`作为 Tag 组件的保留字，请勿直接使用 ）, `1.19.0` 以上版本生效" + }, + { + "name": "animation", + "title": { + "label": { + "type": "i18n", + "zh_CN": "开启动效", + "en_US": "Animation" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: animation | 说明: 是否开启动效", + "en_US": "prop: animation | description: enable animation" + } + }, + "propType": "bool", + "description": "是否开启动效" + }, + { + "name": "afterAppear", + "propType": "func", + "description": "标签出现动画结束后执行的回调" + }, + { + "name": "onClick", + "propType": "func", + "description": "点击回调" + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签文本", + "en_US": "Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: children | 说明: 标签文本内容", + "en_US": "prop: children | description: tag content" + } + }, + "propType": "string", + "description": "内容" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "color", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标签颜色", + "en_US": "Tag Color" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: color | 说明: 是否开启动效", + "en_US": "prop: color | description: 目前支持：blue、 green、 orange、red、 turquoise、 yellow 和 hex 颜色值 （`color keywords`作为 Tag 组件的保留字，请勿直接使用 ）, `1.19.0` 以上版本生效" + } + }, + "setter": { + "componentName": "ColorSetter" + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "TimePicker", + "title": "时间选择框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "TimePicker", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "name", + "title": { + "label": "名称", + "tip": "name|表单相关" + }, + "propType": "string", + "description": "name|表单相关" + }, + { + "name": "label", + "propType": "string", + "description": "按钮的文案" + }, + { + "name": "state", + "propType": { + "type": "oneOf", + "value": ["error", "success"] + }, + "description": "输入框状态" + }, + { + "name": "placeholder", + "propType": "string", + "description": "输入框提示" + }, + { + "name": "value", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "时间值（moment 对象或时间字符串，受控状态使用）" + }, + { + "name": "defaultValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "时间初值（moment 对象或时间字符串，非受控状态使用）" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "时间选择框的尺寸", + "defaultValue": "medium" + }, + { + "name": "hasClear", + "propType": "bool", + "description": "是否允许清空时间", + "defaultValue": true + }, + { + "name": "format", + "propType": "string", + "description": "时间的格式\nhttps://momentjs.com/docs/#/parsing/string-format/", + "defaultValue": "HH:mm:ss" + }, + { + "name": "hourStep", + "propType": "number", + "description": "小时选项步长" + }, + { + "name": "minuteStep", + "propType": "number", + "description": "分钟选项步长" + }, + { + "name": "secondStep", + "propType": "number", + "description": "秒钟选项步长" + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层是否显示（受控）" + }, + { + "name": "defaultVisible", + "propType": "bool", + "description": "弹层默认是否显示（非受控）" + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态" + }, + { + "name": "onChange", + "propType": "func", + "description": "时间值改变时的回调\n@param {Object|String} value 时间对象或时间字符串" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + } + ], + "configure": { + "props": [ + { + "name": "defaultValue", + "title": "默认值", + "setter": ["TimePicker", "ExpressionSetter"] + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 尺寸\n@enumdesc 小, 中, 大", + "en_US": "prop: size | description: size" + } + }, + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["small", "medium", "large"] + } + }, + "defaultValue": "medium" + }, + { + "name": "format", + "title": "时间格式", + "defaultValue": "HH:mm:ss", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "HH:mm:ss", + "value": "HH:mm:ss" + }, + { + "title": "HH:mm", + "value": "HH:mm" + }, + { + "title": "mm:ss", + "value": "mm:ss" + } + ] + } + }, + "ExpressionSetter" + ] + } + } + }, + { + "name": "hourStep", + "title": "小时步长", + "defaultValue": 1, + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "minuteStep", + "title": "分钟步长", + "defaultValue": 1, + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "secondStep", + "title": "秒钟步长", + "defaultValue": 1, + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "hasClear", + "title": "清除按钮", + "defaultValue": true, + "setter": ["BoolSetter", "ExpressionSetter"] + }, + { + "name": "disabledHours", + "title": "禁用小时函数", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + } + }, + { + "name": "disabledMinutes", + "title": "禁用分钟函数", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + } + }, + { + "name": "disabledSeconds", + "title": "禁用秒钟函数", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + } + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + }, + { + "name": "style", + "setter": { + "componentName": "StyleSetter" + } + } + ], + "supports": { + "events": ["onChange", "onVisibleChange"] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Timeline.Item", + "title": "时间轴项", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Timeline", + "main": "", + "destructuring": true, + "subName": "Item" + }, + "props": [ + { + "name": "state", + "propType": { + "type": "oneOf", + "value": ["done", "process", "error", "success"] + }, + "description": "节点状态", + "defaultValue": "done" + }, + { + "name": "icon", + "propType": "string", + "description": "图标" + }, + { + "name": "dot", + "propType": "node", + "description": "自定义时间轴节点" + }, + { + "name": "time", + "propType": "string", + "description": "格式化后的时间" + }, + { + "name": "title", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "description": "标题" + }, + { + "name": "timeLeft", + "propType": "string", + "description": "左侧时间" + }, + { + "name": "content", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "description": "右侧内容" + }, + { + "name": "animation", + "propType": "bool", + "description": "动画", + "defaultValue": true + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": false, + "nestingRule": { + "parentWhitelist": ["Timeline"] + } + }, + "props": [ + { + "name": "title", + "setter": "StringSetter", + "title": "标题" + }, + { + "name": "icon", + "title": "图标", + "setter": "IconSetter", + "description": "图标" + }, + { + "name": "state", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["done", "process", "error", "success"] + } + }, + "title": "节点状态", + "defaultValue": "done" + }, + { + "name": "time", + "setter": "DateSetter", + "title": "右侧时间" + }, + { + "name": "timeLeft", + "setter": "DateSetter", + "title": "左侧时间" + }, + { + "name": "content", + "setter": "TextAreaSetter", + "title": "右侧内容" + }, + { + "name": "animation", + "setter": "BoolSetter", + "title": "启用动画", + "defaultValue": true + } + ] + }, + "icon": "", + "category": "null" + }, + { + "componentName": "Timeline", + "title": "时间轴", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Timeline", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "fold", + "propType": { + "type": "arrayOf", + "value": { + "type": "exact", + "value": [ + { + "name": "foldArea", + "propType": { + "type": "arrayOf", + "value": "number" + } + }, + { + "name": "foldShow", + "propType": "bool" + } + ] + } + }, + "description": "自定义折叠选项 示例`[{foldArea: [startIndex, endIndex], foldShow: boolean}]`", + "defaultValue": [] + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "childWhitelist": ["Timeline.Item"] + } + }, + "props": [ + { + "name": "items", + "title": "时间轴数据", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "title", + "setter": "StringSetter", + "title": "标题" + }, + { + "name": "icon", + "title": "图标", + "setter": "IconSetter", + "description": "图标" + }, + { + "name": "state", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["done", "process", "error", "success"] + } + }, + "title": "节点状态", + "defaultValue": "done" + }, + { + "name": "time", + "setter": "DateSetter", + "title": "右侧时间" + }, + { + "name": "timeLeft", + "setter": "DateSetter", + "title": "左侧时间" + }, + { + "name": "content", + "setter": "TextAreaSetter", + "title": "右侧内容" + }, + { + "name": "animation", + "setter": "BoolSetter", + "title": "启用动画", + "defaultValue": true + } + ] + } + }, + "initialValue": { + "type": "JSFunction", + "value": "() => {\n return {\n primaryKey: String(Math.floor(Math.random() * 10000)),\n title: \"TimelineItem\"\n };\n }" + } + } + } + }, + "extraProps": { + "getValue": { + "type": "JSFunction", + "value": "getValue(target, fieldValue) {\n \n \n const map = target.getNode().children.map(child => {\n const primaryKey = child.getPropValue(\"primaryKey\")\n ? String(child.getPropValue(\"primaryKey\"))\n : child.id;\n return {\n primaryKey: primaryKey,\n icon: child.getPropValue(\"icon\"),\n title: child.getPropValue(\"title\"),\n state: child.getPropValue(\"state\"),\n time: child.getPropValue(\"time\"),\n timeLeft: child.getPropValue(\"timeLeft\"),\n content: child.getPropValue(\"content\"),\n animation: child.getPropValue(\"animation\"),\n };\n });\n return map;\n }" + }, + "setValue": { + "type": "JSFunction", + "value": "setValue(target, value) {\n const node = target.getNode();\n const map = {};\n if (!Array.isArray(value)) {\n value = [];\n }\n value.forEach(item => {\n const tabitem = Object.assign({}, item);\n map[item.primaryKey] = tabitem;\n });\n\n node.mergeChildren(\n child => {\n const primaryKey = String(child.getPropValue(\"primaryKey\"));\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n child.setPropValue(\"icon\", map[primaryKey].icon);\n child.setPropValue(\"title\", map[primaryKey].title);\n child.setPropValue(\"content\", map[primaryKey].content);\n child.setPropValue(\"state\", map[primaryKey].state);\n child.setPropValue(\"time\", map[primaryKey].time);\n child.setPropValue(\"timeLeft\", map[primaryKey].timeLeft);\n child.setPropValue(\"animation\", map[primaryKey].animation);\n delete map[primaryKey];\n return false;\n }\n return true;\n },\n () => {\n const items = [];\n for (const primaryKey in map) {\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n items.push({\n componentName: \"Timeline.Item\",\n props: map[primaryKey]\n });\n }\n }\n return items;\n },\n (child1, child2) => {\n const a = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child1.getPropValue(\"primaryKey\"))\n );\n const b = value.findIndex(\n item =>\n String(item.primaryKey) ===\n String(child2.getPropValue(\"primaryKey\"))\n );\n return a - b;\n }\n );\n }" + } + } + } + ] + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Message", + "title": "面包片", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Message", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "title", + "title": { + "label": { + "type": "i18n", + "zh_CN": "标题", + "en_US": "Title" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: title | 说明: 标题", + "en_US": "prop: title | description: Title" + } + }, + "propType": "string", + "description": "标题", + "defaultValue": "标题" + }, + { + "name": "type", + "title": { + "label": { + "type": "i18n", + "zh_CN": "类型", + "en_US": "Type" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: type | 说明: 反馈类型", + "en_US": "prop: type | description: message type" + } + }, + "propType": { + "type": "oneOf", + "value": ["success", "warning", "error", "notice", "help", "loading"] + }, + "description": "反馈类型", + "defaultValue": "success" + }, + { + "name": "shape", + "title": { + "label": { + "type": "i18n", + "zh_CN": "形状", + "en_US": "Shape" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: shape | 说明: 外观", + "en_US": "prop: shape | description: message shape" + } + }, + "propType": { + "type": "oneOf", + "value": ["inline", "addon", "toast"] + }, + "description": "外观", + "defaultValue": "inline" + }, + { + "name": "size", + "title": { + "label": { + "type": "i18n", + "zh_CN": "尺寸", + "en_US": "Size" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: size | 说明: 尺寸", + "en_US": "prop: size | description: message size" + } + }, + "propType": { + "type": "oneOf", + "value": ["medium", "large"] + }, + "description": "尺寸", + "defaultValue": "medium" + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文本", + "en_US": "Content" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: children | 说明: 文本内容", + "en_US": "prop: children | description: message content" + } + }, + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "description": "内容" + }, + { + "name": "visible", + "title": { + "label": { + "type": "i18n", + "zh_CN": "是否显示", + "en_US": "Visible" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: visible | 说明: 当前是否显示", + "en_US": "prop: visible | description: visible" + } + }, + "propType": "bool", + "description": "当前是否显示" + }, + { + "name": "iconType", + "propType": "string", + "description": "显示的图标类型，会覆盖内部设置的IconType" + }, + { + "name": "closeable", + "title": { + "label": { + "type": "i18n", + "zh_CN": "显示 Close", + "en_US": "Show Close" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: closeable | 说明: 显示关闭按钮", + "en_US": "prop: closeable | description: show close button" + } + }, + "propType": "bool", + "description": "显示关闭按钮", + "defaultValue": false + }, + { + "name": "onClose", + "propType": "func", + "description": "关闭按钮的回调" + }, + { + "name": "afterClose", + "propType": "func", + "description": "关闭之后调用的函数" + }, + { + "name": "animation", + "title": { + "label": { + "type": "i18n", + "zh_CN": "开启动效", + "en_US": "Animation" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: animation | 说明: 是否开启动效", + "en_US": "prop: animation | description: enable animation" + } + }, + "propType": "bool", + "description": "收起动画", + "defaultValue": true + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "iconType", + "title": { + "label": { + "type": "i18n", + "zh_CN": "图标", + "en_US": "Icon" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: iconType | 说明: 显示的图标类型", + "en_US": "prop: iconType | description: icon type" + } + }, + "setter": { + "componentName": "IconSetter" + } + } + ] + } + }, + "icon": "", + "category": "反馈" + }, + { + "componentName": "Tooltip", + "title": "Tooltip", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Balloon", + "main": "", + "destructuring": true, + "subName": "Tooltip" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "description": "样式类名的品牌前缀", + "defaultValue": "next-" + }, + { + "name": "className", + "propType": "string", + "description": "自定义类名" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + }, + { + "name": "children", + "propType": "node", + "description": "tooltip的内容" + }, + { + "name": "align", + "propType": { + "type": "oneOf", + "value": ["t", "r", "b", "l", "tl", "tr", "bl", "br", "lt", "lb", "rt", "rb"] + }, + "description": "弹出层位置\n@enumdesc 上, 右, 下, 左, 上左, 上右, 下左, 下右, 左上, 左下, 右上, 右下 及其 两两组合", + "defaultValue": "b" + }, + { + "name": "trigger", + "propType": "node", + "description": "触发元素" + }, + { + "name": "triggerType", + "propType": { + "type": "oneOf", + "value": ["hover", "click"] + }, + "description": "触发行为\n鼠标悬浮, 鼠标点击('hover', 'click')或者它们组成的数组，如 ['hover', 'click'], 强烈不建议使用'focus'，若有复杂交互，推荐使用triggerType为click的Balloon组件", + "defaultValue": "hover" + }, + { + "name": "popupStyle", + "propType": "object", + "description": "弹层组件style，透传给Popup" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹层组件className，透传给Popup" + }, + { + "name": "popupProps", + "propType": "object", + "description": "弹层组件属性，透传给Popup" + }, + { + "name": "pure", + "propType": "bool", + "description": "是否pure render" + }, + { + "name": "popupContainer", + "propType": "string", + "description": "指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数。" + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "id", + "propType": "string", + "description": "弹层id, 传入值才会支持无障碍" + }, + { + "name": "delay", + "propType": "number", + "description": "如果需要让 Tooltip 内容可被点击，可以设置这个参数，例如 100", + "defaultValue": 0 + } + ], + "category": "基础" + }, + { + "componentName": "Transfer", + "title": "穿梭框", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Transfer", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "id", + "propType": "string", + "description": "请设置 id 以保证transfer的可访问性" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "mode", + "propType": { + "type": "oneOf", + "value": ["normal", "simple"] + }, + "description": "移动选项模式", + "defaultValue": "normal" + }, + { + "name": "dataSource", + "propType": "array", + "description": "数据源" + }, + { + "name": "value", + "propType": "array", + "description": "当前值" + }, + { + "name": "defaultValue", + "propType": "array", + "description": "默认值" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "leftDisabled", + "propType": "bool", + "description": "是否禁用左侧面板", + "defaultValue": false + }, + { + "name": "rightDisabled", + "propType": "bool", + "description": "是否禁用右侧面板", + "defaultValue": false + }, + { + "name": "itemRender", + "propType": "func", + "description": "列表项渲染函数" + }, + { + "name": "showSearch", + "propType": "bool", + "description": "是否显示搜索框", + "defaultValue": false + }, + { + "name": "filter", + "propType": "func", + "description": "自定义搜索函数" + }, + { + "name": "searchPlaceholder", + "propType": "string", + "description": "搜索框占位符" + }, + { + "name": "notFoundContent", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "列表为空显示内容", + "defaultValue": "Not Found" + }, + { + "name": "titles", + "propType": "array", + "description": "左右面板标题" + }, + { + "name": "operations", + "propType": "array", + "description": "向右向左移动按钮显示内容" + }, + { + "name": "defaultLeftChecked", + "propType": "array", + "description": "左面板默认选中值" + }, + { + "name": "defaultRightChecked", + "propType": "array", + "description": "右面板默认选中值" + }, + { + "name": "listClassName", + "propType": "string", + "description": "左右面板列表自定义样式类名" + }, + { + "name": "listStyle", + "propType": "object", + "description": "左右面板列表自定义样式对象" + }, + { + "name": "sortable", + "propType": "bool", + "description": "是否允许拖拽排序", + "defaultValue": false + }, + { + "name": "children", + "propType": "func", + "description": "接收 children 自定义渲染列表" + }, + { + "name": "onChange", + "propType": "func", + "description": "值发生改变的时候触发的回调函数" + }, + { + "name": "onSearch", + "propType": "func", + "description": "搜索框输入时触发的回调函数" + }, + { + "name": "onSort", + "propType": "func", + "description": "拖拽排序时触发的回调函数" + } + ], + "configure": { + "props": [ + { + "name": "value", + "title": "当前值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "defaultValue", + "title": "默认值", + "setter": ["NumberSetter", "ExpressionSetter"] + }, + { + "name": "mode", + "title": "模式", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "normal", + "value": "normal" + }, + { + "title": "simple", + "value": "simple" + } + ] + } + }, + "ExpressionSetter" + ] + } + }, + "defaultValue": "simple" + }, + { + "name": "showCheckAll", + "title": "显示全选", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + }, + "defaultValue": true + }, + { + "name": "showSearch", + "title": "搜索框", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + }, + "defaultValue": false + }, + { + "name": "searchPlaceholder", + "title": "搜索框占位符", + "display": "block", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["StringSetter", "ExpressionSetter"] + } + }, + "condition": { + "type": "JSFunction", + "value": "condition(target) {\n return target.getProps().getPropValue(\"showSearch\") || false;\n }" + } + }, + { + "name": "filter", + "title": "自定义搜索函数", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + }, + "condition": { + "type": "JSFunction", + "value": "condition(target) {\n return target.getProps().getPropValue(\"showSearch\") || false;\n }" + } + }, + { + "name": "sortable", + "title": "拖拽排序", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": ["BoolSetter", "ExpressionSetter"] + } + }, + "defaultValue": false + }, + { + "name": "dataSource", + "title": "数据源", + "display": "block", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "JsonSetter" + }, + "ExpressionSetter" + ] + } + }, + "defaultValue": [ + { + "label": "item0", + "value": "0", + "disabled": false + }, + { + "label": "item1", + "value": "1", + "disabled": false + }, + { + "label": "item2", + "value": "2", + "disabled": true + } + ] + }, + { + "name": "defaultLeftChecked", + "title": "左侧面板默认选中值", + "display": "block", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "JsonSetter" + }, + "ExpressionSetter" + ] + } + }, + "defaultValue": ["1"] + }, + { + "name": "defaultRightChecked", + "title": "右侧面板默认选中值", + "display": "block", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "JsonSetter" + }, + "ExpressionSetter" + ] + } + }, + "defaultValue": ["1"] + }, + { + "name": "titles", + "title": "面板标题", + "display": "block", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "JsonSetter" + }, + "ExpressionSetter" + ] + } + }, + "defaultValue": ["TitleLeft", "TitleRight"] + }, + { + "name": "notFountContent", + "title": "无数据时显示内容", + "display": "block", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + { + "componentName": "StringSetter" + }, + "ExpressionSetter" + ] + } + }, + "defaultValue": ["无数据"] + }, + { + "name": "itemRender", + "title": "列表项渲染函数", + "display": "block", + "setter": { + "componentName": "FunctionSetter" + } + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + }, + { + "name": "style", + "setter": { + "componentName": "StyleSetter" + } + } + ], + "supports": { + "events": ["onChange", "onSearch", "onSort"] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "TreeNode", + "title": "树形控件节点", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Tree", + "main": "", + "destructuring": true, + "subName": "Node" + }, + "props": [ + { + "name": "className", + "propType": "string" + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "树节点" + }, + { + "name": "label", + "propType": { + "type": "oneOfType", + "value": ["string", "node"] + }, + "description": "节点文本内容", + "defaultValue": "---" + }, + { + "name": "selectable", + "propType": "bool", + "description": "单独设置是否支持选中，覆盖 Tree 的 selectable" + }, + { + "name": "checkable", + "propType": "bool", + "description": "单独设置是否出现复选框，覆盖 Tree 的 checkable" + }, + { + "name": "editable", + "propType": "bool", + "description": "单独设置是否支持编辑，覆盖 Tree 的 editable" + }, + { + "name": "draggable", + "propType": "bool", + "description": "单独设置是否支持拖拽，覆盖 Tree 的 draggable" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁止节点响应", + "defaultValue": false + }, + { + "name": "checkboxDisabled", + "propType": "bool", + "description": "是否禁止勾选节点复选框", + "defaultValue": false + }, + { + "name": "isLeaf", + "propType": "bool", + "description": "是否是叶子节点", + "defaultValue": false + } + ], + "icon": "", + "category": "内容" + }, + { + "componentName": "TreeSelect", + "title": "树型选择控件", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "TreeSelect", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "string" + }, + { + "name": "dataSource", + "propType": { + "type": "Json" + }, + "description": "数据源" + }, + { + "name": "size", + "title": "尺寸", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "选择框大小", + "defaultValue": "medium" + }, + { + "name": "placeholder", + "title": "占位提示", + "propType": "string", + "description": "选择框占位符" + }, + { + "name": "label", + "title": "内联文案", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "自定义内联label" + }, + { + "name": "notFoundContent", + "title": "空提示", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "无数据时显示内容", + "defaultValue": "Not Found" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "hasArrow", + "title": "下拉箭头", + "propType": "bool", + "description": "是否有下拉箭头", + "defaultValue": true + }, + { + "name": "hasBorder", + "title": "边框", + "propType": "bool", + "description": "是否有边框", + "defaultValue": true + }, + { + "name": "hasClear", + "title": "清空按钮", + "propType": "bool", + "description": "是否有清空按钮", + "defaultValue": false + }, + { + "name": "readOnly", + "propType": "bool", + "description": "是否只读" + }, + { + "name": "autoWidth", + "propType": "bool", + "description": "下拉框是否与选择器对齐", + "defaultValue": true + }, + { + "name": "onChange", + "propType": "func", + "description": "选中值改变时触发的回调函数\n@param {String|Array} value 选中的值，单选时返回单个值，多选时返回数组\n@param {Object|Array} data 选中的数据，包括 value, label, pos, key属性，单选时返回单个值，多选时返回数组，父子节点选中关联时，同时选中，只返回父节点" + }, + { + "name": "showSearch", + "propType": "bool", + "description": "搜索框", + "defaultValue": false + }, + { + "name": "onSearch", + "propType": "func", + "description": "在搜索框中输入时触发的回调函数\n@param {String} keyword 输入的关键字" + }, + { + "name": "onSearchClear", + "propType": "func" + }, + { + "name": "multiple", + "propType": "bool", + "description": "支持多选", + "defaultValue": false + }, + { + "name": "treeCheckable", + "propType": "bool", + "description": "下拉框中的树是否支持勾选节点的复选框", + "defaultValue": false + }, + { + "name": "treeCheckStrictly", + "propType": "bool", + "description": "下拉框中的树勾选节点复选框是否完全受控（父子节点选中状态不再关联）", + "defaultValue": false + }, + { + "name": "treeCheckedStrategy", + "propType": { + "type": "oneOf", + "value": ["all", "parent", "child"] + }, + "description": "定义选中时回填的方式\n@enumdesc 返回所有选中的节点, 父子节点都选中时只返回父节点, 父子节点都选中时只返回子节点", + "defaultValue": "parent" + }, + { + "name": "treeDefaultExpandAll", + "propType": "bool", + "description": "下拉框中的树是否默认展开所有节点", + "defaultValue": false + }, + { + "name": "treeLoadData", + "propType": "func", + "description": "下拉框中的树异步加载数据的函数，使用请参考[Tree的异步加载数据Demo](https://fusion.design/component/tree)\n@param {ReactElement} node 被点击展开的节点" + }, + { + "name": "treeProps", + "propType": { + "type": "Json" + }, + "description": "透传到 Tree 的属性对象" + }, + { + "name": "defaultVisible", + "title": "初始显示", + "propType": "bool", + "description": "初始下拉框是否显示", + "defaultValue": false + }, + { + "name": "visible", + "propType": "bool", + "description": "当前下拉框是否显示" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "下拉框显示或关闭时触发事件的回调函数\n@param {Boolean} visible 是否显示\n@param {String} type 触发显示关闭的操作类型" + }, + { + "name": "popupStyle", + "propType": { + "type": "object" + }, + "description": "下拉框自定义样式对象" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "下拉框样式自定义类名" + }, + { + "name": "popupContainer", + "propType": "any", + "description": "下拉框挂载的容器节点" + }, + { + "name": "popupProps", + "propType": { + "type": "object" + }, + "description": "透传到 Popup 的属性对象" + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "预览态" + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {Array} value 选择值 { label: , value:}" + }, + { + "name": "useVirtual", + "propType": "bool", + "description": "是否开启虚拟滚动" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "visible", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "autoWidth", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "useVirtual", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "renderPreview", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "followTrigger", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupStyle", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupClassName", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupContainer", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "popupProps", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "treeCheckable", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "treeCheckStrictly", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "treeCheckedStrategy", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "treeDefaultExpandAll", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "treeLoadData", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "treeProps", + "condition": { + "type": "JSFunction", + "value": "() => false" + } + }, + { + "name": "label", + "title": "内联文案", + "setter": { + "componentName": "StringSetter" + } + }, + { + "name": "dataSource", + "title": { + "label": "节点数据", + "tip": "数据源" + }, + "setter": "JsonSetter" + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Tree", + "title": "树形控件", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Tree", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "className", + "propType": "string" + }, + { + "name": "dataSource", + "propType": { + "type": "object" + }, + "description": "数据源，该属性优先级高于 children" + }, + { + "name": "showLine", + "propType": "bool", + "description": "是否显示树的线", + "defaultValue": false + }, + { + "name": "selectable", + "propType": "bool", + "description": "是否支持选中节点", + "defaultValue": true + }, + { + "name": "onSelect", + "propType": "func", + "description": "选中或取消选中节点时触发的回调函数\n@param {Array} selectedKeys 选中节点key的数组\n@param {Object} extra 额外参数\n@param {Array} extra.selectedNodes 选中节点的数组\n@param {Object} extra.node 当前操作的节点\n@param {Boolean} extra.selected 当前操作是否是选中" + }, + { + "name": "multiple", + "propType": "bool", + "description": "是否支持多选", + "defaultValue": false + }, + { + "name": "checkable", + "propType": "bool", + "description": "是否支持勾选节点的复选框", + "defaultValue": false + }, + { + "name": "checkStrictly", + "propType": "bool", + "description": "勾选节点复选框是否完全受控（父子节点选中状态不再关联）", + "defaultValue": false + }, + { + "name": "checkedStrategy", + "propType": { + "type": "oneOf", + "value": ["all", "parent", "child"] + }, + "description": "定义选中时回填的方式\n@enumdesc 返回所有选中的节点, 父子节点都选中时只返回父节点, 父子节点都选中时只返回子节点", + "defaultValue": "all" + }, + { + "name": "onCheck", + "propType": "func", + "description": "勾选或取消勾选复选框时触发的回调函数\n@param {Array} checkedKeys 勾选复选框节点key的数组\n@param {Object} extra 额外参数\n@param {Array} extra.checkedNodes 勾选复选框节点的数组\n@param {Array} extra.checkedNodesPositions 包含有勾选复选框节点和其位置的对象的数组\n@param {Array} extra.indeterminateKeys 半选复选框节点 key 的数组\n@param {Object} extra.node 当前操作的节点\n@param {Boolean} extra.checked 当前操作是否是勾选" + }, + { + "name": "defaultExpandAll", + "propType": "bool", + "description": "是否默认展开所有节点", + "defaultValue": false + }, + { + "name": "autoExpandParent", + "propType": "bool", + "description": "是否自动展开父节点，建议受控时设置为false", + "defaultValue": true + }, + { + "name": "onExpand", + "propType": "func", + "description": "展开或收起节点时触发的回调函数\n@param {Array} expandedKeys 展开的节点key的数组\n@param {Object} extra 额外参数\n@param {Object} extra.node 当前操作的节点\n@param {Boolean} extra.expanded 当前操作是否是展开" + }, + { + "name": "editable", + "propType": "bool", + "description": "是否支持编辑节点内容", + "defaultValue": false + }, + { + "name": "onEditFinish", + "propType": "func", + "description": "编辑节点内容完成时触发的回调函数\n@param {String} key 编辑节点的 key\n@param {String} label 编辑节点完成时节点的文本\n@param {Object} node 当前编辑的节点" + }, + { + "name": "draggable", + "propType": "bool", + "description": "是否支持拖拽节点", + "defaultValue": false + }, + { + "name": "onDragStart", + "propType": "func", + "description": "开始拖拽节点时触发的回调函数\n@param {Object} info 拖拽信息\n@param {Object} info.event 事件对象\n@param {Object} info.node 拖拽的节点" + }, + { + "name": "onDragEnter", + "propType": "func", + "description": "拖拽节点进入目标节点时触发的回调函数\n@param {Object} info 拖拽信息\n@param {Object} info.event 事件对象\n@param {Object} info.node 目标节点\n@param {Array} info.expandedKeys 当前展开的节点key的数组" + }, + { + "name": "onDragOver", + "propType": "func", + "description": "拖拽节点在目标节点上移动的时候触发的回调函数\n@param {Object} info 拖拽信息\n@param {Object} info.event 事件对象\n@param {Object} info.node 目标节点" + }, + { + "name": "onDragLeave", + "propType": "func", + "description": "拖拽节点离开目标节点时触发的回调函数\n@param {Object} info 拖拽信息\n@param {Object} info.event 事件对象\n@param {Object} info.node 目标节点" + }, + { + "name": "onDragEnd", + "propType": "func", + "description": "拖拽节点拖拽结束时触发的回调函数\n@param {Object} info 拖拽信息\n@param {Object} info.event 事件对象\n@param {Object} info.node 目标节点" + }, + { + "name": "onDrop", + "propType": "func", + "description": "拖拽节点放入目标节点内或前后触发的回调函数\n@param {Object} info 拖拽信息\n@param {Object} info.event 事件对象\n@param {Object} info.node 目标节点\n@param {Object} info.dragNode 拖拽的节点\n@param {Array} info.dragNodesKeys 拖拽的节点和其子节点 key 的数组\n@param {Number} info.dropPosition 放置位置，-1代表当前节点前，0代表当前节点里，1代表当前节点后" + }, + { + "name": "canDrop", + "propType": "func", + "description": "节点是否可被作为拖拽的目标节点" + }, + { + "name": "loadData", + "propType": "func", + "description": "异步加载数据的函数" + }, + { + "name": "filterTreeNode", + "propType": "func", + "description": "按需筛选高亮节点" + }, + { + "name": "onRightClick", + "propType": "func", + "description": "右键点击节点时触发的回调函数" + }, + { + "name": "isLabelBlock", + "propType": "bool", + "description": "设置节点是否占满剩余空间，一般用于统一在各节点右侧添加元素(借助 flex 实现，暂时只支持 ie10+)", + "defaultValue": false + }, + { + "name": "isNodeBlock", + "propType": "bool", + "description": "设置节点是否占满一行", + "defaultValue": false + }, + { + "name": "animation", + "propType": "bool", + "description": "是否开启展开收起动画", + "defaultValue": true + }, + { + "name": "focusedKey", + "propType": "string", + "description": "当前获得焦点的子菜单或菜单项 key 值" + }, + { + "name": "renderChildNodes", + "propType": "func", + "description": "渲染子节点" + }, + { + "name": "useVirtual", + "propType": "bool", + "description": "是否开启虚拟滚动" + }, + { + "name": "onItemFocus", + "propType": "func" + }, + { + "name": "onBlur", + "propType": "func" + }, + { + "name": "onItemKeyDown", + "propType": "func" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "component": { + "isContainer": true + }, + "props": [ + { + "name": "dataSource", + "title": "节点数据", + "setter": "JsonSetter" + }, + { + "name": "showLine", + "title": "显示线", + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "multiple", + "title": "支持多选", + "setter": { + "componentName": "BoolSetter" + }, + "description": "是否支持多选", + "defaultValue": false + }, + { + "name": "checkable", + "title": "复选框", + "setter": { + "componentName": "BoolSetter" + }, + "description": "是否支持勾选节点的复选框", + "defaultValue": false + }, + { + "name": "editable", + "title": "支持编辑", + "setter": { + "componentName": "BoolSetter" + }, + "defaultValue": false + }, + { + "name": "draggable", + "title": "支持拖拽", + "setter": { + "componentName": "BoolSetter" + }, + "defaultValue": false + }, + { + "name": "selectable", + "title": "支持选中", + "setter": { + "componentName": "BoolSetter" + }, + "defaultValue": false + }, + { + "name": "defaultExpandedKeys", + "display": "block", + "title": "默认展开的节点", + "setter": "JsonSetter" + }, + { + "name": "defaultSelectedKeys", + "display": "block", + "title": "默认选中的节点", + "setter": "JsonSetter" + } + ], + "supports": { + "style": true, + "events": ["onSelect", "onCheck", "onExpand"] + } + }, + "experimental": { + "initials": [ + { + "name": "showLine", + "initial": { + "type": "JSFunction", + "value": "()=> true" + } + }, + { + "name": "defaultExpandAll", + "initial": { + "type": "JSFunction", + "value": "()=> true" + } + }, + { + "name": "defaultExpandedKeys", + "initial": { + "type": "JSFunction", + "value": "()=> [\"1\"]" + } + }, + { + "name": "defaultSelectedKeys", + "initial": { + "type": "JSFunction", + "value": "()=> [\"2\"]" + } + }, + { + "name": "dataSource", + "initial": { + "type": "JSFunction", + "value": "() => [\n {\n label: \"Component\",\n key: \"1\",\n children: [\n {\n label: \"Form\",\n key: \"2\",\n selectable: false,\n children: [\n {\n label: \"Input\",\n key: \"4\"\n },\n {\n label: \"Select\",\n key: \"5\"\n }\n ]\n },\n {\n label: \"Display\",\n key: \"3\",\n children: [\n {\n label: \"Table\",\n key: \"6\"\n }\n ]\n }\n ]\n }\n ]" + } + } + ] + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Typography.Text", + "title": "Text", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Typography", + "main": "", + "destructuring": true, + "subName": "Text" + }, + "props": [ + { + "name": "children", + "propType": "string" + }, + { + "name": "delete", + "propType": "bool", + "description": "添加删除线样式", + "defaultValue": false + }, + { + "name": "mark", + "propType": "bool", + "description": "添加标记样式", + "defaultValue": false + }, + { + "name": "underline", + "propType": "bool", + "description": "添加下划线样式", + "defaultValue": false + }, + { + "name": "strong", + "propType": "bool", + "description": "是否加粗", + "defaultValue": false + }, + { + "name": "code", + "propType": "bool", + "description": "添加代码样式", + "defaultValue": false + }, + { + "name": "component", + "propType": { + "type": "oneOf", + "value": ["span", "h1", "h2", "h3", "h4"] + }, + "description": "设置标签类型", + "defaultValue": "span" + }, + { + "name": "onClick", + "propType": "func", + "description": "鼠标点击" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "children", + "setter": "TextAreaSetter" + } + ] + } + }, + "category": "基础" + }, + { + "componentName": "Typography", + "title": "Text", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Typography", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "component", + "propType": { + "type": "instanceOf", + "value": "elementType" + }, + "description": "设置标签类型", + "defaultValue": "article" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "children", + "title": "内容", + "propType": "string" + } + ], + "configure": { + "component": { + "isContainer": true + } + }, + "icon": "", + "category": "常用" + }, + { + "componentName": "Upload.Dragger", + "title": "Upload.Dragger", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Upload", + "main": "", + "destructuring": true, + "subName": "DragUpload" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "description": "样式前缀", + "defaultValue": "next-" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "shape", + "propType": "string" + }, + { + "name": "onDragOver", + "propType": "func" + }, + { + "name": "onDragLeave", + "propType": "func" + }, + { + "name": "onDrop", + "propType": "func" + }, + { + "name": "limit", + "propType": "number" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "defaultValue", + "propType": { + "type": "instanceOf", + "value": "array" + } + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "listType", + "propType": "string" + }, + { + "name": "timeout", + "propType": "number" + } + ], + "category": "基础" + }, + { + "componentName": "Upload.List", + "title": "Upload.List", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Upload", + "main": "", + "destructuring": true, + "subName": "List" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "locale", + "propType": "object", + "description": "多语言" + }, + { + "name": "listType", + "propType": { + "type": "oneOf", + "value": ["text", "image", "card"] + }, + "description": "文件列表，数据格式请参考 文件对象", + "defaultValue": "text" + }, + { + "name": "value", + "propType": { + "type": "instanceOf", + "value": "array" + }, + "description": "文件列表", + "defaultValue": [] + }, + { + "name": "closable", + "propType": "bool", + "defaultValue": false + }, + { + "name": "onRemove", + "propType": "func", + "description": "删除文件回调(支持Promise)" + }, + { + "name": "onCancel", + "propType": "func", + "description": "取消上传回调(支持Promise)" + }, + { + "name": "onImageError", + "propType": "func", + "description": "头像加载出错回调" + }, + { + "name": "onPreview", + "propType": "func", + "description": "listType=card时点击图片回调" + }, + { + "name": "extraRender", + "propType": "func", + "description": "自定义额外渲染" + }, + { + "name": "progressProps", + "propType": "object", + "description": "透传给Progress props" + }, + { + "name": "children", + "propType": "node" + }, + { + "name": "uploader", + "propType": "any" + }, + { + "name": "useDataURL", + "propType": "bool", + "description": "可选参数，是否本地预览" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "isPreview", + "propType": "bool" + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "Upload.Selecter", + "title": "Upload.Selecter", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Upload", + "main": "", + "destructuring": true, + "subName": "Selecter" + }, + "props": [ + { + "name": "id", + "propType": "string" + }, + { + "name": "style", + "propType": "object" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用上传功能" + }, + { + "name": "multiple", + "propType": "bool", + "description": "是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件", + "defaultValue": false + }, + { + "name": "dragable", + "propType": "bool", + "description": "是否支持拖拽上传，`ie10+` 支持。" + }, + { + "name": "accept", + "propType": "string", + "description": "接受上传的文件类型 (image/png, image/jpg, .doc, .ppt) 详见 [input accept attribute](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input#attr-accept)" + }, + { + "name": "onSelect", + "propType": "func", + "description": "文件选择回调" + }, + { + "name": "onDragOver", + "propType": "func", + "description": "拖拽经过回调" + }, + { + "name": "onDragLeave", + "propType": "func", + "description": "拖拽离开回调" + }, + { + "name": "onDrop", + "propType": "func", + "description": "拖拽完成回调" + }, + { + "name": "children", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "name", + "propType": "string", + "defaultValue": "file" + } + ], + "category": "基础" + }, + { + "componentName": "Upload", + "title": "上传", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "Upload", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "action", + "propType": "string", + "description": "上传的地址" + }, + { + "name": "value", + "propType": { + "type": "Json" + }, + "description": "文件列表" + }, + { + "name": "defaultValue", + "propType": "object", + "description": "默认文件列表" + }, + { + "name": "shape", + "propType": { + "type": "oneOf", + "value": ["card"] + }, + "description": "上传按钮形状" + }, + { + "name": "listType", + "propType": { + "type": "oneOf", + "value": ["text", "image", "card"] + }, + "description": "上传列表的样式" + }, + { + "name": "name", + "propType": "string", + "description": "文件名字段" + }, + { + "name": "data", + "propType": { + "type": "oneOfType", + "value": ["object", "func"] + }, + "description": "上传额外传参" + }, + { + "name": "formatter", + "propType": "func", + "title": { + "label": "数据格式化函数", + "tip": "数据格式化函数，配合自定义 action 使用，参数为服务器的响应数据，详见 [formatter](#formater)\n@param {Object} response 返回\n@param {File} file 文件对象" + } + }, + { + "name": "limit", + "propType": "number", + "description": "最大文件上传个数", + "defaultValue": null + }, + { + "name": "timeout", + "propType": "number", + "description": "设置上传超时,单位ms" + }, + { + "name": "dragable", + "propType": "bool", + "description": "可选参数，是否支持拖拽上传，`ie10+` 支持。" + }, + { + "name": "useDataURL", + "propType": "bool", + "description": "可选参数，是否本地预览" + }, + { + "name": "disabled", + "propType": "bool", + "description": "可选参数，是否禁用上传功能" + }, + { + "name": "onSelect", + "propType": "func", + "description": "选择文件回调" + }, + { + "name": "onProgress", + "propType": "func", + "description": "上传中" + }, + { + "name": "onChange", + "propType": "func", + "description": "上传文件改变时的状态\n@param {Object} info 文件事件对象" + }, + { + "name": "onSuccess", + "propType": "func", + "description": "可选参数，上传成功回调函数，参数为请求下响应信息以及文件\n@param {Object} file 文件\n@param {Array} value 值" + }, + { + "name": "afterSelect", + "propType": "func", + "description": "可选参数, 用于校验文件,afterSelect仅在 autoUpload=false 的时候生效,autoUpload=true时,可以使用beforeUpload完全可以替代该功能.\n@param {Object} file\n@returns {Boolean} 返回false会阻止上传,其他则表示正常" + }, + { + "name": "onRemove", + "propType": "func", + "description": "移除文件回调函数\n@param {Object} file 文件\n@returns {Boolean|Promise} 返回 false、Promise.resolve(false)、 Promise.reject() 将阻止文件删除" + }, + { + "name": "onError", + "propType": "func", + "description": "可选参数，上传失败回调函数，参数为上传失败的信息、响应信息以及文件\n@param {Object} file 出错的文件\n@param {Array} value 当前值" + }, + { + "name": "beforeUpload", + "propType": "func", + "title": { + "label": "开始上传时回调", + "tip": "可选参数, 详见 [beforeUpload](#beforeUpload)\n@param {Object} file 所有文件\n@param {Object} options 参数\n@returns {Boolean|Object|Promise} 返回值作用见demo" + } + }, + { + "name": "onDrop", + "propType": "func", + "description": "放文件" + }, + { + "name": "className", + "propType": "string", + "description": "自定义class" + }, + { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + }, + { + "name": "autoUpload", + "propType": "bool", + "description": "自动上传", + "defaultValue": true + }, + { + "name": "request", + "propType": "func", + "description": "自定义上传方法\n@param {Object} option\n@return {Object} object with abort method" + }, + { + "name": "progressProps", + "propType": "object", + "description": "透传给Progress props" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态" + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {number} value 评分值" + } + ], + "configure": { + "props": [ + { + "name": "title", + "title": "标题", + "setter": "StringSetter" + }, + { + "name": "title", + "title": "标题位置", + "setter": "StringSetter" + }, + { + "name": "defaultValue", + "title": "默认值", + "setter": { + "componentName": "JsonSetter" + } + }, + { + "name": "shape", + "title": "按钮形状", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": [ + { + "title": "默认", + "value": "" + }, + { + "title": "卡片", + "value": "card" + } + ] + } + }, + "description": "上传按钮形状" + }, + { + "name": "listType", + "title": "列表样式", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "options": ["text", "image", "card"] + } + }, + "defaultValue": "text", + "description": "上传列表的样式" + }, + { + "name": "limit", + "title": "数量限制", + "setter": "NumberSetter" + }, + { + "name": "disabled", + "title": "是否禁用", + "setter": "BoolSetter" + }, + { + "type": "group", + "title": "高级", + "display": "block", + "items": [ + { + "name": "id", + "title": { + "label": { + "type": "i18n", + "zh_CN": "唯一标识", + "en_US": "ID" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: id | 说明: 唯一标识", + "en_US": "prop: id | description: switch id" + } + }, + "setter": "StringSetter" + }, + { + "name": "name", + "title": { + "label": { + "type": "i18n", + "zh_CN": "表单标识", + "en_US": "Name" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: name | 说明: 表单标识", + "en_US": "prop: name | description: switch name" + } + }, + "setter": "StringSetter" + } + ] + } + ] + }, + "experimental": { + "initials": [ + { + "name": "shape", + "initial": { + "type": "JSFunction", + "value": "() => \"card\"" + } + }, + { + "name": "defaultValue", + "initial": { + "type": "JSFunction", + "value": "() => []" + } + } + ] + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "Video", + "title": "视频", + "npm": { + "package": "@alifd/ali-lowcode-components", + "version": "latest", + "exportName": "Video", + "main": "", + "destructuring": true, + "subName": "" + }, + "props": [ + { + "name": "src", + "title": { + "label": { + "type": "i18n", + "zh_CN": "视频链接", + "en_US": "Video Address" + }, + "tip": { + "type": "i18n", + "zh_CN": "属性: src | 说明: 视频链接", + "en_US": "prop: src | description: Video address" + } + }, + "propType": "string", + "defaultValue": "https://fusion.alicdn.com/fusion-site-2.0/fusion.mp4" + }, + { + "name": "autoPlay", + "title": { + "label": { + "type": "i18n", + "zh_CN": "自动播放", + "en_US": "autoPlay" + } + }, + "propType": "bool", + "setter": { + "componentName": "BoolSetter" + } + }, + { + "name": "loop", + "title": { + "label": { + "type": "i18n", + "zh_CN": "循环播放", + "en_US": "loop" + } + }, + "propType": "bool" + }, + { + "name": "muted", + "title": { + "label": { + "type": "i18n", + "zh_CN": "静音", + "en_US": "muted" + } + }, + "propType": "bool" + }, + { + "name": "controls", + "title": { + "label": { + "type": "i18n", + "zh_CN": "控制条", + "en_US": "controls" + } + }, + "propType": "bool" + }, + { + "name": "poster", + "title": { + "label": { + "type": "i18n", + "zh_CN": "默认图URL", + "en_US": "poster" + } + }, + "propType": "string" + }, + { + "name": "style", + "propType": "object" + } + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "autoPlay", + "title": "自动播放", + "setter": { + "componentName": "BoolSetter" + }, + "extraProps": { + "setValue": { + "type": "JSFunction", + "value": "(target, value) => {\n if (value) {\n target.getNode().setPropValue(\"muted\", true);\n }\n }" + } + } + }, + { + "name": "muted", + "title": "静音", + "setter": { + "componentName": "BoolSetter" + }, + "condition": { + "type": "JSFunction", + "value": "target => {\n return !target.getProps().getPropValue(\"autoPlay\");\n }" + } + } + ] + } + }, + "icon": "", + "category": "内容" + }, + { + "componentName": "WeekPicker", + "title": "WeekPicker", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "DatePicker", + "main": "", + "destructuring": true, + "subName": "WeekPicker" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "label", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "输入框内置标签" + }, + { + "name": "state", + "propType": { + "type": "oneOf", + "value": ["success", "loading", "error"] + }, + "description": "输入框状态" + }, + { + "name": "placeholder", + "propType": "string", + "description": "输入提示" + }, + { + "name": "defaultVisibleMonth", + "propType": "func", + "description": "默认展现的月\n@return {MomentObject} 返回包含指定月份的 moment 对象实例" + }, + { + "name": "onVisibleMonthChange", + "propType": "func" + }, + { + "name": "value", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "日期值（受控）moment 对象" + }, + { + "name": "defaultValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "初始日期值，moment 对象" + }, + { + "name": "format", + "propType": "string", + "description": "日期值的格式（用于限定用户输入和展示）", + "defaultValue": "YYYY-wo" + }, + { + "name": "disabledDate", + "propType": "func", + "description": "禁用日期函数\n@param {MomentObject} 日期值\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\n@return {Boolean} 是否禁用" + }, + { + "name": "footerRender", + "propType": "func", + "description": "自定义面板页脚\n@return {Node} 自定义的面板页脚组件" + }, + { + "name": "onChange", + "propType": "func", + "description": "日期值改变时的回调\n@param {MomentObject|String} value 日期值" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "输入框尺寸", + "defaultValue": "medium" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "hasClear", + "propType": "bool", + "description": "是否显示清空按钮", + "defaultValue": true + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层显示状态" + }, + { + "name": "defaultVisible", + "propType": "bool", + "description": "弹层默认是否显示", + "defaultValue": false + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层展示状态变化时的回调\n@param {Boolean} visible 弹层是否显示\n@param {String} type 触发弹层显示和隐藏的来源 calendarSelect 表示由日期表盘的选择触发； okBtnClick 表示由确认按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "popupTriggerType", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "弹层触发方式", + "defaultValue": "click" + }, + { + "name": "popupAlign", + "propType": "string", + "description": "弹层对齐方式,具体含义见 OverLay文档", + "defaultValue": "tl tl" + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + }, + { + "name": "popupStyle", + "propType": "object", + "description": "弹层自定义样式" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹层自定义样式类" + }, + { + "name": "popupProps", + "propType": "object", + "description": "弹层其他属性" + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "inputProps", + "propType": "object", + "description": "输入框其他属性" + }, + { + "name": "dateCellRender", + "propType": "func", + "description": "自定义日期渲染函数\n@param {Object} value 日期值（moment对象）\n@returns {ReactNode}" + }, + { + "name": "monthCellRender", + "propType": "func", + "description": "自定义月份渲染函数\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\n@returns {ReactNode}" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态" + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {MomentObject} value 年份" + }, + { + "name": "yearCellRender", + "propType": "func" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "name", + "propType": "string" + }, + { + "name": "popupComponent", + "propType": { + "type": "instanceOf", + "value": "elementType" + } + }, + { + "name": "popupContent", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + }, + { + "componentName": "YearPicker", + "title": "YearPicker", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.23.x", + "exportName": "DatePicker", + "main": "", + "destructuring": true, + "subName": "YearPicker" + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "rtl", + "propType": "bool", + "defaultValue": false + }, + { + "name": "label", + "propType": { + "type": "instanceOf", + "value": "node" + }, + "description": "输入框内置标签" + }, + { + "name": "state", + "propType": { + "type": "oneOf", + "value": ["success", "loading", "error"] + }, + "description": "输入框状态" + }, + { + "name": "placeholder", + "propType": "string", + "description": "输入提示" + }, + { + "name": "value", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "日期值（受控）moment 对象" + }, + { + "name": "defaultValue", + "propType": { + "type": "instanceOf", + "value": "custom" + }, + "description": "初始日期值，moment 对象" + }, + { + "name": "format", + "propType": "string", + "description": "日期值的格式（用于限定用户输入和展示）", + "defaultValue": "YYYY" + }, + { + "name": "disabledDate", + "propType": "func", + "description": "禁用日期函数\n@param {MomentObject} 日期值\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\n@return {Boolean} 是否禁用" + }, + { + "name": "footerRender", + "propType": "func", + "description": "自定义面板页脚\n@return {Node} 自定义的面板页脚组件" + }, + { + "name": "onChange", + "propType": "func", + "description": "日期值改变时的回调\n@param {MomentObject|String} value 日期值" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "输入框尺寸", + "defaultValue": "medium" + }, + { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, + { + "name": "hasClear", + "propType": "bool", + "description": "是否显示清空按钮", + "defaultValue": true + }, + { + "name": "visible", + "propType": "bool", + "description": "弹层显示状态" + }, + { + "name": "defaultVisible", + "propType": "bool", + "description": "弹层默认是否显示" + }, + { + "name": "onVisibleChange", + "propType": "func", + "description": "弹层展示状态变化时的回调\n@param {Boolean} visible 弹层是否显示\n@param {String} reason 触发弹层显示和隐藏的来源 calendarSelect 表示由日期表盘的选择触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发" + }, + { + "name": "popupTriggerType", + "propType": { + "type": "oneOf", + "value": ["click", "hover"] + }, + "description": "弹层触发方式", + "defaultValue": "click" + }, + { + "name": "popupAlign", + "propType": "string", + "description": "弹层对齐方式, 具体含义见 OverLay文档", + "defaultValue": "tl tl" + }, + { + "name": "popupContainer", + "propType": "any", + "description": "弹层容器\n@param {Element} target 目标元素\n@return {Element} 弹层的容器元素" + }, + { + "name": "popupStyle", + "propType": "object", + "description": "弹层自定义样式" + }, + { + "name": "popupClassName", + "propType": "string", + "description": "弹层自定义样式类" + }, + { + "name": "popupProps", + "propType": "object", + "description": "弹层其他属性" + }, + { + "name": "followTrigger", + "propType": "bool", + "description": "是否跟随滚动" + }, + { + "name": "inputProps", + "propType": "object", + "description": "输入框其他属性" + }, + { + "name": "yearCellRender", + "propType": "func" + }, + { + "name": "dateInputAriaLabel", + "propType": "string", + "description": "日期输入框的 aria-label 属性" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态" + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {MomentObject} value 年份" + }, + { + "name": "locale", + "propType": "object" + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "name", + "propType": "string" + }, + { + "name": "popupComponent", + "propType": { + "type": "instanceOf", + "value": "elementType" + } + }, + { + "name": "popupContent", + "propType": { + "type": "instanceOf", + "value": "node" + } + }, + { + "name": "style", + "propType": "object" + } + ], + "category": "基础" + } + ], + "componentList": [ + { + "title": "常用", + "icon": "", + "children": [ + { + "componentName": "Link", + "library": "Next", + "title": "链接", + "icon": "", + "snippets": [ + { + "title": "链接", + "screenshot": "https://img.alicdn.com/tfs/TB15DZVReL2gK0jSZFmXXc7iXXa-200-200.svg", + "schema": { + "componentName": "Link", + "title": "链接", + "props": { + "href": "https://fusion.design", + "target": "_blank", + "children": "这是一个超链接" + } + } + } + ] + }, + { + "componentName": "Button", + "library": "Next", + "title": "按钮", + "icon": "", + "snippets": [ + { + "title": "主要", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_button.png", + "schema": { + "componentName": "Button", + "props": { + "prefix": "next-", + "type": "primary", + "size": "medium", + "htmlType": "button", + "component": "button", + "children": "取消" + } + } + }, + { + "title": "次要", + "screenshot": "https://img.alicdn.com/tfs/TB1a.N1uVT7gK0jSZFpXXaTkpXa-112-64.png", + "schema": { + "componentName": "Button", + "props": { + "type": "secondary", + "size": "medium", + "htmlType": "button", + "component": "button", + "children": "提交" + } + } + }, + { + "title": "分隔按钮", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_split-button.png", + "schema": { + "componentName": "SplitButton", + "props": { + "prefix": "next-", + "type": "normal", + "size": "medium", + "defaultSelectedKeys": [], + "autoWidth": true, + "popupTriggerType": "click" + } + } + }, + { + "title": "按钮组", + "screenshot": "https://img.alicdn.com/tfs/TB1t6dhvV67gK0jSZPfXXahhFXa-310-122.png", + "schema": { + "componentName": "Button.Group", + "props": {}, + "children": [ + { + "componentName": "Button", + "props": { + "type": "primary", + "style": { + "margin": "0 5px 0 5px" + }, + "htmlType": "submit", + "children": "提交" + }, + "children": [ + { + "componentName": "Icon", + "props": { + "type": "success" + } + } + ] + }, + { + "componentName": "Button", + "props": { + "type": "normal", + "style": { + "margin": "0 5px 0 5px" + }, + "htmlType": "reset", + "children": "重置" + } + } + ] + } + } + ] + }, + { + "componentName": "Image", + "library": "Next", + "title": "图片", + "icon": "", + "snippets": [ + { + "title": "图片", + "screenshot": "https://img.alicdn.com/tfs/TB10nEur.Y1gK0jSZFCXXcwqXXa-234-230.png", + "schema": { + "title": "图片", + "componentName": "Image", + "props": { + "src": "https://img.alicdn.com/tps/TB16TQvOXXXXXbiaFXXXXXXXXXX-120-120.svg" + } + } + } + ] + }, + { + "componentName": "NextText", + "library": "Next", + "title": "文本", + "icon": "", + "snippets": [ + { + "title": "标题", + "screenshot": "https://img.alicdn.com/imgextra/i4/O1CN01E2PcPW1bKJV5QUVMg_!!6000000003446-55-tps-50-50.svg", + "schema": { + "componentName": "NextText", + "props": { + "type": "h5", + "children": "标题标题" + } + } + }, + { + "title": "正文", + "screenshot": "https://img.alicdn.com/imgextra/i3/O1CN01n5wpxc1bi862KuXFz_!!6000000003498-55-tps-50-50.svg", + "schema": { + "componentName": "NextText", + "props": { + "type": "inherit", + "children": "基于 Ali-Lowcode-Engine 快速打造高生产力的低代码研发平台, 基于自然布局体系快速搭建页面" + } + } + } + ] + }, + { + "componentName": "RichText", + "library": "Next", + "title": "需求占位", + "icon": "", + "snippets": [ + { + "title": "需求占位", + "screenshot": "https://img.alicdn.com/tfs/TB160cKkP39YK4jSZPcXXXrUFXa-112-64.png", + "schema": { + "title": "需求占位", + "componentName": "RichText", + "props": { + "title": "需求占位描述", + "content": "

需求标题

你可以在这里描述需求
或者粘贴需求截图

" + } + } + } + ] + } + ] + }, + { + "title": "容器", + "icon": "", + "children": [ + { + "componentName": "Balloon", + "library": "Next", + "title": "气泡框", + "icon": "", + "snippets": [ + { + "title": "气泡框", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_balloon.png", + "schema": { + "componentName": "Balloon", + "props": { + "defaultVisible": true, + "prefix": "next-", + "size": "medium", + "type": "normal", + "closable": true, + "align": "b", + "offset": [0, 0], + "triggerType": "hover", + "autoFocus": true, + "trigger": { + "type": "JSSlot", + "props": { + "title": "触发元素" + } + } + } + } + } + ] + }, + { + "componentName": "Dialog", + "library": "Next", + "title": "对话框", + "icon": "", + "snippets": [ + { + "title": "对话框", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_dialog.png", + "schema": { + "componentName": "Dialog", + "props": { + "prefix": "next-", + "footerAlign": "right", + "title": "Title", + "footer": true, + "footerActions": ["ok", "cancel"], + "closeable": "esc,close", + "hasMask": true, + "align": "cc cc", + "minMargin": 40, + "isAutoContainer": true, + "visible": true + } + } + }, + { + "title": "隐藏底部", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_dialog.png", + "schema": { + "componentName": "Dialog", + "props": { + "prefix": "next-", + "footerAlign": "right", + "title": "Title", + "footer": false, + "closeable": "esc,close", + "hasMask": true, + "align": "cc cc", + "minMargin": 40, + "isAutoContainer": true, + "visible": true + } + } + } + ] + }, + { + "componentName": "Drawer", + "library": "Next", + "title": "抽屉", + "icon": "", + "snippets": [ + { + "title": "侧抽屉", + "screenshot": "https://img.alicdn.com/tfs/TB1o0t4u9f2gK0jSZFPXXXsopXa-112-64.png", + "schema": { + "componentName": "Drawer", + "props": { + "prefix": "next-", + "triggerType": "click", + "closeable": true, + "placement": "right", + "hasMask": true, + "isAutoContainer": true, + "visible": true + } + } + }, + { + "title": "底部抽屉", + "screenshot": "https://img.alicdn.com/tfs/TB1YOd2u2b2gK0jSZK9XXaEgFXa-112-64.png", + "schema": { + "componentName": "Drawer", + "props": { + "prefix": "next-", + "triggerType": "click", + "closeable": true, + "placement": "bottom", + "hasMask": true, + "isAutoContainer": true, + "visible": true + } + } + } + ] + }, + { + "componentName": "NextBlock", + "library": "Next", + "title": "区块", + "icon": "", + "snippets": [ + { + "screenshot": "https://img.alicdn.com/imgextra/i4/O1CN018GSQoS1NfvZqx8kox_!!6000000001598-2-tps-504-244.png", + "title": "标准单列", + "schema": { + "componentName": "NextBlock", + "props": { + "childTotalColumns": 12, + "layoutmode": "O", + "mode": "inset" + }, + "children": [ + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 12, + "rowSpan": 1, + "isAutoContainer": true + } + } + ] + } + }, + { + "screenshot": "https://img.alicdn.com/imgextra/i2/O1CN01pGG2VZ1GM34oELm0S_!!6000000000607-2-tps-504-244.png", + "title": "标准模式", + "schema": { + "componentName": "NextBlock", + "props": { + "childTotalColumns": 12, + "layoutmode": "OOO", + "mode": "inset" + }, + "children": [ + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + }, + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + }, + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + } + ] + } + }, + { + "screenshot": "https://img.alicdn.com/imgextra/i4/O1CN01Vpmd151yx07vfE7Eh_!!6000000006644-55-tps-500-240.svg", + "title": "卡片模式", + "schema": { + "componentName": "NextBlock", + "props": { + "childTotalColumns": 12, + "layoutmode": "OOO", + "mode": "card" + }, + "children": [ + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + }, + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + }, + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + } + ] + } + }, + { + "screenshot": "https://img.alicdn.com/imgextra/i4/O1CN01jq8RX81fQVKA5wvjz_!!6000000004001-2-tps-1000-480.png", + "title": "透明模式", + "schema": { + "componentName": "NextBlock", + "props": { + "childTotalColumns": 12, + "layoutmode": "OOO", + "mode": "transparent" + }, + "children": [ + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + }, + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + }, + { + "componentName": "NextBlockCell", + "props": { + "colSpan": 4, + "rowSpan": 1, + "isAutoContainer": true + } + } + ] + } + } + ] + }, + { + "componentName": "NextP", + "library": "Next", + "title": "段落模板", + "icon": "", + "snippets": [ + { + "title": "左右布局", + "screenshot": "https://img.alicdn.com/imgextra/i2/O1CN01xhBoCx26lZ9kasMLa_!!6000000007702-2-tps-140-61.png", + "schema": { + "componentName": "NextP", + "title": "段落", + "props": { + "align": "space-between", + "flex": true, + "verAlign": "middle", + "textSpacing": true + }, + "children": [ + { + "componentName": "NextPCell", + "props": { + "primaryKey": "4903", + "direction": "hoz", + "align": "inherit", + "verAlign": "inherit" + } + }, + { + "componentName": "NextPCell", + "props": { + "primaryKey": "5240", + "direction": "hoz", + "align": "inherit", + "verAlign": "inherit" + } + } + ] + } + }, + { + "title": "行撑满", + "screenshot": "https://img.alicdn.com/imgextra/i1/O1CN01A0tcpZ1YY6ZrVtvtQ_!!6000000003070-2-tps-138-96.png", + "schema": { + "componentName": "NextP", + "title": "段落", + "props": { + "full": true, + "textSpacing": true + }, + "children": [ + { + "componentName": "NextPCell", + "props": { + "primaryKey": "4092", + "direction": "hoz", + "align": "inherit", + "verAlign": "inherit" + } + }, + { + "componentName": "NextPCell", + "props": { + "primaryKey": "1095", + "direction": "hoz", + "align": "inherit", + "verAlign": "inherit" + } + } + ] + } + }, + { + "title": "组", + "screenshot": "https://img.alicdn.com/imgextra/i3/O1CN01NMDPaR1pzu5MxtVGF_!!6000000005432-2-tps-576-180.png", + "schema": { + "componentName": "NextPCell", + "title": "组", + "props": { + "direction": "hoz", + "align": "inherit", + "verAlign": "inherit" + } + } + } + ] + }, + { + "componentName": "NextPage", + "library": "Next", + "title": "页面", + "icon": "", + "snippets": [ + { + "title": "页面", + "screenshot": "https://tianshu.alicdn.com/429f9a1d-3856-4e5c-8a9c-3013860c9708.png", + "schema": { + "componentName": "NextPage", + "title": "页面", + "props": { + "columns": 12, + "headerDivider": true, + "placeholderStyle": { + "gridRowEnd": "span 1", + "gridColumnEnd": "span 12" + }, + "placeholder": "页面主体内容：拖拽Block布局组件到这里", + "header": { + "type": "JSSlot", + "title": "header", + "value": [] + }, + "headerProps": { + "background": "surface" + }, + "footer": { + "type": "JSSlot", + "title": "footer", + "value": [] + } + }, + "children": [ + { + "componentName": "NextBlock", + "title": "区块", + "props": { + "prefix": "next-", + "placeholderStyle": { + "height": "100%" + }, + "noPadding": false, + "noBorder": false, + "background": "surface", + "layoutmode": "O", + "colSpan": 12, + "rowSpan": 1, + "childTotalColumns": 12 + } + } + ] + } + } + ] + } + ] + }, + { + "title": "导航", + "icon": "", + "children": [ + { + "componentName": "Breadcrumb", + "library": "Next", + "title": "面包屑", + "icon": "", + "snippets": [ + { + "title": "面包屑", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_breadcrumb.png", + "schema": { + "componentName": "Breadcrumb", + "props": { + "maxNode": 100, + "component": "nav" + }, + "children": [ + { + "componentName": "Breadcrumb.Item", + "props": { + "children": "一级", + "primaryKey": "breadcrumb-item-1", + "target": "_self" + } + }, + { + "componentName": "Breadcrumb.Item", + "props": { + "children": "二级", + "primaryKey": "breadcrumb-item-2", + "target": "_self" + } + }, + { + "componentName": "Breadcrumb.Item", + "props": { + "children": "三级", + "primaryKey": "breadcrumb-item-3", + "target": "_self" + } + } + ] + } + } + ] + }, + { + "componentName": "Pagination", + "library": "Next", + "title": "翻页器", + "icon": "", + "snippets": [ + { + "title": "翻页器", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_pagination.png", + "schema": { + "componentName": "Pagination", + "props": { + "prefix": "next-", + "type": "normal", + "shape": "normal", + "size": "medium", + "defaultCurrent": 1, + "total": 100, + "pageShowCount": 5, + "pageSize": 10, + "pageSizePosition": "start", + "showJump": true + } + } + } + ] + }, + { + "componentName": "Search", + "library": "Next", + "title": "搜索", + "icon": "", + "snippets": [ + { + "title": "搜索", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_search.png", + "schema": { + "componentName": "Search", + "props": { + "followTrigger": true, + "searchText": "搜索", + "prefix": "next-", + "shape": "normal", + "type": "normal", + "size": "medium", + "hasIcon": true + } + } + }, + { + "title": "带分类", + "screenshot": "https://img.alicdn.com/tfs/TB1rRaLu5_1gK0jSZFqXXcpaXXa-112-64.png", + "schema": { + "componentName": "Search", + "props": { + "followTrigger": true, + "defaultFilterValue": "Products", + "filter": [ + { + "label": "Products", + "value": "Products" + }, + { + "label": "Products1", + "value": "Products1" + } + ], + "searchText": "搜索", + "prefix": "next-", + "shape": "normal", + "type": "normal", + "size": "medium", + "hasIcon": true + } + } + } + ] + }, + { + "componentName": "Step", + "library": "Next", + "title": "步骤条", + "icon": "", + "snippets": [ + { + "title": "步骤", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_step.png", + "schema": { + "componentName": "Step", + "props": { + "prefix": "next-", + "direction": "hoz", + "labelPlacement": "ver", + "shape": "circle", + "animation": true + }, + "children": [ + { + "componentName": "Step.Item", + "props": { + "title": "步骤1", + "icon": "smile", + "content": "内容1", + "status": "" + } + }, + { + "componentName": "Step.Item", + "props": { + "title": "步骤2", + "icon": "smile", + "content": "内容2", + "status": "" + } + }, + { + "componentName": "Step.Item", + "props": { + "title": "步骤3", + "icon": "smile", + "content": "内容3", + "status": "" + } + } + ] + } + } + ] + } + ] + }, + { + "title": "内容", + "icon": "", + "children": [ + { + "componentName": "Avatar", + "library": "Next", + "title": "头像", + "icon": "", + "snippets": [ + { + "title": "头像", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_avatar.png", + "schema": { + "componentName": "Avatar", + "props": { + "prefix": "next-", + "size": "medium", + "shape": "circle", + "icon": "smile" + } + } + } + ] + }, + { + "componentName": "Badge", + "library": "Next", + "title": "徽标数", + "icon": "", + "snippets": [ + { + "title": "徽标数", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_badge.png", + "schema": { + "componentName": "Badge", + "props": { + "prefix": "next-", + "showZero": true + } + } + } + ] + }, + { + "componentName": "Balloon.Tooltip", + "library": "Next", + "title": "文字提示", + "icon": "", + "snippets": [ + { + "title": "文字提示", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_balloon.png", + "schema": { + "componentName": "Balloon.Tooltip", + "props": { + "defaultVisible": true, + "prefix": "next-", + "size": "medium", + "type": "normal", + "closable": true, + "align": "b", + "offset": [0, 0], + "triggerType": "hover", + "autoFocus": true, + "trigger": { + "type": "JSSlot", + "props": { + "title": "触发元素" + } + }, + "children": "文字提示信息" + } + } + } + ] + }, + { + "componentName": "Calendar", + "library": "Next", + "title": "日历", + "icon": "", + "snippets": [ + { + "screenshot": "https://img.alicdn.com/tfs/TB158yMu4v1gK0jSZFFXXb0sXXa-112-64.png", + "title": "卡片型", + "schema": { + "componentName": "Calendar", + "props": { + "shape": "card" + } + } + }, + { + "screenshot": "https://img.alicdn.com/tfs/TB1PRmJu7P2gK0jSZPxXXacQpXa-112-64.png", + "title": "面板型", + "schema": { + "componentName": "Calendar", + "props": { + "shape": "panel" + } + } + }, + { + "screenshot": "https://img.alicdn.com/tfs/TB10JuKu.T1gK0jSZFhXXaAtVXa-112-64.png", + "title": "全屏型", + "schema": { + "componentName": "Calendar", + "props": { + "shape": "fullscreen" + } + } + } + ] + }, + { + "componentName": "Card", + "library": "Next", + "title": "卡片", + "icon": "", + "snippets": [ + { + "screenshot": "https://img.alicdn.com/tfs/TB1CHN3u4z1gK0jSZSgXXavwpXa-112-64.png", + "title": "普通型", + "schema": { + "componentName": "Card", + "props": { + "title": "普通型卡片" + }, + "children": [] + } + }, + { + "screenshot": "https://img.alicdn.com/tfs/TB1.Ut6u4D1gK0jSZFKXXcJrVXa-112-64.png", + "title": "自定义", + "schema": { + "componentName": "Card", + "props": { + "title": "自定义卡片", + "extra": { + "type": "JSSlot" + } + }, + "children": [] + } + } + ] + }, + { + "componentName": "CascaderSelect", + "library": "Next", + "title": "级联选择器", + "icon": "", + "snippets": [ + { + "title": "收起模式", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_cascader-select.png", + "schema": { + "componentName": "CascaderSelect", + "props": { + "prefix": "next-", + "size": "medium", + "hasArrow": true, + "hasBorder": true, + "expandTriggerType": "click", + "resultAutoWidth": true, + "notFoundContent": "Not Found", + "dataSource": [ + { + "value": "2974", + "label": "西安", + "children": [ + { + "value": "2975", + "label": "西安市" + }, + { + "value": "2976", + "label": "高陵县" + }, + { + "value": "2977", + "label": "蓝田县" + } + ] + } + ] + } + } + }, + { + "title": "展开模式", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_cascader.png", + "schema": { + "componentName": "Cascader", + "props": { + "prefix": "next-", + "expandTriggerType": "click", + "dataSource": [ + { + "value": "2974", + "label": "西安", + "children": [ + { + "value": "2975", + "label": "西安市" + }, + { + "value": "2976", + "label": "高陵县" + }, + { + "value": "2977", + "label": "蓝田县" + } + ] + } + ] + } + } + } + ] + }, + { + "componentName": "Checkbox", + "library": "Next", + "title": "复选按钮", + "icon": "", + "snippets": [ + { + "title": "复选按钮", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_menu.png", + "schema": { + "componentName": "Checkbox", + "props": { + "label": "Check Option" + } + } + }, + { + "title": "复选按钮组", + "screenshot": "https://img.alicdn.com/tfs/TB1EJN7uYY1gK0jSZTEXXXDQVXa-112-64.png", + "schema": { + "componentName": "CheckboxGroup", + "props": { + "prefix": "next-", + "dataSource": [ + { + "label": "选项一", + "value": "1" + }, + { + "label": "选项二", + "value": "2" + }, + { + "label": "选项三", + "value": "3" + } + ] + } + } + } + ] + }, + { + "componentName": "DatePicker", + "library": "Next", + "title": "日期选择框", + "icon": "", + "snippets": [ + { + "title": "日期选择框", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_date-picker.png", + "schema": { + "componentName": "DatePicker", + "props": { + "prefix": "next-", + "format": "YYYY-MM-DD", + "size": "medium", + "hasClear": false, + "popupTriggerType": "click", + "popupAlign": "tl tl", + "followTrigger": true + } + } + }, + { + "title": "日期区间", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_date-picker.png", + "schema": { + "componentName": "RangePicker", + "props": { + "prefix": "next-", + "format": "YYYY-MM-DD", + "size": "medium", + "type": "date", + "hasClear": false, + "popupTriggerType": "click", + "popupAlign": "tl tl", + "followTrigger": true + } + } + } + ] + }, + { + "componentName": "Divider", + "library": "Next", + "title": "分隔符", + "icon": "", + "snippets": [ + { + "title": "分隔线", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_divider.png", + "schema": { + "componentName": "Divider", + "props": { + "prefix": "next-", + "direction": "hoz", + "orientation": "center", + "children": "分隔符" + } + } + } + ] + }, + { + "componentName": "Form", + "library": "Next", + "title": "表单容器", + "icon": "", + "snippets": [ + { + "title": "表单容器", + "screenshot": "https://img.alicdn.com/tfs/TB1oH02u2b2gK0jSZK9XXaEgFXa-112-64.png", + "schema": { + "componentName": "Form", + "props": { + "labelCol": { + "span": 2, + "labelAlign": "left" + }, + "role": "grid" + }, + "children": [ + { + "componentName": "Form.Item", + "props": { + "label": "Email: ", + "required": true + }, + "children": [ + { + "componentName": "Input", + "props": { + "name": "email", + "size": "medium", + "placeholder": "用户名" + } + } + ] + }, + { + "componentName": "Form.Item", + "props": { + "label": "Password: ", + "required": true + }, + "children": [ + { + "componentName": "Input.Password", + "props": { + "name": "password", + "placeholder": "请输入密码", + "size": "medium" + } + } + ] + }, + { + "componentName": "Form.Item", + "props": { + "wrapperCol": { + "offset": 7 + } + }, + "children": [ + { + "componentName": "Form.Submit", + "props": { + "type": "primary", + "validate": true, + "onClick": { + "type": "JSFunction", + "value": "(v, e) => { console.log(v, e) }" + }, + "children": "Submit" + } + }, + { + "componentName": "Form.Reset", + "props": { + "style": { + "marginLeft": 10 + }, + "children": "Reset" + } + } + ] + } + ] + } + } + ] + }, + { + "componentName": "Icon", + "library": "Next", + "title": "图标", + "icon": "", + "snippets": [ + { + "title": "图标", + "screenshot": "", + "schema": { + "componentName": "Icon", + "props": { + "type": "smile" + } + } + } + ] + }, + { + "componentName": "Input", + "library": "Next", + "title": "输入框", + "icon": "", + "snippets": [ + { + "title": "输入框", + "screenshot": "https://img.alicdn.com/tfs/TB1ysp3u8v0gK0jSZKbXXbK2FXa-112-64.png", + "schema": { + "componentName": "Input", + "props": { + "hasBorder": true, + "size": "medium", + "autoComplete": "off" + } + } + }, + { + "title": "密码框", + "screenshot": "https://img.alicdn.com/tfs/TB1ikF3u7P2gK0jSZPxXXacQpXa-112-64.png", + "schema": { + "componentName": "Input.Password", + "props": { + "hasBorder": true, + "size": "medium", + "autoComplete": "off" + } + } + }, + { + "title": "TextArea", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_input.png", + "schema": { + "componentName": "Input.TextArea", + "props": { + "hasBorder": true, + "size": "medium", + "autoComplete": "off" + } + } + } + ] + }, + { + "componentName": "NextTable", + "library": "Next", + "title": "表格", + "icon": "", + "snippets": [ + { + "title": "NextTable", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png", + "schema": { + "componentName": "NextTable", + "title": "表格", + "props": { + "setEmptyContent": true, + "emptyContent": { + "type": "JSSlot", + "title": "EmptyContent", + "value": [ + { + "componentName": "Typography.Text", + "props": { + "children": "No Data" + } + } + ] + }, + "showMiniPager": true, + "showActionBar": true, + "actionBar": [ + { + "title": "新增", + "type": "primary" + }, + { + "title": "编辑" + } + ], + "columns": [ + { + "dataKey": "name", + "width": 200, + "align": "center", + "title": "姓名", + "editType": "text" + }, + { + "dataKey": "age", + "width": 200, + "align": "center", + "title": "年龄" + }, + { + "dataKey": "role", + "width": 200, + "align": "center", + "title": "职责" + } + ], + "data": [ + { + "name": "王小", + "id": "1", + "age": 15000, + "role": "开发" + }, + { + "name": "王中", + "id": "2", + "age": 25000, + "role": "产品" + }, + { + "name": "王大", + "id": "3", + "age": 35000, + "role": "设计" + } + ], + "actionTitle": "操作", + "actionWidth": 180, + "actionType": "link", + "actionFixed": "right", + "actionHidden": false, + "maxWebShownActionCount": 2, + "actionColumn": [ + { + "title": "编辑", + "callback": { + "type": "JSFunction", + "value": "(rowData, action, table) => {\n return table.editRow(rowData).then((row) => {\n console.log(row);\n });\n }" + } + }, + { + "title": "保存", + "callback": { + "type": "JSFunction", + "value": "(rowData, action, table) => { \nreturn table.saveRow(rowData).then((row) => { \nconsole.log(row); \n}); \n}" + }, + "mode": "EDIT" + } + ] + } + } + } + ] + }, + { + "componentName": "NumberPicker", + "library": "Next", + "title": "数字输入框", + "icon": "", + "snippets": [ + { + "title": "数字输入框", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_number-picker.png", + "schema": { + "componentName": "NumberPicker", + "props": { + "prefix": "next-", + "type": "normal", + "size": "medium", + "step": 1, + "editable": true + } + } + } + ] + }, + { + "componentName": "Radio", + "library": "Next", + "title": "单选框", + "icon": "", + "snippets": [ + { + "title": "单选按钮", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_radio.png", + "schema": { + "componentName": "Radio", + "props": { + "label": "选项一", + "value": "1" + } + } + }, + { + "title": "单选按钮组", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_radio.png", + "schema": { + "componentName": "Radio.Group", + "props": { + "dataSource": [ + { + "label": "选项一", + "value": "1" + }, + { + "label": "选项二", + "value": "2" + }, + { + "label": "选项三", + "value": "3" + } + ] + } + } + } + ] + }, + { + "componentName": "Range", + "library": "Next", + "title": "区段选择器", + "icon": "", + "snippets": [ + { + "title": "区段选择器", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_range.png", + "schema": { + "componentName": "Range", + "props": { + "prefix": "next-", + "slider": "single", + "max": 100, + "step": 1, + "marksPosition": "above", + "hasTip": true + } + } + } + ] + }, + { + "componentName": "Rating", + "library": "Next", + "title": "评分", + "icon": "", + "snippets": [ + { + "title": "评分", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_rating.png", + "schema": { + "componentName": "Rating", + "props": { + "prefix": "next-", + "count": 5, + "size": "medium" + } + } + } + ] + }, + { + "componentName": "Select", + "library": "Next", + "title": "选择器", + "icon": "", + "snippets": [ + { + "title": "选择器", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_select.png", + "schema": { + "componentName": "Select", + "props": { + "mode": "single", + "hasArrow": true, + "cacheValue": true, + "dataSource": [ + { + "value": "1", + "label": "选项1" + }, + { + "value": "2", + "label": "选项2" + }, + { + "value": "3", + "label": "选项3" + } + ] + } + } + } + ] + }, + { + "componentName": "Slider", + "library": "Next", + "title": "图片轮播", + "icon": "", + "snippets": [ + { + "title": "图片轮播", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_slider.png", + "schema": { + "componentName": "Slider", + "props": { + "prefix": "next-", + "animation": "slide", + "arrows": true, + "arrowSize": "medium", + "arrowPosition": "inner", + "arrowDirection": "hoz", + "autoplaySpeed": 3000, + "dots": true, + "dotsDirection": "hoz", + "draggable": true, + "infinite": true, + "slide": "div", + "slideDirection": "hoz", + "slidesToShow": 1, + "slidesToScroll": 1, + "speed": 600, + "triggerType": "click", + "centerPadding": "50px", + "cssEase": "ease", + "edgeFriction": 0.35, + "swipe": true, + "touchMove": true, + "touchThreshold": 5, + "useCSS": true, + "waitForAnimate": true + }, + "children": [ + { + "componentName": "Image", + "props": { + "src": "https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png" + } + }, + { + "componentName": "Image", + "props": { + "src": "https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg" + } + }, + { + "componentName": "Image", + "props": { + "src": "https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg" + } + }, + { + "componentName": "Image", + "props": { + "src": "https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg" + } + } + ] + } + } + ] + }, + { + "componentName": "Switch", + "library": "Next", + "title": "开关", + "icon": "", + "snippets": [ + { + "title": "开关组件", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_switch.png", + "schema": { + "componentName": "Switch", + "props": { + "prefix": "next-", + "size": "medium" + } + } + } + ] + }, + { + "componentName": "Tab", + "library": "Next", + "title": "选项卡", + "icon": "", + "snippets": [ + { + "title": "普通型", + "screenshot": "https://img.alicdn.com/tfs/TB1D0p2u.z1gK0jSZLeXXb9kVXa-112-64.png", + "schema": { + "componentName": "Tab", + "props": { + "shape": "pure", + "size": "medium", + "excessMode": "slide" + }, + "children": [ + { + "componentName": "Tab.Item", + "props": { + "title": "标签项1", + "primaryKey": "tab-item-1", + "isAutoContainer": true + } + }, + { + "componentName": "Tab.Item", + "props": { + "title": "标签项2", + "primaryKey": "tab-item-2", + "isAutoContainer": true + } + } + ] + } + }, + { + "title": "胶囊型", + "screenshot": "https://img.alicdn.com/tfs/TB1C0pZuWL7gK0jSZFBXXXZZpXa-112-64.png", + "schema": { + "componentName": "Tab", + "props": { + "shape": "capsule", + "size": "medium", + "excessMode": "slide" + }, + "children": [ + { + "componentName": "Tab.Item", + "props": { + "title": "标签项1", + "primaryKey": "tab-item-1", + "isAutoContainer": true + } + }, + { + "componentName": "Tab.Item", + "props": { + "title": "标签项2", + "primaryKey": "tab-item-2", + "isAutoContainer": true + } + } + ] + } + } + ] + }, + { + "componentName": "Tag", + "library": "Next", + "title": "标签", + "icon": "", + "snippets": [ + { + "title": "标签", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_tag.png", + "schema": { + "componentName": "Tag", + "props": { + "prefix": "next-", + "type": "normal", + "size": "medium", + "animation": false, + "children": "Tag" + } + } + }, + { + "title": "可关闭标签", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_tag.png", + "schema": { + "componentName": "Tag.Closeable", + "props": { + "prefix": "next-", + "closeArea": "tail", + "size": "medium", + "children": "Tag" + } + } + }, + { + "title": "可选中标签", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_tag.png", + "schema": { + "componentName": "Tag.Selectable", + "props": { + "prefix": "next-", + "children": "Tag" + } + } + } + ] + }, + { + "componentName": "TimePicker", + "library": "Next", + "title": "时间选择框", + "icon": "", + "snippets": [ + { + "title": "时间选择框", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_time-picker.png", + "schema": { + "componentName": "TimePicker", + "props": { + "prefix": "next-", + "size": "medium", + "hasClear": true, + "format": "HH:mm:ss", + "popupAlign": "tl tl", + "popupTriggerType": "click" + } + } + } + ] + }, + { + "componentName": "Timeline", + "library": "Next", + "title": "时间轴", + "icon": "", + "snippets": [ + { + "title": "时间轴", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_timeline.png", + "schema": { + "componentName": "Timeline", + "props": { + "prefix": "next-", + "fold": [], + "animation": true + }, + "children": [ + { + "componentName": "Timeline.Item", + "props": { + "state": "process", + "title": "12344" + } + }, + { + "componentName": "Timeline.Item", + "props": { + "title": "Ship" + } + }, + { + "componentName": "Timeline.Item", + "props": { + "title": "Order" + } + } + ] + } + } + ] + }, + { + "componentName": "Transfer", + "library": "Next", + "title": "穿梭框", + "icon": "", + "snippets": [ + { + "title": "穿梭框", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_transfer.png", + "schema": { + "componentName": "Transfer", + "props": { + "prefix": "next-", + "mode": "normal", + "notFoundContent": "Not Found" + } + } + } + ] + }, + { + "componentName": "TreeSelect", + "library": "Next", + "title": "树型选择控件", + "icon": "", + "snippets": [ + { + "title": "树型选择控件", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_tree-select.png", + "schema": { + "componentName": "TreeSelect", + "props": { + "prefix": "next-", + "size": "medium", + "hasArrow": true, + "hasBorder": true, + "autoWidth": true, + "notFoundContent": "Not Found", + "treeCheckedStrategy": "parent" + } + } + }, + { + "title": "树形控件", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_tree.png", + "schema": { + "componentName": "Tree", + "props": { + "prefix": "next-", + "selectable": true, + "checkedStrategy": "all", + "autoExpandParent": true, + "animation": true, + "focusable": true + } + } + } + ] + }, + { + "componentName": "Upload", + "library": "Next", + "title": "上传", + "icon": "", + "snippets": [ + { + "title": "上传组件", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_upload.png", + "schema": { + "componentName": "Upload", + "props": { + "prefix": "next-", + "closable": true, + "autoUpload": true + } + } + } + ] + }, + { + "componentName": "Video", + "library": "Next", + "title": "视频", + "icon": "", + "snippets": [ + { + "title": "视频", + "screenshot": "https://img.alicdn.com/imgextra/i3/O1CN01KPVpSS1FaPsvoag2F_!!6000000000503-55-tps-200-200.svg", + "schema": { + "title": "视频", + "componentName": "Video", + "props": { + "src": "https://fusion.alicdn.com/images/page-1.mp4", + "controls": true, + "style": { + "width": "600px" + } + } + } + } + ] + } + ] + }, + { + "title": "Feedback 反馈", + "icon": "", + "children": [] + }, + { + "title": "反馈", + "icon": "", + "children": [ + { + "componentName": "Message", + "library": "Next", + "title": "提示", + "icon": "", + "snippets": [ + { + "title": "提示", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_message.png", + "schema": { + "componentName": "Message", + "props": { + "title": "Alert", + "type": "warning", + "shape": "inline", + "size": "medium", + "visible": true, + "animation": true + } + } + } + ] + }, + { + "componentName": "Loading", + "library": "Next", + "title": "加载", + "icon": "", + "snippets": [ + { + "title": "加载", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_loading.png", + "schema": { + "componentName": "Loading", + "props": { + "color": "red", + "prefix": "next-", + "tipAlign": "bottom", + "visible": true, + "size": "large", + "inline": true + } + } + } + ] + }, + { + "componentName": "Progress", + "library": "Next", + "title": "进度指示器", + "icon": "", + "snippets": [ + { + "title": "进度指示器", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_progress.png", + "schema": { + "componentName": "Progress", + "props": { + "prefix": "next-", + "shape": "line", + "size": "medium", + "state": "normal", + "color": "blue", + "percent": 30 + } + } + } + ] + }, + { + "componentName": "Message", + "library": "Next", + "title": "面包片", + "icon": "", + "snippets": [ + { + "title": "面包片", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_message.png", + "schema": { + "componentName": "Message", + "props": { + "title": "Toast", + "type": "success", + "shape": "toast", + "size": "medium", + "visible": true, + "animation": true + } + } + } + ] + } + ] + }, + { + "title": "基础", + "icon": "", + "children": [] + }, + { + "title": "常用图表(试验)", + "icon": "", + "children": [ + { + "componentName": "ColumnChart", + "library": "Next", + "title": "柱状图", + "icon": "", + "snippets": [ + { + "title": "柱状图", + "componentName": "ColumnChart", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*C554SqAGfuMAAAAAAAAAAABkARQnAQ", + "schema": { + "title": "柱状图", + "componentName": "ColumnChart", + "props": { + "title": "基础柱状图", + "isMaterial": true, + "autoFit": true, + "padding": "auto", + "xField": "type", + "yField": "sales", + "meta": { + "type": { + "alias": "类别" + }, + "sales": { + "alias": "销售额(万)" + } + }, + "data": [ + { + "type": "家具家电", + "sales": 38 + }, + { + "type": "粮油副食", + "sales": 52 + }, + { + "type": "生鲜水果", + "sales": 61 + }, + { + "type": "美容洗护", + "sales": 145 + }, + { + "type": "母婴用品", + "sales": 48 + }, + { + "type": "进口食品", + "sales": 38 + }, + { + "type": "食品饮料", + "sales": 38 + }, + { + "type": "家庭清洁", + "sales": 38 + } + ] + } + } + } + ] + }, + { + "componentName": "LineChart", + "library": "Next", + "title": "折线图", + "icon": "", + "snippets": [ + { + "title": "折线图", + "componentName": "LineChart", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*YMGnQoh_jSAAAAAAAAAAAABkARQnAQ", + "schema": { + "title": "折线图", + "componentName": "LineChart", + "props": { + "title": "折线图标题", + "isMaterial": true, + "description": "折线图描述", + "xField": "year", + "yField": "value", + "renderer": "svg", + "data": [ + { + "year": "1991", + "value": 3 + }, + { + "year": "1992", + "value": 4 + }, + { + "year": "1993", + "value": 3.5 + }, + { + "year": "1994", + "value": 5 + }, + { + "year": "1995", + "value": 4.9 + }, + { + "year": "1996", + "value": 6 + }, + { + "year": "1997", + "value": 7 + }, + { + "year": "1998", + "value": 9 + }, + { + "year": "1999", + "value": 13 + } + ] + } + } + } + ] + }, + { + "componentName": "LiquidChart", + "library": "Next", + "title": "水位图", + "icon": "", + "snippets": [ + { + "title": "水位图", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*DKvMTrrWdAQAAAAAAAAAAABkARQnAQ", + "schema": { + "title": "水位图", + "category": "常用图表(试验)", + "componentName": "LiquidChart", + "props": { + "title": "水位图标题", + "description": "水位图描述", + "isMaterial": true, + "outline": { + "border": 2, + "distance": 6 + }, + "min": 0, + "max": 100, + "value": 49 + } + } + } + ] + }, + { + "componentName": "PieChart", + "library": "Next", + "title": "饼图", + "icon": "", + "snippets": [ + { + "title": "饼图", + "componentName": "PieChart", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*93XzToUe1OQAAAAAAAAAAABkARQnAQ", + "schema": { + "title": "饼图", + "componentName": "PieChart", + "props": { + "isMaterial": true, + "title": { + "visible": true, + "text": "基础饼图" + }, + "description": { + "visible": true, + "text": "基础饼图描述" + }, + "meta": { + "type": { + "alias": "类别" + }, + "sales": { + "alias": "销售额(万)" + } + }, + "angleField": "value", + "colorField": "type", + "data": [ + { + "type": "分类一", + "value": 27 + }, + { + "type": "分类二", + "value": 25 + }, + { + "type": "分类三", + "value": 18 + }, + { + "type": "分类四", + "value": 15 + }, + { + "type": "分类五", + "value": 10 + }, + { + "type": "其它", + "value": 5 + } + ] + } + } + } + ] + } + ] + }, + { + "title": "Others", + "icon": "", + "children": [] + }, + { + "title": "null", + "icon": "", + "children": [] + } + ] +} diff --git a/packages/plugin-multiple-editor/src/dev-config/scenarios/node-extended-actions/index.ts b/packages/plugin-multiple-editor/src/dev-config/scenarios/node-extended-actions/index.ts new file mode 100644 index 0000000..004e90b --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/node-extended-actions/index.ts @@ -0,0 +1,46 @@ +import { init, plugins } from '@alilc/lowcode-engine'; +import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler'; + +import registerPlugins from './plugin'; +import { scenarioSwitcher } from '../../sample-plugins/scenario-switcher'; +import '../../universal/global.scss'; + +const preference = new Map(); +preference.set('DataSourcePane', { + importPlugins: [], + dataSourceTypes: [ + { + type: 'fetch', + }, + { + type: 'jsonp', + }, + ], +}); + +(async function main() { + await plugins.register(scenarioSwitcher); + await registerPlugins(); + + init( + document.getElementById('lce-container')!, + { + // designMode: 'live', + // locale: 'zh-CN', + enableCondition: true, + enableCanvasLock: true, + // 默认绑定变量 + supportVariableGlobally: true, + // simulatorUrl 在当 engine-core.js 同一个父路径下时是不需要配置的！！！ + // 这里因为用的是 alifd cdn，在不同 npm 包，engine-core.js 和 react-simulator-renderer.js 是不同路径 + simulatorUrl: [ + 'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/css/react-simulator-renderer.css', + 'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/js/react-simulator-renderer.js', + ], + requestHandlersMap: { + fetch: createFetchHandler(), + }, + } as any, + preference + ); +})(); diff --git a/packages/plugin-multiple-editor/src/dev-config/scenarios/node-extended-actions/plugin.tsx b/packages/plugin-multiple-editor/src/dev-config/scenarios/node-extended-actions/plugin.tsx new file mode 100644 index 0000000..89e23f7 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/node-extended-actions/plugin.tsx @@ -0,0 +1,306 @@ +import React from 'react'; +import { + plugins, + skeleton, + project, + setters, + Node, +} from '@alilc/lowcode-engine'; +import AliLowCodeEngineExt from '@alilc/lowcode-engine-ext'; +import { Icon, Message, Button } from '@alifd/next'; +// import UndoRedoPlugin from '@alilc/lowcode-plugin-undo-redo'; +import ComponentsPane from '@alilc/lowcode-plugin-components-pane'; +import ZhEnPlugin from '@alilc/lowcode-plugin-zh-en'; +// import DataSourcePanePlugin from '@alilc/lowcode-plugin-datasource-pane'; +import SchemaPlugin from '@alilc/lowcode-plugin-schema'; +// import CodeEditor from '@alilc/lowcode-plugin-code-editor'; +import ManualPlugin from '@alilc/lowcode-plugin-manual'; +import Inject, { injectAssets } from '@alilc/lowcode-plugin-inject'; +import SimulatorResizer from '@alilc/lowcode-plugin-simulator-select'; + +// 注册到引擎 +import TitleSetter from '@alilc/lowcode-setter-title'; +import BehaviorSetter from '../../setters/behavior-setter'; +import CustomSetter from '../../setters/custom-setter'; +import Logo from '../../sample-plugins/logo'; + +import { + loadIncrementalAssets, + getPageSchema, + saveSchema, + resetSchema, + preview, + getProjectSchemaFromLocalStorage, +} from '../../universal/utils'; +import assets from './assets.json'; +import schema from './schema.json'; + +export default async function registerPlugins() { + const addHelloAction = (ctx: any) => { + return { + async init() { + const { addBuiltinComponentAction } = ctx.material; + addBuiltinComponentAction({ + name: 'hello', + content: { + icon: , + title: 'hello', + action(node: Node) { + Message.show('Welcome to Low-Code engine'); + }, + }, + condition: (node: Node) => { + return node.componentMeta.componentName === 'NextTable'; + }, + }); + }, + }; + }; + addHelloAction.pluginName = 'addHelloAction'; + await plugins.register(addHelloAction); + + const removeCopyAction = (ctx: any) => { + return { + async init() { + const { removeBuiltinComponentAction } = ctx.material; + removeBuiltinComponentAction('copy'); + }, + }; + }; + removeCopyAction.pluginName = 'removeCopyAction'; + await plugins.register(removeCopyAction); + + await plugins.register(ManualPlugin); + + await plugins.register(Inject); + + // plugin API 见 https://yuque.antfin.com/ali-lowcode/docs/cdukce + SchemaPlugin.pluginName = 'SchemaPlugin'; + await plugins.register(SchemaPlugin); + + (SimulatorResizer as any).pluginName = 'SimulatorResizer'; + plugins.register(SimulatorResizer); + + const editorInit = (ctx: any) => { + return { + name: 'editor-init', + async init() { + // 修改面包屑组件的分隔符属性setter + // const assets = await ( + // await fetch( + // `https://alifd.alicdn.com/npm/@alilc/lowcode-materials/build/lowcode/assets-prod.json` + // ) + // ).json(); + // 设置物料描述 + const { material, project } = ctx; + + material.setAssets(await injectAssets(assets)); + + // 加载 schema + project.openDocument( + getProjectSchemaFromLocalStorage('node-extended-actions') + .componentsTree?.[0] || schema + ); + }, + }; + }; + editorInit.pluginName = 'editorInit'; + await plugins.register(editorInit); + + const builtinPluginRegistry = (ctx: any) => { + return { + name: 'builtin-plugin-registry', + async init() { + const { skeleton } = ctx; + // 注册 logo 面板 + skeleton.add({ + area: 'topArea', + type: 'Widget', + name: 'logo', + content: Logo, + contentProps: { + logo: 'https://img.alicdn.com/imgextra/i4/O1CN013w2bmQ25WAIha4Hx9_!!6000000007533-55-tps-137-26.svg', + href: 'https://lowcode-engine.cn', + }, + props: { + align: 'left', + }, + }); + + // 注册组件面板 + const componentsPane = skeleton.add({ + area: 'leftArea', + type: 'PanelDock', + name: 'componentsPane', + content: ComponentsPane, + contentProps: {}, + props: { + align: 'top', + icon: 'zujianku', + description: '组件库', + }, + }); + componentsPane?.disable?.(); + project.onSimulatorRendererReady(() => { + componentsPane?.enable?.(); + }); + }, + }; + }; + builtinPluginRegistry.pluginName = 'builtinPluginRegistry'; + await plugins.register(builtinPluginRegistry); + + // 设置内置 setter 和事件绑定、插件绑定面板 + const setterRegistry = (ctx: any) => { + const { setterMap, pluginMap } = AliLowCodeEngineExt; + return { + name: 'ext-setters-registry', + async init() { + const { setters, skeleton } = ctx; + // 注册setterMap + setters.registerSetter(setterMap as any); + // 注册插件 + // 注册事件绑定面板 + skeleton.add({ + area: 'centerArea', + type: 'Widget', + content: pluginMap.EventBindDialog, + name: 'eventBindDialog', + props: {}, + }); + + // 注册变量绑定面板 + skeleton.add({ + area: 'centerArea', + type: 'Widget', + content: pluginMap.VariableBindDialog, + name: 'variableBindDialog', + props: {}, + }); + }, + }; + }; + setterRegistry.pluginName = 'setterRegistry'; + await plugins.register(setterRegistry); + + // 注册回退/前进 + // await plugins.register(UndoRedoPlugin); + + // 注册中英文切换 + await plugins.register(ZhEnPlugin); + + const loadAssetsSample = (ctx: any) => { + return { + name: 'loadAssetsSample', + async init() { + const { skeleton } = ctx; + + skeleton.add({ + name: 'loadAssetsSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + width: 80, + }, + content: ( + + ), + }); + }, + }; + }; + loadAssetsSample.pluginName = 'loadAssetsSample'; + await plugins.register(loadAssetsSample); + + // 注册保存面板 + const saveSample = (ctx: any) => { + return { + name: 'saveSample', + async init() { + const { skeleton, hotkey } = ctx; + + skeleton.add({ + name: 'saveSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + skeleton.add({ + name: 'resetSchema', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + hotkey.bind('command+s', (e) => { + e.preventDefault(); + saveSchema('node-extended-actions'); + }); + }, + }; + }; + saveSample.pluginName = 'saveSample'; + await plugins.register(saveSample); + + // DataSourcePanePlugin.pluginName = 'DataSourcePane'; + // await plugins.register(DataSourcePanePlugin); + + // CodeEditor.pluginName = 'CodeEditor'; + // await plugins.register(CodeEditor); + + const previewSample = (ctx: any) => { + return { + name: 'previewSample', + async init() { + const { skeleton } = ctx; + skeleton.add({ + name: 'previewSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + }, + }; + }; + previewSample.pluginName = 'previewSample'; + await plugins.register(previewSample); + + const customSetter = (ctx: any) => { + return { + name: '___registerCustomSetter___', + async init() { + const { setters } = ctx; + + setters.registerSetter('TitleSetter', TitleSetter); + setters.registerSetter('BehaviorSetter', BehaviorSetter); + setters.registerSetter('CustomSetter', CustomSetter); + }, + }; + }; + customSetter.pluginName = 'customSetter'; + await plugins.register(customSetter); +} diff --git a/packages/plugin-multiple-editor/src/dev-config/scenarios/node-extended-actions/schema.json b/packages/plugin-multiple-editor/src/dev-config/scenarios/node-extended-actions/schema.json new file mode 100644 index 0000000..96d6820 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/node-extended-actions/schema.json @@ -0,0 +1,73 @@ +{ + "componentName": "Page", + "id": "node_dockcviv8fo1", + "props": { + "ref": "outerView", + "style": { + "height": "100%" + } + }, + "fileName": "/", + "dataSource": { + "list": [ + { + "type": "fetch", + "isInit": true, + "options": { + "params": {}, + "method": "GET", + "isCors": true, + "timeout": 5000, + "headers": {}, + "uri": "mock/info.json" + }, + "id": "info", + "shouldFetch": { + "type": "JSFunction", + "value": "function() { \n console.log('should fetch.....');\n return true; \n}" + } + } + ] + }, + "state": { + "text": { + "type": "JSExpression", + "value": "\"outer\"" + }, + "isShowDialog": { + "type": "JSExpression", + "value": "false" + } + }, + "css": "body {\n font-size: 12px;\n}\n\n.button {\n width: 100px;\n color: #ff00ff\n}", + "lifeCycles": { + "componentDidMount": { + "type": "JSFunction", + "value": "function componentDidMount() {\n console.log('did mount');\n}" + }, + "componentWillUnmount": { + "type": "JSFunction", + "value": "function componentWillUnmount() {\n console.log('will unmount');\n}" + } + }, + "methods": { + "testFunc": { + "type": "JSFunction", + "value": "function testFunc() {\n console.log('test func');\n}" + }, + "onClick": { + "type": "JSFunction", + "value": "function onClick() {\n this.setState({\n isShowDialog: true\n });\n}" + }, + "closeDialog": { + "type": "JSFunction", + "value": "function closeDialog() {\n this.setState({\n isShowDialog: false\n });\n}" + } + }, + "originCode": "class LowcodeComponent extends Component {\n state = {\n \"text\": \"outer\",\n \"isShowDialog\": false\n }\n componentDidMount() {\n console.log('did mount');\n }\n componentWillUnmount() {\n console.log('will unmount');\n }\n testFunc() {\n console.log('test func');\n }\n onClick() {\n this.setState({\n isShowDialog: true\n })\n }\n closeDialog() {\n this.setState({\n isShowDialog: false\n })\n }\n}", + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "" +} \ No newline at end of file diff --git a/packages/plugin-multiple-editor/src/dev-config/setters/behavior-setter.tsx b/packages/plugin-multiple-editor/src/dev-config/setters/behavior-setter.tsx new file mode 100644 index 0000000..b7ac613 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/setters/behavior-setter.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import BehaviorSetter from '@alilc/lowcode-setter-behavior'; + +const defaultExtraBehaviorActions: any[] = []; +class LocalBehaviorSetter extends React.Component { + render() { + // ignore url && responseFormatter props, use default ones + const { + url: propsUrl, + responseFormatter: propsFormatter, + extraBehaviorActions: propsExtraBehaviorActions = [], + ...otherProps + } = this.props; + const url = 'https://hn.algolia.com/api/v1/search?query'; + const responseFormatter = (response: any) => + response.hits.map((item: any) => ({ + label: item.title, + value: item.author, + })); + const extraBehaviorActions = propsExtraBehaviorActions.concat( + defaultExtraBehaviorActions + ); + return ( + // @ts-ignore + + ); + } +} + +export default LocalBehaviorSetter; diff --git a/packages/plugin-multiple-editor/src/dev-config/setters/custom-setter.tsx b/packages/plugin-multiple-editor/src/dev-config/setters/custom-setter.tsx new file mode 100644 index 0000000..0383473 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/setters/custom-setter.tsx @@ -0,0 +1,12 @@ +import React, { Component } from 'react'; // import classNames from 'classnames'; + +class CustomSetter extends Component { + render() { + const { defaultValue, value, onChange } = this.props; + const { editor } = this.props.field; + + return
hello world
; + } +} + +export default CustomSetter; diff --git a/packages/plugin-multiple-editor/src/dev-config/universal/assets.json b/packages/plugin-multiple-editor/src/dev-config/universal/assets.json new file mode 100644 index 0000000..3a889f8 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/universal/assets.json @@ -0,0 +1,139 @@ +{ + "packages": [ + { + "package": "moment", + "version": "2.24.0", + "urls": [ + "https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js" + ], + "library": "moment" + }, + { + "package": "lodash", + "library": "_", + "urls": [ + "https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js" + ] + }, + { + "title": "fusion组件库", + "package": "@alifd/next", + "version": "1.24.18", + "urls": [ + "https://g.alicdn.com/code/lib/alifd__next/1.24.18/next.min.css", + "https://g.alicdn.com/code/lib/alifd__next/1.24.18/next-with-locales.min.js" + ], + "library": "Next" + }, + { + "title": "NextTable", + "package": "NextTable", + "version": "1.0.1", + "urls": [ + "https://g.alicdn.com/fusion-platform/pro-table/1.0.1/next-table.js", + "https://g.alicdn.com/fusion-platform/pro-table/1.0.1/next-table.css" + ], + "library": "NextTable" + }, + { + "package": "@alilc/lowcode-materials", + "version": "1.0.2", + "library": "AlilcLowcodeMaterials", + "urls": [ + "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.2/dist/AlilcLowcodeMaterials.js", + "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.2/dist/AlilcLowcodeMaterials.css" + ], + "editUrls": [ + "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.2/build/lowcode/view.js", + "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.2/build/lowcode/view.css" + ] + }, + { + "package": "@alifd/pro-layout", + "version": "1.0.1-beta.6", + "library": "AlifdProLayout", + "urls": [ + "https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.6/dist/AlifdProLayout.js", + "https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.6/dist/AlifdProLayout.css" + ], + "editUrls": [ + "https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.6/build/lowcode/view.js", + "https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.6/build/lowcode/view.css" + ] + }, + { + "package": "@alifd/fusion-ui", + "version": "1.0.5", + "library": "AlifdFusionUi", + "urls": [ + "https://alifd.alicdn.com/npm/@alifd/fusion-ui@1.0.5/dist/AlifdFusionUi.js", + "https://alifd.alicdn.com/npm/@alifd/fusion-ui@1.0.5/dist/AlifdFusionUi.css" + ], + "editUrls": [ + "https://alifd.alicdn.com/npm/@alifd/fusion-ui@1.0.5/build/lowcode/view.js", + "https://alifd.alicdn.com/npm/@alifd/fusion-ui@1.0.5/build/lowcode/view.css" + ] + } + ], + "components": [ + { + "exportName": "AlilcLowcodeMaterialsMeta", + "npm": { + "package": "@alilc/lowcode-materials" + }, + "url": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.2/build/lowcode/meta.js", + "urls": { + "default": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.2/build/lowcode/meta.js", + "design": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.2/build/lowcode/meta.design.js" + } + }, + { + "exportName": "AlifdProLayoutMeta", + "npm": { + "package": "@alifd/pro-layout", + "version": "1.0.1-beta.6" + }, + "url": "https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.6/build/lowcode/meta.js", + "urls": { + "default": "https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.6/build/lowcode/meta.js", + "design": "https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.6/build/lowcode/meta.design.js" + } + }, + { + "exportName": "AlifdFusionUiMeta", + "npm": { + "package": "@alifd/fusion-ui" + }, + "url": "https://alifd.alicdn.com/npm/@alifd/fusion-ui@1.0.5/build/lowcode/meta.js", + "urls": { + "default": "https://alifd.alicdn.com/npm/@alifd/fusion-ui@1.0.5/build/lowcode/meta.js", + "design": "https://alifd.alicdn.com/npm/@alifd/fusion-ui@1.0.5/build/lowcode/meta.design.js" + } + } + ], + "sort": { + "groupList": [ + "精选组件", + "原子组件" + ], + "categoryList": [ + "基础元素", + "布局容器类", + "表格类", + "表单详情类", + "帮助类", + "对话框类", + "业务类", + "通用", + "引导", + "信息输入", + "信息展示", + "信息反馈" + ] + }, + "groupList": [ + "精选组件", + "原子组件" + ], + "ignoreComponents": {} +} diff --git a/packages/plugin-multiple-editor/src/dev-config/universal/plugin.tsx b/packages/plugin-multiple-editor/src/dev-config/universal/plugin.tsx new file mode 100644 index 0000000..936fa1a --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/universal/plugin.tsx @@ -0,0 +1,233 @@ +import React from 'react'; +import { + plugins, + project, +} from '@alilc/lowcode-engine'; +import AliLowCodeEngineExt from '@alilc/lowcode-engine-ext'; +import { Button } from '@alifd/next'; +import ComponentsPane from '@alilc/lowcode-plugin-components-pane'; +import Inject, { injectAssets } from '@alilc/lowcode-plugin-inject'; + +// 注册到引擎 +import TitleSetter from '@alilc/lowcode-setter-title'; +import BehaviorSetter from '../setters/behavior-setter'; +import CustomSetter from '../setters/custom-setter'; +import Logo from '../sample-plugins/logo'; +import { deleteHiddenTransducer } from '../sample-plugins/delete-hidden-transducer'; + +import { + loadIncrementalAssets, + getPageSchema, + saveSchema, + resetSchema, + preview, +} from './utils'; +import assets from './assets.json'; +import { registerRefProp } from '../sample-plugins/set-ref-prop'; + +export default async function registerPlugins() { + await plugins.register(Inject); + + await plugins.register(registerRefProp); + + await plugins.register(deleteHiddenTransducer); + + const editorInit = (ctx: any) => { + return { + name: 'editor-init', + async init() { + // 修改面包屑组件的分隔符属性setter + // const assets = await ( + // await fetch( + // `https://alifd.alicdn.com/npm/@alilc/lowcode-materials/build/lowcode/assets-prod.json` + // ) + // ).json(); + // 设置物料描述 + const { material, project } = ctx; + + await material.setAssets(await injectAssets(assets)); + + const schema = await getPageSchema(); + + // 加载 schema + project.openDocument(schema); + }, + }; + }; + editorInit.pluginName = 'editorInit'; + await plugins.register(editorInit); + + const builtinPluginRegistry = (ctx: any) => { + return { + name: 'builtin-plugin-registry', + async init() { + const { skeleton } = ctx; + // 注册 logo 面板 + skeleton.add({ + area: 'topArea', + type: 'Widget', + name: 'logo', + content: Logo, + contentProps: { + logo: 'https://img.alicdn.com/imgextra/i4/O1CN013w2bmQ25WAIha4Hx9_!!6000000007533-55-tps-137-26.svg', + href: 'https://lowcode-engine.cn', + }, + props: { + align: 'left', + }, + }); + + // 注册组件面板 + const componentsPane = skeleton.add({ + area: 'leftArea', + type: 'PanelDock', + name: 'componentsPane', + content: ComponentsPane, + contentProps: {}, + props: { + align: 'top', + icon: 'zujianku', + description: '组件库', + }, + }); + componentsPane?.disable?.(); + project.onSimulatorRendererReady(() => { + componentsPane?.enable?.(); + }); + }, + }; + }; + builtinPluginRegistry.pluginName = 'builtinPluginRegistry'; + await plugins.register(builtinPluginRegistry); + + // 设置内置 setter 和事件绑定、插件绑定面板 + const setterRegistry = (ctx: any) => { + const { setterMap, pluginMap } = AliLowCodeEngineExt; + return { + name: 'ext-setters-registry', + async init() { + const { setters, skeleton } = ctx; + // 注册setterMap + setters.registerSetter(setterMap as any); + // 注册插件 + // 注册事件绑定面板 + skeleton.add({ + area: 'centerArea', + type: 'Widget', + content: pluginMap.EventBindDialog, + name: 'eventBindDialog', + props: {}, + }); + + // 注册变量绑定面板 + skeleton.add({ + area: 'centerArea', + type: 'Widget', + content: pluginMap.VariableBindDialog, + name: 'variableBindDialog', + props: {}, + }); + }, + }; + }; + setterRegistry.pluginName = 'setterRegistry'; + await plugins.register(setterRegistry); + + const loadAssetsSample = (ctx: any) => { + return { + name: 'loadAssetsSample', + async init() { + const { skeleton } = ctx; + + skeleton.add({ + name: 'loadAssetsSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + width: 80, + }, + content: ( + + ), + }); + }, + }; + }; + loadAssetsSample.pluginName = 'loadAssetsSample'; + await plugins.register(loadAssetsSample); + + // 注册保存面板 + const saveSample = (ctx: any) => { + return { + name: 'saveSample', + async init() { + const { skeleton, hotkey } = ctx; + + skeleton.add({ + name: 'saveSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: , + }); + skeleton.add({ + name: 'resetSchema', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: , + }); + hotkey.bind('command+s', (e) => { + e.preventDefault(); + saveSchema(); + }); + }, + }; + }; + saveSample.pluginName = 'saveSample'; + await plugins.register(saveSample); + + const previewSample = (ctx: any) => { + return { + name: 'previewSample', + async init() { + const { skeleton } = ctx; + skeleton.add({ + name: 'previewSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + }, + }; + }; + previewSample.pluginName = 'previewSample'; + await plugins.register(previewSample); + + const customSetter = (ctx: any) => { + return { + name: '___registerCustomSetter___', + async init() { + const { setters } = ctx; + + setters.registerSetter('TitleSetter', TitleSetter); + setters.registerSetter('BehaviorSetter', BehaviorSetter); + setters.registerSetter('CustomSetter', CustomSetter); + }, + }; + }; + customSetter.pluginName = 'customSetter'; + await plugins.register(customSetter); +} diff --git a/packages/plugin-multiple-editor/src/dev-config/universal/scenarios.json b/packages/plugin-multiple-editor/src/dev-config/universal/scenarios.json new file mode 100644 index 0000000..e581267 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/universal/scenarios.json @@ -0,0 +1,30 @@ +[ + { + "name": "index", + "title": "综合场景" + }, + { + "name": "basic-fusion", + "title": "基础 fusion 组件" + }, + { + "name": "basic-fusion-with-single-component", + "title": "基础 fusion 组件 + 单自定义组件" + }, + { + "name": "basic-antd", + "title": "基础 antd 组件" + }, + { + "name": "custom-initialization", + "title": "自定义初始化引擎" + }, + { + "name": "node-extended-actions", + "title": "扩展节点操作项" + }, + { + "name": "next-pro", + "title": "基于next实现的高级表单低代码物料" + } +] diff --git a/packages/plugin-multiple-editor/src/dev-config/universal/schema.json b/packages/plugin-multiple-editor/src/dev-config/universal/schema.json new file mode 100644 index 0000000..5e1dfb2 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/universal/schema.json @@ -0,0 +1,295 @@ +{ + "componentName": "Page", + "id": "node_dockcviv8fo1", + "props": { + "ref": "outerView", + "style": { + "height": "100%" + } + }, + "fileName": "/", + "dataSource": { + "list": [ + { + "type": "fetch", + "isInit": true, + "options": { + "params": {}, + "method": "GET", + "isCors": true, + "timeout": 5000, + "headers": {}, + "uri": "mock/info.json" + }, + "id": "info", + "shouldFetch": { + "type": "JSFunction", + "value": "function() { \n console.log('should fetch.....');\n return true; \n}" + } + } + ] + }, + "state": { + "text": { + "type": "JSExpression", + "value": "\"outer\"" + }, + "isShowDialog": { + "type": "JSExpression", + "value": "false" + } + }, + "css": "body {\n font-size: 12px;\n}\n\n.button {\n width: 100px;\n color: #ff00ff\n}", + "lifeCycles": { + "componentDidMount": { + "type": "JSFunction", + "value": "function componentDidMount() {\n console.log('did mount');\n}" + }, + "componentWillUnmount": { + "type": "JSFunction", + "value": "function componentWillUnmount() {\n console.log('will unmount');\n}" + } + }, + "methods": { + "testFunc": { + "type": "JSFunction", + "value": "function testFunc() {\n console.log('test func');\n}" + }, + "onClick": { + "type": "JSFunction", + "value": "function onClick() {\n this.setState({\n isShowDialog: true\n });\n}" + }, + "closeDialog": { + "type": "JSFunction", + "value": "function closeDialog() {\n this.setState({\n isShowDialog: false\n });\n}" + } + }, + "originCode": "export default class LowcodeComponent extends Component {\n state = {\n \"text\": \"outer\",\n \"isShowDialog\": false\n }\n componentDidMount() {\n console.log('did mount');\n }\n componentWillUnmount() {\n console.log('will unmount');\n }\n testFunc() {\n console.log('test func');\n }\n onClick() {\n this.setState({\n isShowDialog: true\n })\n }\n closeDialog() {\n this.setState({\n isShowDialog: false\n })\n }\n abc = () => {\n}}", + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextPage", + "id": "node_ockzs2vw431", + "props": { + "headerDivider": true, + "minHeight": "100vh", + "presetNav": true, + "presetAside": true, + "footer": false, + "nav": false, + "aside": false, + "placeholderStyle": { + "gridRowEnd": "span 1", + "gridColumnEnd": "span 12" + }, + "headerProps": { + "background": "surface" + }, + "header": { + "type": "JSSlot", + "value": [ + { + "componentName": "NextPageHeader", + "id": "node_ockzs2vw433", + "props": {}, + "title": "页面头部", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextRowColContainer", + "id": "node_ockzs2vw434", + "props": { + "rowGap": 20, + "colGap": 20 + }, + "title": "行列容器", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextRow", + "id": "node_ockzs2vw435", + "props": {}, + "title": "行", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextCol", + "id": "node_ockzs2vw436", + "props": { + "colSpan": 1 + }, + "title": "列", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextP", + "id": "node_ockzvfoetv17", + "props": { + "wrap": false, + "type": "body2", + "verAlign": "middle", + "textSpacing": true, + "align": "left" + }, + "docId": "dockzvfoetv", + "title": "段落", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextText", + "id": "node_ockzvfoetv18", + "props": { + "type": "h5", + "children": { + "type": "JSExpression", + "value": "this.state.info?.info", + "mock": "标题标题" + }, + "mark": false, + "code": false, + "delete": false, + "underline": false, + "strong": false + }, + "docId": "dockzvfoetv", + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "title": "header" + }, + "isTab": false, + "contentAlignCenter": false, + "contentProps": { + "style": { + "background": "rgba(255,255,255,0)" + } + } + }, + "title": "页面", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextBlock", + "id": "node_ockzs2vw437", + "props": { + "placeholderStyle": { + "height": "100%" + }, + "noPadding": false, + "noBorder": false, + "title": "区域标题", + "rowGap": 20, + "colGap": 20, + "background": "surface", + "layoutmode": "O", + "strict": true, + "colSpan": 12, + "rowSpan": 1, + "mode": "transparent", + "childTotalColumns": 12 + }, + "title": "区域", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextBlockCell", + "id": "node_ockzs2vw438", + "props": { + "colSpan": 12, + "rowSpan": 1, + "mode": "procard", + "isAutoContainer": true, + "title": "区块标题" + }, + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextRowColContainer", + "id": "node_ockzs2vw439", + "props": { + "rowGap": 20, + "colGap": 20 + }, + "title": "行列容器", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextRow", + "id": "node_ockzs2vw43a", + "props": {}, + "title": "行", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextCol", + "id": "node_ockzs2vw43b", + "props": { + "colSpan": 1 + }, + "title": "列", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] +} diff --git a/packages/plugin-multiple-editor/src/dev-config/universal/utils.ts b/packages/plugin-multiple-editor/src/dev-config/universal/utils.ts new file mode 100644 index 0000000..a3f734d --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/universal/utils.ts @@ -0,0 +1,301 @@ +import { material, project } from '@alilc/lowcode-engine'; +import { filterPackages } from '@alilc/lowcode-plugin-inject'; +import { Message, Dialog } from '@alifd/next'; +import { TransformStage } from '@alilc/lowcode-types'; + +export const loadIncrementalAssets = () => { + material?.onChangeAssets(() => { + Message.success('[MCBreadcrumb] 物料加载成功'); + }); + + material.loadIncrementalAssets({ + packages: [ + { + title: 'MCBreadcrumb', + package: 'mc-breadcrumb', + version: '1.0.0', + urls: [ + 'https://unpkg.alibaba-inc.com/mc-breadcrumb@1.0.0/dist/MCBreadcrumb.js', + 'https://unpkg.alibaba-inc.com/mc-breadcrumb@1.0.0/dist/MCBreadcrumb.css', + ], + library: 'MCBreadcrumb', + } as any, + ], + components: [ + { + componentName: 'MCBreadcrumb', + title: 'MCBreadcrumb', + docUrl: '', + screenshot: '', + npm: { + package: 'mc-breadcrumb', + version: '1.0.0', + exportName: 'MCBreadcrumb', + main: 'lib/index.js', + destructuring: false, + subName: '', + }, + props: [ + { + name: 'prefix', + propType: 'string', + description: '样式类名的品牌前缀', + defaultValue: 'next-', + }, + { + name: 'title', + propType: 'string', + description: '标题', + defaultValue: 'next-', + }, + { + name: 'rtl', + propType: 'bool', + }, + { + name: 'children', + propType: { + type: 'instanceOf', + value: 'node', + }, + description: '面包屑子节点，需传入 Breadcrumb.Item', + }, + { + name: 'maxNode', + propType: { + type: 'oneOfType', + value: [ + 'number', + { + type: 'oneOf', + value: ['auto'], + }, + ], + }, + description: + '面包屑最多显示个数，超出部分会被隐藏, 设置为 auto 会自动根据父元素的宽度适配。', + defaultValue: 100, + }, + { + name: 'separator', + propType: { + type: 'instanceOf', + value: 'node', + }, + description: '分隔符，可以是文本或 Icon', + }, + { + name: 'component', + propType: { + type: 'oneOfType', + value: ['string', 'func'], + }, + description: '设置标签类型', + defaultValue: 'nav', + }, + { + name: 'className', + propType: 'any', + }, + { + name: 'style', + propType: 'object', + }, + ], + configure: { + component: { + isContainer: true, + isModel: true, + rootSelector: 'div.MCBreadcrumb', + } as any, + }, + }, + ], + + componentList: [ + { + title: '常用', + icon: '', + children: [ + { + componentName: 'MCBreadcrumb', + title: 'MC面包屑', + icon: '', + package: 'mc-breadcrumb', + library: 'MCBreadcrumb', + snippets: [ + { + title: 'MC面包屑', + screenshot: + 'https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_breadcrumb.png', + schema: { + componentName: 'MCBreadcrumb', + props: { + title: '物料中心', + prefix: 'next-', + maxNode: 100, + }, + }, + }, + ], + }, + ], + }, + ], + } as any); +}; + +export const preview = (scenarioName = 'index') => { + saveSchema(scenarioName); + setTimeout(() => { + const search = window.location.search + ? `${window.location.search}&scenarioName=${scenarioName}` + : `?scenarioName=${scenarioName}`; + window.open(`./preview.html${search}`); + }, 500); +}; + +export const saveSchema = async (scenarioName = 'index') => { + setProjectSchemaToLocalStorage(scenarioName); + + await setPackgesToLocalStorage(scenarioName); + // window.localStorage.setItem( + // 'projectSchema', + // JSON.stringify(project.exportSchema(TransformStage.Save)) + // ); + // const packages = await filterPackages(material.getAssets().packages); + // window.localStorage.setItem( + // 'packages', + // JSON.stringify(packages) + // ); + Message.success('成功保存到本地'); +}; + +export const resetSchema = async (scenarioName = 'index') => { + try { + await new Promise((resolve, reject) => { + Dialog.confirm({ + content: '确定要重置吗？您所有的修改都将消失！', + onOk: () => { + resolve(); + }, + onCancel: () => { + reject(); + }, + }); + }); + } catch (err) { + return; + } + + // 除了「综合场景」，其他场景没有默认 schema.json，这里构造空页面 + if (scenarioName !== 'index') { + window.localStorage.setItem( + getLSName(scenarioName), + JSON.stringify({ + componentsTree: [{ componentName: 'Page', fileName: 'sample' }], + componentsMap: material.componentsMap, + version: '1.0.0', + i18n: {}, + }) + ); + project + .getCurrentDocument() + ?.importSchema({ componentName: 'Page', fileName: 'sample' }); + project.simulatorHost?.rerender(); + Message.success('成功重置页面'); + return; + } + + let schema; + try { + schema = await request('./schema.json'); + } catch (err) { + schema = { + componentName: 'Page', + fileName: 'sample', + }; + } + + window.localStorage.setItem( + getLSName('index'), + JSON.stringify({ + componentsTree: [schema], + componentsMap: material.componentsMap, + version: '1.0.0', + i18n: {}, + }) + ); + + project.getCurrentDocument()?.importSchema(schema); + project.simulatorHost?.rerender(); + Message.success('成功重置页面'); +}; + +const getLSName = (scenarioName: string, ns = 'projectSchema') => + `${scenarioName}:${ns}`; + +export const getProjectSchemaFromLocalStorage = (scenarioName: string) => { + if (!scenarioName) { + console.error('scenarioName is required!'); + return; + } + return JSON.parse( + window.localStorage.getItem(getLSName(scenarioName)) || '{}' + ); +}; + +const setProjectSchemaToLocalStorage = (scenarioName: string) => { + if (!scenarioName) { + console.error('scenarioName is required!'); + return; + } + window.localStorage.setItem( + getLSName(scenarioName), + JSON.stringify(project.exportSchema(TransformStage.Save as any)) + ); +}; + +const setPackgesToLocalStorage = async (scenarioName: string) => { + if (!scenarioName) { + console.error('scenarioName is required!'); + return; + } + const packages = await filterPackages(material.getAssets().packages); + window.localStorage.setItem( + getLSName(scenarioName, 'packages'), + JSON.stringify(packages) + ); +}; + +export const getPackagesFromLocalStorage = (scenarioName: string) => { + if (!scenarioName) { + console.error('scenarioName is required!'); + return; + } + return JSON.parse( + window.localStorage.getItem(getLSName(scenarioName, 'packages')) || '{}' + ); +}; + +export const getPageSchema = async (scenarioName = 'index') => { + const pageSchema = + getProjectSchemaFromLocalStorage(scenarioName).componentsTree?.[0]; + + if (pageSchema) { + return pageSchema; + } + + return await request('./schema.json'); +}; + +function request( + dataAPI: string, + method = 'GET', + data?: object | string, + headers?: object, + otherProps?: any +): Promise { + // eslint-disable-next-line @typescript-eslint/no-var-requires + return Promise.resolve(require('./schema.json')); +} diff --git a/packages/plugin-multiple-editor/src/global.d.ts b/packages/plugin-multiple-editor/src/global.d.ts new file mode 100644 index 0000000..8da7e27 --- /dev/null +++ b/packages/plugin-multiple-editor/src/global.d.ts @@ -0,0 +1,8 @@ +declare module '*.png'; +declare module '*.svg'; + +interface Window { + less: any; + prettier: typeof import('prettier'); + prettierPlugins: any; +} diff --git a/packages/plugin-multiple-editor/src/index.dev.less b/packages/plugin-multiple-editor/src/index.dev.less new file mode 100644 index 0000000..1010ca6 --- /dev/null +++ b/packages/plugin-multiple-editor/src/index.dev.less @@ -0,0 +1,4 @@ +#root { + height: 100vh; + width: 100vw; +} \ No newline at end of file diff --git a/packages/plugin-multiple-editor/src/index.dev.tsx b/packages/plugin-multiple-editor/src/index.dev.tsx new file mode 100644 index 0000000..b544dcc --- /dev/null +++ b/packages/plugin-multiple-editor/src/index.dev.tsx @@ -0,0 +1,127 @@ +import React, { useEffect, useRef } from 'react'; +import ReactDOM from 'react-dom'; +import { + controller, + getMonaco, +} from '@alilc/lowcode-plugin-base-monaco-editor'; +import { init, plugins } from '@alilc/lowcode-engine'; +import './index.dev.less'; +import codePlugin from './index'; +import { EditorController } from './Controller'; +import registerAllPlugin from './dev-config/universal/plugin'; +import { SearchPlugin } from './plugins/search-plugin'; +import { EditorPluginInterface, Service } from './Service'; +import { PrettierPlugin } from './plugins/prettier-plugin'; + +controller.updateMeta({ singleton: true }); + +(async () => { + console.log((await getMonaco()) === (await getMonaco())); +})(); + +class TestPlugin implements EditorPluginInterface { + apply(service: Service): void { + service.registerAction({ + icon: ( + 111 + ), + key: 'hello', + action() { + alert('111'); + }, + title: '111', + priority: 0, + }); + } +} + +async function initEditor(el: any) { + await registerAllPlugin(); + await plugins.register( + codePlugin({ + softSave: true, + useLess: true, + // mode: 'single', + es6: true, + defaultFiles: { + 'aspect.js': 'export default {}', + 'utils/index.js': 'xxx', + 'utils/u.js': 'xxx', + 'config/life/index.js': 'xxx', + 'config/life/a.js': 'xxx', + 'util.js': '', + }, + plugins: [ + new SearchPlugin({ + onGotoRef: (name) => { + console.log(name); + }, + }), + new TestPlugin(), + new PrettierPlugin(), + ], + onInstall(controller: EditorController) { + (window as any).codeEditorController = controller; + controller.addExtraLib( + ` + declare interface Ctx { + getState(): T; + setState(state: Partial, callback?: () => {}): void; + util: any; + } + declare interface InsPlugin { + (ctx: Ctx): any; + } + `, + 'ts:plugin.d.ts' + ); + + setTimeout(() => { + controller.addExtraLib( + ` + declare module globalThis { + var state: {name: string;} + } + `, + 'ts:global.d.ts' + ); + }, 1000); + + controller.onEditCodeChange((v) => { + // console.log('value change', v); + }); + + setTimeout(() => { + controller.addFiles({ + 'extends/index.js': 'console.log(1)', + 'extends/util.js': 'console.log(2)', + }); + }, 3000); + }, + }) as any + ); + await init(el, { + locale: 'zh-CN', + enableCondition: true, + enableCanvasLock: true, + // 默认绑定变量 + supportVariableGlobally: true, + } as any); +} + +const LowcodeRender = () => { + const ref = useRef(); + useEffect(() => { + initEditor(ref.current); + }, []); + return ( +
+
+
+ ); +}; + +ReactDOM.render(, document.getElementById('root')); diff --git a/packages/plugin-multiple-editor/src/index.tsx b/packages/plugin-multiple-editor/src/index.tsx new file mode 100644 index 0000000..3e6363c --- /dev/null +++ b/packages/plugin-multiple-editor/src/index.tsx @@ -0,0 +1,84 @@ +import { project, event } from '@alilc/lowcode-engine'; +import { IPublicTypePluginConfig, IPublicModelPluginContext } from '@alilc/lowcode-types'; +import { controller as baseController } from '@alilc/lowcode-plugin-base-monaco-editor/es/controller'; +import { EditorProvider } from './Context'; +import MultipleFileEditor from './MultipleFileEditor'; +import React from 'react'; +import { EditorController, editorController } from './Controller'; +import { EditorPluginInterface, Service } from './Service'; +import { loadLess, loadPrettier } from './utils/script-loader'; + +export { editorController }; + +loadPrettier(); +loadLess(); + +baseController.registerMethod('getSchema', () => { + return editorController.getSchema(); +}); + +const pluginCodeEditor = ( + options: { + mode?: 'single' | 'multiple'; + es6?: boolean; + softSave?: boolean; + onInstall?: (controller: EditorController) => void; + plugins?: EditorPluginInterface[]; + defaultFiles?: Record; + useLess?: boolean; + } = {} +) => { + const plugin = (ctx: IPublicModelPluginContext): IPublicTypePluginConfig => { + return { + exports: () => ({}), + init() { + options.onInstall?.(editorController); + editorController.es6 = options.es6; + editorController.useLess = options.useLess; + editorController.defaultFiles = options.defaultFiles || {}; + const schemaDock = ctx.skeleton.add({ + area: 'leftArea', + name: 'codeEditor', + type: 'PanelDock', + props: { + icon: ( + + + + + ), + description: '源码面板', + }, + panelProps: { + width: '848px', + title: '源码面板', + }, + content: ( + + + + ), + }) as any; + + schemaDock && schemaDock.disable(); + project.onSimulatorRendererReady(() => { + schemaDock.enable(); + const finalEditor = event; + const service = new Service(editorController, ctx.skeleton); + service.init({ plugins: options.plugins }); + editorController.init(project, finalEditor, service); + }); + }, + }; + }; + plugin.pluginName = 'codeEditor'; + return plugin; +}; + +export default pluginCodeEditor; diff --git a/packages/plugin-multiple-editor/src/plugins/prettier-plugin/index.tsx b/packages/plugin-multiple-editor/src/plugins/prettier-plugin/index.tsx new file mode 100644 index 0000000..cab4de5 --- /dev/null +++ b/packages/plugin-multiple-editor/src/plugins/prettier-plugin/index.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { EditorPluginInterface, Service } from '@/Service'; +import icon from './prettier.png'; +import { HookKeys } from '@/EditorHook'; +import { Message } from '@alifd/next'; + +export class PrettierPlugin implements EditorPluginInterface { + private service!: Service; + + apply(service: Service): void { + this.service = service; + this.service.registerAction({ + key: 'format', + title: '格式化', + icon: , + action: () => { + const currentFile = service.controller.codeEditorCtx?.currentFile; + if (currentFile?.file && window.prettier) { + const { file } = currentFile; + const { ext, content } = file; + const parseMap: any = { + js: 'babel', + ts: 'babel-ts', + less: 'less', + css: 'css', + }; + const formatted = window.prettier.format(content, { + parser: parseMap[ext as string], + semi: true, + singleQuote: true, + bracketSpacing: true, + trailingComma: 'es5', + // endOfLine: false, + plugins: [ + window.prettierPlugins?.babel, + window.prettierPlugins?.postcss, + ].filter(Boolean), + }); + const editor = service.controller.codeEditor; + editor?.executeEdits('', [ + { + range: editor.getModel()!.getFullModelRange(), + text: formatted, + forceMoveMarkers: true, + }, + ]); + editor?.pushUndoStop(); + service.controller.triggerHook(HookKeys.onEditCodeChange, { + file: file?.fullPath, + content: formatted, + }); + Message.success('格式化代码成功'); + } + }, + priority: 1, + }); + } +} diff --git a/packages/plugin-multiple-editor/src/plugins/prettier-plugin/prettier.png b/packages/plugin-multiple-editor/src/plugins/prettier-plugin/prettier.png new file mode 100644 index 0000000..2d8e9d4 Binary files /dev/null and b/packages/plugin-multiple-editor/src/plugins/prettier-plugin/prettier.png differ diff --git a/packages/plugin-multiple-editor/src/plugins/search-plugin/index.ts b/packages/plugin-multiple-editor/src/plugins/search-plugin/index.ts new file mode 100644 index 0000000..329da3b --- /dev/null +++ b/packages/plugin-multiple-editor/src/plugins/search-plugin/index.ts @@ -0,0 +1,134 @@ +import { EditorPluginInterface, Service } from '@/Service'; +import type editor from 'monaco-editor'; +import { findEditorMatch } from './util'; +import { getAllMethodFromSchema } from './search'; + +type Methods = Record; + +export class SearchPlugin implements EditorPluginInterface { + /** + * 是否已经获取过搜索结果 + * 出于性能考虑，只初始化一次 + */ + private gotSearch?: boolean; + + private service!: Service; + + dispose?: editor.IDisposable; + + command?: string | null | undefined; + + codeLens: editor.languages.CodeLens[] = []; + + methods: Methods; + + constructor( + private options?: { + onGotoRef?: (methodName: string) => void; + onGotMethods?: () => Methods; + onActive?: () => void; + onDeActive?: () => void; + } + ) { + this.methods = {}; + } + + apply(service: Service): void { + this.service = service; + service.onActive(() => { + // this.gotSearch = false; + // 搜索比较耗性能，每次只在打开面板的时候搜一次 + this.methods = this.options?.onGotMethods?.() || getAllMethodFromSchema(); + this.service.controller.codeEditor?.focus(); + }); + service.onDeActive(() => { + // this.dispose?.dispose(); + }); + service.onSelectFileChange( + ({ filepath, content }: { filepath: string; content: string }) => { + if (!filepath) return; + // 只需要初始化一次 + if ( + filepath.replace(/^\//, '') === 'index.js' && + content && + !this.gotSearch + ) { + this.gotSearch = true; + setTimeout(() => { + this.initCodelens(); + }, 500); + } + } + ); + } + + private initCodelens() { + const { monaco, codeEditor } = this.service.controller; + // 只需要一个command，根据函数名执行回调即可 + if (!this.command) { + this.command = codeEditor?.addCommand( + 0, + (_, funcName) => { + this.options?.onGotoRef?.(funcName); + }, + '' + ); + } + + // eslint-disable-next-line @typescript-eslint/no-this-alias + const _this = this; + + this.dispose = monaco?.languages.registerCodeLensProvider('javascript', { + provideCodeLenses(model, token) { + const isIndex: boolean = model.uri.path === '/index.js'; + if (isIndex) { + const content = model.getValue(); + _this.getLensList(content, model); + } + return { + lenses: isIndex ? _this.codeLens : [], + dispose: () => void 0, + } as editor.languages.ProviderResult; + }, + }); + } + + private getLensList( + code: string, + model: editor.editor.ITextModel + ): editor.languages.CodeLens[] { + const ret: editor.languages.CodeLens[] = []; + try { + // const methods = + // this.options?.onGotMethods?.() || getMethods(code).methods; + const { methods } = this; + const methodNames = Object.keys(methods); + for (const method of methodNames) { + const matchRes = findEditorMatch(model, method); + const { startColumn, startLineNumber } = matchRes?.range || {}; + if (startLineNumber && methods[method].count) { + ret.push({ + id: method, + range: { + startLineNumber: startLineNumber, + endLineNumber: startLineNumber, + startColumn: startColumn || 0, + endColumn: startColumn || 0, + }, + command: { + id: this.command || 'no-command', + title: `共有${methods[method].count}处引用`, + arguments: [method], + }, + }); + } + } + this.codeLens = ret; + } catch (error) { + // nothing + console.warn(error); + } + + return ret; + } +} diff --git a/packages/plugin-multiple-editor/src/plugins/search-plugin/search.ts b/packages/plugin-multiple-editor/src/plugins/search-plugin/search.ts new file mode 100644 index 0000000..b3c3c6a --- /dev/null +++ b/packages/plugin-multiple-editor/src/plugins/search-plugin/search.ts @@ -0,0 +1,105 @@ +import { editorController } from '@/Controller'; +import isArray from 'lodash/isArray'; +import isObject from 'lodash/isObject'; + +type Methods = Record; + +export function getAllMethodFromSchema() { + const schema = editorController.getSchema(true); + const componentData = schema.componentsTree?.[0]; + const methods: Methods = {}; + if (componentData) { + Object.assign(methods, getMethodFromNode(componentData)); + } + return methods; +} + +function getMethodFromNode(node: any): Methods { + const methods: Methods = {}; + const mergeIfReference = (obj: any) => { + if (obj?.value && typeof obj.value) { + // JSFunction 类型的为this.xxx.apply() + const matches = obj.value.match( + /((this\.)\w+(\.apply)?\(.*?\))/g + ) as string[]; + if (matches?.length) { + for (const match of matches) { + // 二次确认 + if (/(this\.)\w+(\.apply)?\(.*?\)/.test(match)) { + mergeMethod(methods, { + [match.replace(/(this\.)|((\.apply)?\(.*$)/g, '')]: { count: 1 }, + }); + } + } + } + } + }; + + // 合并一个节点数组，例如 slot 的元素列表 + const mergeNodeList = (list: any[]) => { + if (!isArray(list)) { + return; + } + for (const item of list) { + mergeMethod(methods, getMethodFromNode(item)); + } + }; + + const propsKeys = Object.keys(node?.props || {}); + // 属性和事件 + for (const key of propsKeys) { + const prop = node.props[key]; + // 处理事件引用 + if (key === '__events' && prop.eventDataList) { + // 已经在 mergeIfReference 处理了，以下暂时不需要 + // for (const ev of prop.eventDataList) { + // mergeMethod(methods, { [ev.relatedEventName]: { count: 1 } }); + // } + } else { + // 普通 slot + if (prop.type === 'JSSlot') { + mergeNodeList(prop.value || []); + } else if (prop.type === 'JSFunction') { + mergeIfReference(prop); + } else if (isArray(prop)) { + // 数组类型，可能存在是个 slot 数组 + for (const item of prop) { + if (isObject(item)) { + for (const k of Object.keys(item)) { + const p: any = (item as any)[k]; + if (p.type === 'JSSlot') { + mergeNodeList(p.value); + } + } + } + } + } else { + // 普通 props + mergeIfReference(prop); + } + } + } + + // 条件语句 + mergeIfReference(node?.condition); + + // 循环 + mergeIfReference(node.loop); + + // 子元素 + mergeNodeList(node.children || []); + + return methods; +} + +// 合并方法，引用次数相加 +function mergeMethod(methods: Methods, childMethods: Methods) { + for (const method of Object.keys(childMethods)) { + if (!methods[method]) { + methods[method] = childMethods[method]; + } else { + methods[method].count += childMethods[method].count; + } + } + return methods; +} diff --git a/packages/plugin-multiple-editor/src/plugins/search-plugin/util.ts b/packages/plugin-multiple-editor/src/plugins/search-plugin/util.ts new file mode 100644 index 0000000..2d2a462 --- /dev/null +++ b/packages/plugin-multiple-editor/src/plugins/search-plugin/util.ts @@ -0,0 +1,27 @@ +import type { editor } from 'monaco-editor'; + +export function findEditorMatch( + model: editor.ITextModel, + method: string +): editor.FindMatch { + let matchRes = model.findMatches( + `^\\s*(?:async)?\\s*${method}\\s*\\([\\s\\S]*\\)[\\s\\S]*\\{`, + false, + true, + false, + null, + false + )?.[0]; + if (!matchRes) { + // 箭头函数 + matchRes = model.findMatches( + `\\s*${method}\\s*=\\s*(async)?\\s*\\([\\s\\S]*\\)\\s*=>[\\s\\S]*\\{`, + false, + true, + false, + null, + false + )?.[0]; + } + return matchRes; +} diff --git a/packages/plugin-multiple-editor/src/types/index.ts b/packages/plugin-multiple-editor/src/types/index.ts new file mode 100644 index 0000000..9f07652 --- /dev/null +++ b/packages/plugin-multiple-editor/src/types/index.ts @@ -0,0 +1,20 @@ +import { IPublicTypeJSExpression } from '@alilc/lowcode-types'; + +export type Monaco = typeof import('monaco-editor/esm/vs/editor/editor.api'); +export type ObjectType = Record; + +export interface IState extends IPublicTypeJSExpression { + originCode?: string; +} + +export interface FunctionEventParams { + functionName: string; + template?: string; +} + +export interface Methods { + [key: string]: { + type: 'JSFunction'; + value: string; + }; +} diff --git a/packages/plugin-multiple-editor/src/utils/code.ts b/packages/plugin-multiple-editor/src/utils/code.ts new file mode 100644 index 0000000..0f76a26 --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/code.ts @@ -0,0 +1,80 @@ +import { IPublicTypeProjectSchema, IPublicTypeRootSchema } from '@alilc/lowcode-types'; +// @ts-ignore +import prettier from 'prettier/esm/standalone.mjs'; +import parserBabel from 'prettier/parser-babel'; +import parserPostcss from 'prettier/parser-postcss'; + +// JS格式化配置 +const prettierJsConfig = { + plugins: [parserBabel], + parser: 'babel', + tabWidth: 2, // 缩进2个字符 + printWidth: 120, // 超过120个字符强制换行 + quoteProps: 'preserve', // 对象key保留引号 + singleQuote: true, //字符串使用单引号 + semi: true, // 行尾强制添加分号 + trailingComma: 'all', // 强制数组和对象的结尾添加逗号 + arrowParens: 'avoid', // 箭头函数单参数时省略括号：x => x +}; +// CSS格式化配置 +const prettierCssConfig = { + plugins: [parserPostcss], + parser: 'css', + tabWidth: 2, // 缩进2个字符 + printWidth: 120, // 超过120个字符强制换行 +}; + +export const initCode = ( + componentSchema: IPublicTypeRootSchema | undefined +) => { + return ( + (componentSchema as any)?.originCode || + `export default class LowcodeComponent extends Component { + state = { + name: "code plugin", + } + componentDidMount() { + console.log('mount'); + } + componentWillUnmount() { + console.log('unmount'); + } + testFunc() { + console.log('test function'); + } +}` + ); +}; + +// 格式化JS +export const beautifyJs = (input: string, options: any): string => { + if (options !== false && input) { + try { + input = prettier.format(input, { + ...prettierJsConfig, + ...options, + }); + // 去掉结尾的换行，以兼容未格式时的场景 + input = input.substring(0, input.length - 1); + } catch (e) { + console.log(e); + } + } + return input ? input : ''; +}; + +// 格式化CSS +export const beautifyCSS = (input: string, options: any): string => { + if (options !== false && input) { + input = prettier.format(input, { + ...prettierCssConfig, + ...options, + }); + } + return input ? input : ''; +}; + +// schema转换为CSS代码 +export const schema2CssCode = (schema: IPublicTypeProjectSchema, prettierOptions: any) => { + return beautifyCSS(schema.componentsTree[0]?.css || '', prettierOptions); +}; diff --git a/packages/plugin-multiple-editor/src/utils/codeLint/index.ts b/packages/plugin-multiple-editor/src/utils/codeLint/index.ts new file mode 100644 index 0000000..454176b --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/codeLint/index.ts @@ -0,0 +1,43 @@ +import { + isImportDeclaration, + isExportDefaultDeclaration, + isExportDeclaration, + isVariableDeclaration, + isFunctionDeclaration, + isArrowFunctionExpression, +} from '@babel/types'; +import { traverse } from '../ghostBabel'; + +export function lintIndex(content: string) { + let valid = true; + let validMsg = '不允许在 index.js 的组件类外定义变量或使用表达式'; + + traverse(content, { + Program(path) { + for (const node of path.node.body) { + if (!isExportDefaultDeclaration(node) && !isImportDeclaration(node)) { + valid = false; + if (isExportDeclaration(node)) { + validMsg = '只允许index.js内默认导出，禁止命名导出'; + return; + } + if (isVariableDeclaration(node)) { + validMsg = '不允许在 index.js 的组件类外定义变量'; + return; + } + if (isFunctionDeclaration(node)) { + validMsg = '不允许在 index.js 的组件类外定义函数'; + return; + } + } + } + }, + ClassProperty(path) { + if (isArrowFunctionExpression(path.node.value)) { + valid = false; + validMsg = '不允许在组件类中使用箭头函数定义类方法'; + } + }, + }); + return { valid, validMsg }; +} diff --git a/packages/plugin-multiple-editor/src/utils/constants.ts b/packages/plugin-multiple-editor/src/utils/constants.ts new file mode 100644 index 0000000..76a7bdc --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/constants.ts @@ -0,0 +1,9 @@ +import { ObjectType } from './multipleFile/types'; + +export const languageMap: ObjectType = { + js: 'javascript', + css: 'css', + json: 'json', + ts: 'typescript', + less: 'less', +}; diff --git a/packages/plugin-multiple-editor/src/utils/files.ts b/packages/plugin-multiple-editor/src/utils/files.ts new file mode 100644 index 0000000..3a3f1f2 --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/files.ts @@ -0,0 +1,176 @@ +/* eslint-disable no-unreachable */ +export class File { + public ext: string | undefined; + + public type = 'file'; + + constructor( + public name: string, + public content: string, + public fullPath: string + ) { + this.ext = name.match(/\.(\w+)$/)?.[1]; + } +} + +export class Dir { + public dirs: Dir[]; + public files: File[]; + public type = 'dir'; + public fullPath = ''; + + constructor( + public name: string, + dirs: Dir[], + files: File[], + fullPath: string + ) { + this.dirs = dirs || []; + this.files = files || []; + this.fullPath = fullPath || ''; + } +} + +export const getKey = (parent: string | undefined, cur: string) => { + const finalParent = parent ? `${parent.replace(/\/$/, '')}/` : '/'; + return `${finalParent}${cur}`; +}; + +// export function getKeyByPath(path: string[], name: string) { +// return ['', ...path, name].join('/'); +// } + +export const parseKey = (key: string) => { + const fragment = key.split('/').filter(Boolean); + const file = fragment[fragment.length - 1]; + return { path: fragment.slice(0, fragment.length - 1), file }; +}; + +export function getFileOrDirTarget(root: Dir, path: string[]) { + let cur = 0; + let finalNode: Dir | undefined = root; + while (cur < path.length) { + finalNode = finalNode?.dirs.find((d) => d.name === path[cur]); + cur++; + } + return finalNode; +} + +export function getInitFile(root: Dir): File | undefined { + return root.files.find((f) => f.name === 'index.js') || root.files[0]; +} + +export function insertNodeToTree( + root: Dir, + path: string[], + target: Dir | File +) { + const targetNode = getFileOrDirTarget(root, path); + if (targetNode) { + if (target.type === 'file') { + targetNode.files.push(target as File); + } else { + targetNode.dirs.push(target as Dir); + } + } +} + +export function deleteNodeOnTree( + root: Dir, + path: string[], + target: Dir | File +) { + const targetNode = getFileOrDirTarget(root, path); + if (targetNode) { + if (target.type === 'file') { + targetNode.files = targetNode.files.filter((f) => f.name !== target.name); + } else { + targetNode.dirs = targetNode.dirs.filter((f) => f.name !== target.name); + } + } +} + +export function getFileByPath(root: Dir, filename: string, path: string[]) { + const targetNode = getFileOrDirTarget(root, path); + if (targetNode) { + return targetNode.files.find((f) => f.name === filename); + } +} + +/** + * 生成一个文件，其中 file 格式为：{name: 'path/to/file.js', content: 'file content'} + * @param file + * @param dir + */ +export function generateFile( + file: { name: string; content: string }, + dir: Dir +) { + const fragments = file.name + .replace(/^\.?\//, '') + .split('/') + .filter(Boolean); + const filename = fragments[fragments.length - 1]; + const path = fragments.slice(0, fragments.length - 1); + // 找到或生成文件要被添加到的文件夹 + let nextDir = dir; + for (const dir of path) { + let found: Dir | undefined = nextDir.dirs.find((d) => d.name === dir); + if (!found) { + found = new Dir(dir, [], [], path.join('/')); + nextDir.dirs.push(found); + } + nextDir = found; + } + // 添加文件 + nextDir.files.push(new File(filename, file.content, file.name)); +} + +/** + * 后续 sourceCodeMap 对象格式为：{files: {}, meta: {}}; + * 需要对以前的格式做兼容 + * @param obj + * @returns + */ +export function fileMapToTree(obj: any) { + const { files } = compatGetSourceCodeMap(obj); + const keys = Object.keys(files); + const dir = new Dir('/', [], [], ''); + for (const key of keys) { + generateFile({ name: key, content: files[key] }, dir); + } + return dir; +} + +export function treeToMap(root: Dir, base = '') { + const files: any = {}; + for (const file of root.files) { + const key = [base, root.name.replace(/^\//, ''), file.name] + .filter(Boolean) + .join('/'); + files[key] = file.content; + } + for (const dir of root.dirs) { + Object.assign(files, treeToMap(dir, root.name.replace(/^\//, ''))); + } + return files; +} + +export function compatGetSourceCodeMap(origin: any = {}, defaultFiles?: any) { + const { meta, files, ...rest } = origin; + let finalFiles = files; + if (!finalFiles) { + finalFiles = Object.keys(rest).length ? rest : defaultFiles; + } + return { + files: finalFiles || {}, + meta: meta || {}, + }; +} + +export function sortDir(tree: Dir) { + tree.dirs = tree.dirs.sort((a, b) => + a.name === 'modules' ? -1 : a.name.charCodeAt(0) - b.name.charCodeAt(0) + ); + return tree; +} diff --git a/packages/plugin-multiple-editor/src/utils/get-methods.ts b/packages/plugin-multiple-editor/src/utils/get-methods.ts new file mode 100644 index 0000000..6c1315b --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/get-methods.ts @@ -0,0 +1,153 @@ +import { transformFromAst as babelTransformFromAst } from '@babel/standalone'; +import template from '@babel/template'; +import { traverse } from './ghostBabel'; + +import { + functionDeclaration, + identifier, + blockStatement, + Identifier, + ObjectExpression, + ObjectProperty, + Expression, + file, + program, + variableDeclaration, + variableDeclarator, + isArrowFunctionExpression, + isBlockStatement, + returnStatement, +} from '@babel/types'; + +import { Methods } from '../types'; +import { pureTranspile } from './multipleFile/babel'; +import { ensureCtrForIndex } from './transformUMD'; + +const LIFECYCLES_FUNCTION_MAP = { + react: [ + 'constructor', + 'render', + 'componentDidMount', + 'componentDidUpdate', + 'componentWillUnmount', + 'componentDidCatch', + ], +}; + +/** + * get all methods from code-editor-pane + */ +export const getMethods = (fileContent: string) => { + const realIndexContent = ensureCtrForIndex(fileContent); + const methodList: Methods = {}; + const state: Record = {}; + traverse(realIndexContent, { + ClassMethod(path) { + const { node } = path; + // @ts-ignore + const { name } = node.key; + const { params } = node; + // creat empty AST + const code = file(program([])); + const callName = name === 'constructor' ? '__constructor' : name; + const callExpressionString = template(` + return this.$ss.default.prototype.${callName}.apply(this, Array.prototype.slice.call(arguments)); + `)(); + code.program.body.push( + functionDeclaration( + identifier(name), + // @ts-ignore + params.map((p) => { + if (p.type === 'Identifier') { + return identifier(p.name); + } else { + // 解构语法，或者 ...args + // 直接返回 ...args，不需要额外的构造 + return p; + } + }) as any[], + /** + * 所有js文件都会经过编译 + * 那么实际上在收集方法的时候只需调用 index.js 默认导出的类的原型方法即可。 + * constructor 由于其特殊性，仍走远来的逻辑 + * 只有多其他方法走这个转换 + */ + // name === 'constructor' + // ? body + // : + blockStatement( + Array.isArray(callExpressionString) + ? callExpressionString + : [callExpressionString] + ), + node.generator, + node.async + ) + ); + // @ts-ignore + const codeStr = babelTransformFromAst(code, undefined, {}).code; + + methodList[name] = { + type: 'JSFunction', + value: codeStr, + }; + }, + ClassProperty({ node }) { + const key = node.key as Identifier; + const stateValue = node.value as ObjectExpression; + if (key.name === 'state') { + const properties = stateValue.properties || []; + for (const property of properties as ObjectProperty[]) { + const code = file(program([])); + code.program.body.push( + variableDeclaration('var', [ + variableDeclarator( + identifier('name'), + property.value as Expression + ), + ]) + ); + const codeStr = (babelTransformFromAst(code, undefined, {}) as any) + ?.code; + const compiledCode = pureTranspile(codeStr, { esm: true }); + state[ + ((property.key as Identifier).name ?? (property?.key?.extra as any)?.rawValue) as string + ] = { + type: 'JSExpression', + value: compiledCode.replace(/var *name *= */, '').replace(/;$/, ''), + }; + } + } + if (isArrowFunctionExpression(node.value)) { + const { name } = node.key as Identifier; + const ast = file(program([])); + const { body, params, generator, async: isAsync } = node.value; + ast.program.body.push( + functionDeclaration( + node.key as Identifier, + params, + isBlockStatement(body) + ? body + : blockStatement([returnStatement(body as Expression)]), + generator, + isAsync + ) + ); + methodList[name] = { + type: 'JSFunction', + value: (babelTransformFromAst(ast, undefined, {}) as any).code, + }; + } + }, + }); + const methods: any = {}; + const lifeCycles: any = {}; + for (const key of Object.keys(methodList)) { + if (LIFECYCLES_FUNCTION_MAP.react.find((k) => k === key)) { + lifeCycles[key] = methodList[key]; + } else { + methods[key] = methodList[key]; + } + } + return { methods, lifeCycles, state }; +}; diff --git a/packages/plugin-multiple-editor/src/utils/ghostBabel.ts b/packages/plugin-multiple-editor/src/utils/ghostBabel.ts new file mode 100644 index 0000000..d3e6883 --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/ghostBabel.ts @@ -0,0 +1,115 @@ +/** + * 使用 @babel/standalone 的能力实现 parse 和 traverse + */ + +import { + transform, + transformFromAst, + availablePlugins, +} from '@babel/standalone'; +import type { + Visitor, + PluginItem, + ParseResult, + TransformOptions, +} from '@babel/core'; +import { Node, File, file } from '@babel/types'; + +const defaultBabelOption: TransformOptions = { + babelrc: false, + sourceType: 'module', + plugins: [ + availablePlugins['syntax-jsx'], + availablePlugins['transform-react-jsx'], + ], +}; + +export function traverse(code: string | ParseResult | Node, visitor: Visitor) { + const plugin: PluginItem = () => { + return { + visitor, + }; + }; + + if (typeof code === 'string') { + transform(code, { + ...defaultBabelOption, + plugins: [...(defaultBabelOption.plugins || []), plugin], + } as any); + } else { + transformFromAst(code, undefined, { + ...defaultBabelOption, + plugins: [...(defaultBabelOption.plugins || []), plugin], + } as any); + } +} + +export function parse(code: string): File { + let ast: File; + traverse(code, { + Program(path) { + ast = file(path.node); + }, + }); + // @ts-ignore + return ast; +} +export function generateOutline(ast: any) { + const outlineMap: any[] = []; + + function traverse(node: any, outline: any) { + if (!node) { + return; + } + if (!getName(node) && !node.type) return; + let outlineNode: any = {}; + if (getName(node)) { + outlineNode = { + name: getName(node), + type: node.type, + children: [], + }; + outline.push(outlineNode); + if ( + !(node?.type === 'ClassDeclaration' || node?.type === 'ObjectProperty') + ) + return; + } + for (const key in node) { + if (Object.prototype.hasOwnProperty.call(node, key)) { + const childNode = node[key]; + if (Array.isArray(childNode)) { + childNode.forEach((child) => + traverse(child, outlineNode?.children || outline) + ); + } else if (typeof childNode === 'object') { + traverse(childNode, outlineNode.children || outline); + } + } + } + } + + traverse(ast, outlineMap); + return outlineMap; +} + +export function getName(node: any) { + switch (node.type) { + case 'FunctionDeclaration': + return node.id.name; + case 'VariableDeclarator': + return node.id.name; + case 'ClassDeclaration': + return node.id.name; + case 'ClassProperty': + return node.key.name; + case 'ObjectProperty': + return node.key.name; + case 'ClassMethod': + return node.key.name; + case 'ObjectMethod': + return node.key.name; + default: + return null; + } +} diff --git a/packages/plugin-multiple-editor/src/utils/index.ts b/packages/plugin-multiple-editor/src/utils/index.ts new file mode 100644 index 0000000..8f90e59 --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/index.ts @@ -0,0 +1,7 @@ +export * from './transformUMD'; +export * from './code'; +export * from './tsUtils'; +export * from './files'; +export * from './codeLint'; +export * from './ghostBabel'; +export * from './path'; diff --git a/packages/plugin-multiple-editor/src/utils/monaco.ts b/packages/plugin-multiple-editor/src/utils/monaco.ts new file mode 100644 index 0000000..749d145 --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/monaco.ts @@ -0,0 +1,17 @@ +// import loader from '@monaco-editor/loader'; +// import { Monaco } from '../types'; + +// export const getMonaco = (() => { +// let monaco: Monaco; +// return async () => { +// if (!monaco) { +// loader.config({ +// paths: { +// vs: 'https://g.alicdn.com/code/lib/monaco-editor/0.33.0/min/vs', +// }, +// }); +// monaco = await loader.init(); +// } +// return monaco; +// }; +// })(); diff --git a/packages/plugin-multiple-editor/src/utils/multipleFile/Compiler.ts b/packages/plugin-multiple-editor/src/utils/multipleFile/Compiler.ts new file mode 100644 index 0000000..cc65196 --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/multipleFile/Compiler.ts @@ -0,0 +1,78 @@ +import { transpile } from './babel/compile'; +import { + REQUIRE_IMPL_TEMPLATE, + CREATE_REQUIRE, + GLOBAL_CONTENT, + GLOBAL_VAR_NAME, +} from './constants'; +import { ObjectType } from './types'; + +export interface CompilerCtrOpts { + files: ObjectType; + entry?: string; // 入口文件名，默认 index.js + presets?: any[]; + plugins?: any[]; + clearDefault?: boolean; + es6?: boolean; +} + +export class Compiler { + private fileMap: ObjectType = {}; + + private entry: string; + + private compiledMap: ObjectType; + + constructor(private options: CompilerCtrOpts) { + this.fileMap = options.files; + this.entry = options.entry || 'index.js'; + this.compiledMap = {}; + } + + public compile() { + const { plugins, presets, clearDefault } = this.options; + for (const file of Object.keys(this.fileMap)) { + this.compiledMap[file.replace(/(^\.?\/)|(\.jsx?)/g, '')] = transpile( + { + name: file, + content: this.fileMap[file], + }, + { plugins, presets, clearDefault, es6: this.options.es6 } + ); + } + return this.getFinalCompiled(); + } + + private getFinalCompiled() { + // const entryCompiled = this.compiledMap[this.entry.replace(/\.jsx?/, '')]; + return ` + ${GLOBAL_CONTENT} + ${REQUIRE_IMPL_TEMPLATE} + ${CREATE_REQUIRE} + ${GLOBAL_VAR_NAME}.__createRequire = __createRequire; + ${GLOBAL_VAR_NAME}.__require_impl__ = __require_impl__; + var __toExecFileMap__ = ${this.toString()}; + + var exports = {}; + var __require__ = __createRequire('index.js'); + var entryExports = __require__('index'); + exports.default = entryExports.default || entryExports; + `; + } + + private toString() { + return ` + { + ${Object.keys(this.compiledMap) + .map((k) => { + let finalContent = JSON.stringify(this.compiledMap[k]); + // 所有 js 文件，替换 this为固定字符串（避免引擎对this的处理影响） + finalContent = finalContent.replace(/this/g, 'CODE_PLACEHOLDER'); + + return `['${k}']: ${finalContent},`; + }) + .join('\n')} + } + `; + } +} diff --git a/packages/plugin-multiple-editor/src/utils/multipleFile/babel/compile.ts b/packages/plugin-multiple-editor/src/utils/multipleFile/babel/compile.ts new file mode 100644 index 0000000..c5c5b02 --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/multipleFile/babel/compile.ts @@ -0,0 +1,70 @@ +import { + transform, + availablePresets, + availablePlugins, +} from '@babel/standalone'; +import { GLOBAL_CONTENT, GLOBAL_VAR_NAME } from '../constants'; +import { FileCls } from '../utils/file-module'; +import modulePlugin from './plugin-transform-import'; + +export function pureTranspile( + content: string, + options?: { + esm?: boolean; + clearDefault?: boolean; + presets?: any; + plugins?: any; + es6?: boolean; + } +) { + const { clearDefault, esm, es6 } = options || {}; + + let presets = + clearDefault || es6 + ? [] + : [ + [ + availablePresets['env'], + { + modules: esm ? false : 'cjs', + exclude: [ + 'babel-plugin-transform-async-to-generator', + 'babel-plugin-transform-regenerator', + ], + }, + ], + availablePresets['react'], + ]; + let plugins: any[] = [modulePlugin]; + if (es6) { + plugins.unshift( + availablePlugins['transform-modules-commonjs'], + availablePlugins['syntax-jsx'], + availablePlugins['transform-react-jsx'] + ); + } + if (options?.presets) { + presets = presets.concat(options.presets); + } + if (options?.plugins) { + plugins = plugins.concat(options.plugins); + } + + const result = transform(content, { + babelrc: false, + presets, + plugins, + sourceType: 'module', + }); + return result.code || ''; +} + +export function transpile({ name, content }: FileCls, options?: any): string { + const result = pureTranspile(content, options); + return ` + var __filename="${name}"; + ${GLOBAL_CONTENT}; + var __require__ = ${GLOBAL_VAR_NAME}.__createRequire(__filename); + ${result || ''} + `; +} diff --git a/packages/plugin-multiple-editor/src/utils/multipleFile/babel/index.ts b/packages/plugin-multiple-editor/src/utils/multipleFile/babel/index.ts new file mode 100644 index 0000000..fd7dc7c --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/multipleFile/babel/index.ts @@ -0,0 +1,3 @@ +export * from './util'; +export * from './compile'; +export * from './plugin-transform-import'; diff --git a/packages/plugin-multiple-editor/src/utils/multipleFile/babel/plugin-transform-import.ts b/packages/plugin-multiple-editor/src/utils/multipleFile/babel/plugin-transform-import.ts new file mode 100644 index 0000000..4776cc9 --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/multipleFile/babel/plugin-transform-import.ts @@ -0,0 +1,45 @@ +import type { PluginObj } from '@babel/core'; +import { + // isImportDefaultSpecifier, + // ImportSpecifier, + identifier, + Identifier, +} from '@babel/types'; +// import template from "@babel/template"; + +// const getVarName = (source: string) => +// `$$${source.replace(/(^\d)|([\.\+\-\/])/g, "_")}`; + +export default function pluginTransformImport(): PluginObj { + return { + visitor: { + // ImportDeclaration(path, state) { + // let iDefault; + // let imports: string[] = []; + // path.node.specifiers.forEach((id) => { + // if (isImportDefaultSpecifier(id)) { + // iDefault = id.local.name; + // } else { + // imports.push((id as ImportSpecifier).local.name); + // } + // }); + // const source = path.node.source.value; + // let tpl = `var ${getVarName(source)} = __require__('${source}')`; + // if (iDefault) { + // tpl = `${tpl}\nvar ${iDefault} = ${getVarName(source)}.default;`; + // } + // if (imports.length) { + // imports.forEach((i) => { + // tpl = `${tpl}\nvar ${i} = ${getVarName(source)}.${i};`; + // }); + // } + // path.replaceWithMultiple(template(tpl)() as any); + // }, + CallExpression(path) { + if ((path.node.callee as Identifier).name === 'require') { + path.node.callee = identifier('__require__'); + } + }, + }, + }; +} diff --git a/packages/plugin-multiple-editor/src/utils/multipleFile/babel/util.ts b/packages/plugin-multiple-editor/src/utils/multipleFile/babel/util.ts new file mode 100644 index 0000000..410f8de --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/multipleFile/babel/util.ts @@ -0,0 +1,17 @@ +import { + isVariableDeclaration, + isCallExpression, + Identifier, +} from '@babel/types'; + +export function isRequireExpression(node: any) { + return ( + isVariableDeclaration(node) && + isCallExpression(node.declarations[0]?.init) && + (node.declarations[0].init.callee as Identifier).name === 'require' + ); +} + +export function getRequireTarget(node: any): string { + return node.declarations?.[0]?.init?.arguments?.[0]?.value; +} diff --git a/packages/plugin-multiple-editor/src/utils/multipleFile/constants.ts b/packages/plugin-multiple-editor/src/utils/multipleFile/constants.ts new file mode 100644 index 0000000..20f6284 --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/multipleFile/constants.ts @@ -0,0 +1,62 @@ +export const CREATE_REQUIRE = ` +var pathResolve = function() { + function normalizeArray(parts, allowAboveRoot) { + var res = []; + for (var i = 0; i < parts.length; i++) { + var p = parts[i]; + if (!p || p === '.') + continue; + if (p === '..') { + if (res.length && res[res.length - 1] !== '..') { + res.pop(); + } else if (allowAboveRoot) { + res.push('..'); + } + } else { + res.push(p); + } + } + return res; + } + var resolvedPath = '', resolvedAbsolute = false; + for (var i = arguments.length - 1; i >= -1 && !resolvedAbsolute; i--) { + var path = (i >= 0) ? arguments[i] : '/'; + if (!path) { continue; } + resolvedPath = path + '/' + resolvedPath; + resolvedAbsolute = path[0] === '/'; + } + resolvedPath = normalizeArray(resolvedPath.split('/'), !resolvedAbsolute).join('/'); + return ((resolvedAbsolute ? '/' : '') + resolvedPath) || '.'; +}; + +function __createRequire(filename) { + var path = filename.replace(/\\/?\\w+\\.(js|ts)$/, ''); + return function (name) { + var realFilePath = pathResolve(path, name); + return __require_impl__(realFilePath); + }; +} +`; + +export const REQUIRE_IMPL_TEMPLATE = ` +function __require_impl__(file) { + var key = file.replace(/(^\\.?\\/)|(\\.jsx?)/g, ''); + if (!__toExecFileMap__[key]) { + key = key + '/index'; + } + if (!__require_impl__.cache) { + __require_impl__.cache = {}; + } + if (!__require_impl__.cache[key]) { + var content = __toExecFileMap__[key] || ''; + var execContent = '' + 'var exports = {};\\n' + content + '\\n' + 'return exports;' + execContent = execContent.replace(/CODE_PLACEHOLDER/g, 'th' + 'is'); + __require_impl__.cache[key] = new Function(execContent)(); + } + return __require_impl__.cache[key]; +} +`; + +export const GLOBAL_VAR_NAME = 'internalGlobal'; + +export const GLOBAL_CONTENT = `var ${GLOBAL_VAR_NAME} = typeof global !== 'undefined' ? global : window`; diff --git a/packages/plugin-multiple-editor/src/utils/multipleFile/execute.ts b/packages/plugin-multiple-editor/src/utils/multipleFile/execute.ts new file mode 100644 index 0000000..9177297 --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/multipleFile/execute.ts @@ -0,0 +1,4 @@ +export function execute(str: string) { + const fn = new Function(`${str};return exports;`); + return fn(); +} diff --git a/packages/plugin-multiple-editor/src/utils/multipleFile/index.ts b/packages/plugin-multiple-editor/src/utils/multipleFile/index.ts new file mode 100644 index 0000000..796c623 --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/multipleFile/index.ts @@ -0,0 +1,3 @@ +export { Compiler } from './Compiler'; +export { execute } from './execute'; +export * from './transform'; diff --git a/packages/plugin-multiple-editor/src/utils/multipleFile/transform.ts b/packages/plugin-multiple-editor/src/utils/multipleFile/transform.ts new file mode 100644 index 0000000..500e2c9 --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/multipleFile/transform.ts @@ -0,0 +1,24 @@ +import { Compiler } from './Compiler'; +import { ObjectType } from './types'; + +export function transform( + files: ObjectType, + options?: { + es6?: boolean; + plugins?: any[]; + presets?: any[]; + entry?: string; + clearDefault?: boolean; + } +) { + const { entry, presets, plugins, clearDefault, es6 } = options || {}; + const compiler = new Compiler({ + es6, + files, + entry, + presets, + plugins, + clearDefault, + }); + return compiler.compile(); +} diff --git a/packages/plugin-multiple-editor/src/utils/multipleFile/types.ts b/packages/plugin-multiple-editor/src/utils/multipleFile/types.ts new file mode 100644 index 0000000..d64b8bc --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/multipleFile/types.ts @@ -0,0 +1 @@ +export type ObjectType = Record; diff --git a/packages/plugin-multiple-editor/src/utils/multipleFile/utils/file-module.ts b/packages/plugin-multiple-editor/src/utils/multipleFile/utils/file-module.ts new file mode 100644 index 0000000..201693b --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/multipleFile/utils/file-module.ts @@ -0,0 +1,11 @@ +export class FileModule { + constructor( + public name: string, + public content: string, + public children: FileModule[] + ) {} +} + +export class FileCls { + constructor(public name: string, public content: string) {} +} diff --git a/packages/plugin-multiple-editor/src/utils/multipleFile/utils/index.ts b/packages/plugin-multiple-editor/src/utils/multipleFile/utils/index.ts new file mode 100644 index 0000000..01f7a8f --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/multipleFile/utils/index.ts @@ -0,0 +1 @@ +export * from './file-module'; diff --git a/packages/plugin-multiple-editor/src/utils/path.ts b/packages/plugin-multiple-editor/src/utils/path.ts new file mode 100644 index 0000000..4ffd40c --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/path.ts @@ -0,0 +1,68 @@ +import uniqBy from 'lodash/uniqBy'; + +export const pathResolve: (...args: string[]) => string = function () { + function normalizeArray(parts: string[], allowAboveRoot: boolean) { + const res = []; + for (let i = 0; i < parts.length; i++) { + const p = parts[i]; + if (!p || p === '.') continue; + if (p === '..') { + if (res.length && res[res.length - 1] !== '..') { + res.pop(); + } else if (allowAboveRoot) { + res.push('..'); + } + } else { + res.push(p); + } + } + return res; + } + let resolvedPath = '', + resolvedAbsolute = false; + for (let i = arguments.length - 1; i >= -1 && !resolvedAbsolute; i--) { + // eslint-disable-next-line prefer-rest-params + const path = i >= 0 ? arguments[i] : '/'; + if (!path) { + continue; + } + resolvedPath = path + '/' + resolvedPath; + resolvedAbsolute = path[0] === '/'; + } + resolvedPath = normalizeArray( + resolvedPath.split('/'), + !resolvedAbsolute + ).join('/'); + return (resolvedAbsolute ? '/' : '') + resolvedPath || '.'; +}; + +export function resolveFilePath(filepath: string) { + const list = filepath.replace(/^\//, '').split('/'); + return list.slice(0, list.length - 1).join('/'); +} + +export function getFilesByPath(files: Record, path: string) { + const fileKeys = Object.keys(files); + const getDirsFromList = (list: string[]) => + uniqBy( + list + .filter((f) => f.replace(/^\//, '').split('/').length > 1) + .map((f) => ({ type: 'dir', path: f.split('/')[0] })), + (i) => i.path + ); + if (!path || path === '/') { + const fileList = fileKeys + .filter((key) => key.replace(/^\//, '').split('/').length === 1) + .map((f) => ({ type: 'file', path: f.split('/')[0] })); + return [...getDirsFromList(fileKeys), ...fileList]; + } + + const normalizedList = fileKeys + .filter((key) => key.replace(/^\//, '').startsWith(path.replace(/^\//, ''))) + .map((f) => f.replace(`${path.replace(/(\/$)|(^\/)/g, '')}/`, '')); + const fileList = normalizedList + .filter((f) => f.split('/').length === 1) + .map((f) => ({ type: 'file', path: f })); + + return [...getDirsFromList(normalizedList), ...fileList]; +} diff --git a/packages/plugin-multiple-editor/src/utils/script-loader.ts b/packages/plugin-multiple-editor/src/utils/script-loader.ts new file mode 100644 index 0000000..08efeed --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/script-loader.ts @@ -0,0 +1,50 @@ +export function loadScript(url: string) { + return new Promise((resolve) => { + let script = document.getElementById(url) as HTMLScriptElement; + if (!script) { + script = document.createElement('script'); + // script.id = url; + script.src = url; + script.type = 'text/javascript'; + } + script.onload = () => { + resolve(script); + }; + script.addEventListener('error', () => { + console.error('load script error', url); + }); + document.body.appendChild(script); + }); +} + +export async function loadLess() { + if (window.less) { + return window.less; + } + await loadScript( + 'https://gw.alipayobjects.com/os/lib/less/4.2.0/dist/less.min.js' + ); + return window.less; +} + +export async function loadPrettier() { + await Promise.all([ + loadScript( + 'https://g.alicdn.com/code/lib/prettier/2.6.0/standalone.min.js' + ), + loadScript( + 'https://g.alicdn.com/code/lib/prettier/2.6.0/parser-postcss.min.js' + ), + loadScript( + 'https://g.alicdn.com/code/lib/prettier/2.6.0/parser-babel.min.js' + ), + ]); + return window.prettier; +} + +export async function loadBabel(): Promise { + const url = + 'https://gw.alipayobjects.com/os/lib/babel/standalone/7.22.13/babel.min.js'; + await loadScript(url); + return (window as any).Babel; +} diff --git a/packages/plugin-multiple-editor/src/utils/transformUMD.ts b/packages/plugin-multiple-editor/src/utils/transformUMD.ts new file mode 100644 index 0000000..001437f --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/transformUMD.ts @@ -0,0 +1,122 @@ +import { + transformFromAst, + transform as babelTransform, +} from '@babel/standalone'; +import type { PluginObj } from '@babel/core'; +import { traverse, parse } from './ghostBabel'; +import { + isIdentifier, + ClassBody, + classMethod, + identifier, + Identifier, + blockStatement, +} from '@babel/types'; +import { ObjectType } from '../types'; +import { transform } from './multipleFile'; + +export function getConstructorContent(oldCtr: string) { + const executableScript = 'this.__initExtra.apply(this);'; + + if (!oldCtr) { + return `function constructor() { + ${executableScript}; + }`; + } else { + // 将可执行代码插入 constructor 最上面 + return oldCtr.replace( + /function +constructor\([a-zA-Z\-_]*\) *\{/, + `function constructor() {\n${executableScript}\n` + ); + } +} + +/** + * 确保为 index.js 添加上 constructor + * @param content + * @returns + */ +export function ensureCtrForIndex(content: string): string { + const ast = parse(content); + let hasConstructor = false; + traverse(ast, { + ClassMethod({ node }) { + if ((node.key as Identifier).name === 'constructor') { + hasConstructor = true; + } + }, + }); + // 如果没有constructor，添加上一个默认的constructor + if (!hasConstructor) { + traverse(ast, { + ClassDeclaration({ node }) { + node.body.body.unshift( + classMethod( + 'method', + identifier('constructor'), + [], + blockStatement([]) + ) + ); + }, + }); + } + return (transformFromAst(ast, undefined, {}) as any)?.code || ''; +} + +function preprocessIndex(content: string) { + const contentWithCtr = ensureCtrForIndex(content); + + const processPlugin = (): PluginObj => { + return { + visitor: { + ClassMethod(path) { + const { key, body } = path.node; + if (isIdentifier(key) && key.name === 'constructor') { + (path.parent as ClassBody).body.push( + classMethod('method', identifier('__constructor'), [], body) + ); + } + }, + }, + }; + }; + return ( + babelTransform(contentWithCtr, { plugins: [processPlugin] }).code || '' + ); +} + +export function getInitFuncContent(fileMap: ObjectType, es6?: boolean) { + const finalFileMap = Object.entries(fileMap) + .filter(([k]) => !['index.css', 'index.less'].includes(k)) + .map(([key, content]) => { + let realContent = content; + if (key === 'index.js') { + realContent = preprocessIndex( + realContent + .replace('extends Component', '') + .replace(/super\([a-zA-Z_]*\);?/, '') + ); + } + if (key === 'index.js' && !/export +default/gi.test(content)) { + realContent = realContent.replace( + 'class LowcodeComponent', + 'export default class LowcodeComponent' + ); + } + + return [key, realContent]; + }) + .reduce((val, [key, content]) => ({ ...val, [key]: content }), {}); + + const compiled = transform(finalFileMap, { + plugins: [], + es6, + }); + return `function __initExtra() { + ${compiled} + this.$ss = exports; + this.$ss.index = exports; + return exports; +}`; +} diff --git a/packages/plugin-multiple-editor/src/utils/tsUtils.ts b/packages/plugin-multiple-editor/src/utils/tsUtils.ts new file mode 100644 index 0000000..395592f --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/tsUtils.ts @@ -0,0 +1,16 @@ +export const getDefaultDeclaration = (declaration?: string) => ({ + content: ` + declare class Component { + state?: Record; + setState(input: Record, fn?: (...args: any[]) => any): void; + componentDidMount(): void; + constructor(props: Record, context: any); + render(): void; + componentDidUpdate(prevProps: Record, prevState: Record, snapshot: Record): void; + componentWillUnmount(): void; + componentDidCatch(error: Error, info: any): void; + ${declaration || ''} + } + `, + path: 'ts:component.d.ts', +}); diff --git a/packages/plugin-multiple-editor/tests/compile.test.ts b/packages/plugin-multiple-editor/tests/compile.test.ts new file mode 100644 index 0000000..e69de29 diff --git a/packages/plugin-multiple-editor/tests/files.test.ts b/packages/plugin-multiple-editor/tests/files.test.ts new file mode 100644 index 0000000..a082d96 --- /dev/null +++ b/packages/plugin-multiple-editor/tests/files.test.ts @@ -0,0 +1,14 @@ +import { fileMapToTree } from '../src/utils/files'; + +const fileMap = { + 'index.js': + 'import util from \'./util/index\';\nimport { service } from \'./service/index\';\n\nexport default class LowcodeComponent extends Component {\n constructor() { console.log(service) }\n componentDidMount() {\n service()\n console.log(\'mount1231231323\', util());\n }\n componentWillUnmount() {\n console.log(\'unmount\');\n }\n testFunc() {\n console.log(\'test function\');\n }\n}', + 'index.css': '', + 'util/index.js': + 'import {common} from \'./common\';\n\nexport default function util() {\n return `${common()}-456`;\n}', + 'util/common.js': 'export function common() {\n return 123;\n}', + 'service/index.js': + 'export async function service() {\n return Promise.resolve(\'service\');\n}', +}; + +console.log(fileMapToTree(fileMap)); diff --git a/packages/plugin-multiple-editor/tests/test.js b/packages/plugin-multiple-editor/tests/test.js new file mode 100644 index 0000000..1971dcb --- /dev/null +++ b/packages/plugin-multiple-editor/tests/test.js @@ -0,0 +1,99 @@ +function __initExtra() { + + var internalGlobal = typeof global !== 'undefined' ? global : window; + + function __require_impl__(file) { + var key = file.replace(/(^\.?\/)|(\.jsx?)/g, ''); + if (!__toExecFileMap__[key]) { + key = key + '/index'; + } + if (!__require_impl__.cache) { + __require_impl__.cache = {}; + } + if (!__require_impl__.cache[key]) { + var content = __toExecFileMap__[key] || ''; + __require_impl__.cache[key] = new Function( + '' + 'var exports = {};\n' + content + '\n' + 'return exports;' + )(); + } + return __require_impl__.cache[key]; + } + + + function __createRequire(filename) { + var path = filename.replace(/\/?\w+\.(js|ts)$/, ''); + return function (name) { + var realFilePath = name; + if (/^\.\//.test(name)) { + realFilePath = path + '/' + name.replace(/^\.\//, ''); + } + return __require_impl__(realFilePath); + }; + } + + internalGlobal.__createRequire = __createRequire; + internalGlobal.__require_impl__ = __require_impl__; + var __toExecFileMap__ = + { + 'index': '\n var __filename="index.js";\n var internalGlobal = typeof global !== \'undefined\' ? global : window;\n var __require__ = internalGlobal.__createRequire(__filename);\n "use strict";\n\nObject.defineProperty(exports, "__esModule", {\n value: true\n});\nexports["default"] = void 0;\n\nvar _index = _interopRequireDefault(__require__("./util/index"));\n\nvar _index2 = __require__("./service/index");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\n\nvar LowcodeComponent = /*#__PURE__*/function () {\n function LowcodeComponent() {\n _classCallCheck(this, LowcodeComponent);\n }\n\n _createClass(LowcodeComponent, [{\n key: "componentDidMount",\n value: function componentDidMount() {\n // service()\n console.log(\'mount1231231323\', (0, _index["default"])());\n }\n }, {\n key: "testFunc",\n value: function testFunc() {\n console.log(\'test function\');\n }\n }]);\n\n return LowcodeComponent;\n}();\n\nexports["default"] = LowcodeComponent;\n ', + 'util/index': '\n var __filename="util/index.js";\n var internalGlobal = typeof global !== \'undefined\' ? global : window;\n var __require__ = internalGlobal.__createRequire(__filename);\n "use strict";\n\nObject.defineProperty(exports, "__esModule", {\n value: true\n});\nexports["default"] = util;\n\nvar _common = __require__("./common");\n\nfunction util() {\n return "".concat((0, _common.common)(), "-456");\n}\n ', + 'util/common': '\n var __filename="util/common.js";\n var internalGlobal = typeof global !== \'undefined\' ? global : window;\n var __require__ = internalGlobal.__createRequire(__filename);\n "use strict";\n\nObject.defineProperty(exports, "__esModule", {\n value: true\n});\nexports.common = common;\n\nfunction common() {\n return 123;\n}\n ', + 'service/index': '\n var __filename="service/index.js";\n var internalGlobal = typeof global !== \'undefined\' ? global : window;\n var __require__ = internalGlobal.__createRequire(__filename);\n "use strict";\n\nObject.defineProperty(exports, "__esModule", {\n value: true\n});\nexports.service = service;\n\nasync function service() {\n return Promise.resolve(\'service\');\n}\n ', + } + ; + + var exports = {}; + + var __filename = 'index.js'; + var internalGlobal = typeof global !== 'undefined' ? global : window; + var __require__ = internalGlobal.__createRequire(__filename); + 'use strict'; + + Object.defineProperty(exports, '__esModule', { + value: true + }); + exports['default'] = void 0; + + var _index = _interopRequireDefault(__require__('./util/index')); + + var _index2 = __require__('./service/index'); + + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } + + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } + + function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + + function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, 'prototype', { writable: false }); return Constructor; } + + var LowcodeComponent = /*#__PURE__*/function () { + function LowcodeComponent() { + _classCallCheck(this, LowcodeComponent); + } + + _createClass(LowcodeComponent, [{ + key: 'componentDidMount', + value: function componentDidMount() { + // service() + console.log('mount1231231323', (0, _index['default'])()); + } + }, { + key: 'testFunc', + value: function testFunc() { + console.log('test function'); + } + }]); + + return LowcodeComponent; + }(); + + exports['default'] = LowcodeComponent; + + + this.$ss = exports; + this.$ss.index = exports; + return exports; +} + +const exp = __initExtra(); +console.log(exp.default.prototype.componentDidMount()); \ No newline at end of file diff --git a/packages/plugin-multiple-editor/tsconfig-test.json b/packages/plugin-multiple-editor/tsconfig-test.json new file mode 100644 index 0000000..465e9c5 --- /dev/null +++ b/packages/plugin-multiple-editor/tsconfig-test.json @@ -0,0 +1,13 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "src", + "baseUrl": "src", + "outDir": "es", + "moduleResolution": "node", + "declaration": true, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "module": "commonjs" + } +} diff --git a/packages/plugin-multiple-editor/tsconfig.json b/packages/plugin-multiple-editor/tsconfig.json new file mode 100644 index 0000000..99b6c71 --- /dev/null +++ b/packages/plugin-multiple-editor/tsconfig.json @@ -0,0 +1,28 @@ +{ + "compilerOptions": { + "strict": false, + "rootDir": "./src", + "baseUrl": "./", + "outDir": "./es", + "moduleResolution": "node", + "declaration": true, + "resolveJsonModule": true, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "module": "es2020", + "target": "ESNext", + "jsx": "react", + "paths": { + "@/*": ["./src/*"], + "utils": ["./src/utils"], + "utils/*": ["./src/utils/*"], + "types": ["./src/types"], + "types/*": ["./src/types/*"], + "react": [ "./node_modules/@types/react" ] + } + }, + "include": ["src"], + "exclude": ["src/dev-config"] +} diff --git a/packages/plugin-resource-tabs/CHANGELOG.md b/packages/plugin-resource-tabs/CHANGELOG.md new file mode 100644 index 0000000..061fdae --- /dev/null +++ b/packages/plugin-resource-tabs/CHANGELOG.md @@ -0,0 +1,3 @@ +## 1.0.0 / 2022-02-16 + +* publish stable version diff --git a/packages/plugin-resource-tabs/README.md b/packages/plugin-resource-tabs/README.md new file mode 100644 index 0000000..94cedf4 --- /dev/null +++ b/packages/plugin-resource-tabs/README.md @@ -0,0 +1,39 @@ +# @alilc/lowcode-plugin-resource-tabs [![][npm-image]][npm-url] + + +--- + +## 使用 + +### 注册插件 +```jsx +import { plugins } from '@alilc/lowcode-engine'; +import PluginResourceTabs from '@alilc/lowcode-plugin-resource-tabs'; + +// 注册到引擎 +plugins.register(PluginResourceTabs); +``` + +### 插件属性 & 方法 + +#### appKey +- description: '唯一标识，用于缓存应用 Tab' +- type: 'string' + +### tabClassName +- description: 'Tab className' + +### shape +- type: 'string', +- description: 'Tab shape' + +### onSort +- type: 'function', +- description: 'tabs sort function', + +### 依赖插件 + +该插件依赖以下插件： + +| 插件名 | 包名 | +| --- | --- | diff --git a/packages/plugin-resource-tabs/build.json b/packages/plugin-resource-tabs/build.json new file mode 100644 index 0000000..4b3794a --- /dev/null +++ b/packages/plugin-resource-tabs/build.json @@ -0,0 +1,20 @@ +{ + "plugins": [ + [ + "@alilc/build-plugin-alt", + { + "type": "plugin", + "inject": true + } + ], + [ + "build-plugin-fusion", + { + "themePackage": "@alifd/theme-lowcode-light" + } + ], + ["build-plugin-moment-locales", { + "locales": ["zh-cn"] + }] + ] +} diff --git a/packages/plugin-resource-tabs/package.json b/packages/plugin-resource-tabs/package.json new file mode 100644 index 0000000..2e6571c --- /dev/null +++ b/packages/plugin-resource-tabs/package.json @@ -0,0 +1,46 @@ +{ + "name": "@alilc/lowcode-plugin-resource-tabs", + "version": "2.0.1", + "description": "alibaba lowcode resource tabs plugin", + "files": [ + "es", + "lib" + ], + "main": "lib/index.js", + "module": "es/index.js", + "scripts": { + "start": "build-scripts start", + "build": "build-scripts build", + "prepublishOnly": "npm run build" + }, + "keywords": [ + "lowcode", + "editor" + ], + "dependencies": { + "@alilc/lowcode-types": "^1.3.0", + "@alilc/lowcode-utils": "^1.0.0", + "react": "^16.8.1", + "react-dom": "^16.8.1" + }, + "devDependencies": { + "@alib/build-scripts": "^0.1.3", + "@alilc/build-plugin-alt": "^1.0.1", + "@alilc/lowcode-engine": "^1.0.0", + "@babel/plugin-proposal-private-property-in-object": "^7.21.11", + "@types/react": "^16.9.13", + "@types/react-dom": "^16.9.4", + "build-plugin-fusion": "^0.1.22", + "build-plugin-moment-locales": "^0.1.0", + "webpack": "^5.89.0" + }, + "publishConfig": { + "registry": "https://registry.npmjs.org/", + "access": "public" + }, + "repository": { + "type": "git", + "url": "https://github.com/alibaba/lowcode-plugins.git", + "directory": "packages/plugin-resource-tabs" + } +} diff --git a/packages/plugin-resource-tabs/src/icon.tsx b/packages/plugin-resource-tabs/src/icon.tsx new file mode 100644 index 0000000..b6df8aa --- /dev/null +++ b/packages/plugin-resource-tabs/src/icon.tsx @@ -0,0 +1,49 @@ +import React from "react" + +export const LockIcon = () => { + return ( + + + + + + + + + + + + + ) +} + +export const CloseIcon = () => { + return ( + + + + + + + + + + ) +} + +export const WarnIcon = () => { + return ( + + + + + + + + + + + + + ) +} \ No newline at end of file diff --git a/packages/plugin-resource-tabs/src/index.scss b/packages/plugin-resource-tabs/src/index.scss new file mode 100644 index 0000000..08964cc --- /dev/null +++ b/packages/plugin-resource-tabs/src/index.scss @@ -0,0 +1,59 @@ +.resource-tabs { + .resource-tab-item { + display: flex; + line-height: 20px; + + &:hover { + .resource-tab-item-close-icon { + display: block; + } + + .resource-tab-item-others { + display: none; + } + } + + &-resource-icon { + margin-right: 2px; + display: flex; + align-items: center; + } + + &-changed-icon { + display: block; + width: 5px; + height: 5px; + border-radius: 100%; + background-color: var(--color-brand, #006aff); + margin: 0 auto; + } + + &-title { + max-width: 100px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-weight: 500; + } + + &-tips { + margin-left: 2px; + width: 12px; + } + + &-close-icon { + position: relative; + top: 2px; + display: none; + } + + &-others { + display: block; + + .icon { + position: relative; + top: 2px; + } + } + } +} diff --git a/packages/plugin-resource-tabs/src/index.tsx b/packages/plugin-resource-tabs/src/index.tsx new file mode 100644 index 0000000..0b376be --- /dev/null +++ b/packages/plugin-resource-tabs/src/index.tsx @@ -0,0 +1,387 @@ +import { Tab, Dialog } from '@alifd/next'; +import { + IPublicModelPluginContext, + IPublicModelResource, + IPublicModelWindow, + IPublicTypeContextMenuAction, + IPublicTypePlugin, +} from '@alilc/lowcode-types'; +import React from 'react'; +import { useState, useEffect, useCallback } from 'react'; +import './index.scss'; +import { CloseIcon, LockIcon, WarnIcon } from './icon'; +import { intl } from './locale'; + +function CustomTabItem(props: { + pluginContext: IPublicModelPluginContext; + options: IOptions; + resource: IPublicModelResource; +}): React.ReactElement { + const { resource } = props; + const { icon: ResourceIcon } = resource; + const propsId = resource.id || resource.options.id; + const { event } = props.pluginContext; + const [changed, setChanged] = useState(false); + const [locked, setLocked] = useState(false); + const [warned, setWarned] = useState(false); + const [title, setTitle] = useState(resource.title); + const onClose = useCallback(() => { + props.pluginContext.workspace.removeEditorWindow(resource); + }, []); + useEffect(() => { + event.on('common:windowChanged', (id, changed) => { + if (propsId === id) { + setChanged(changed); + } + }); + + event.on('common:windowLock', (id, locked) => { + if (propsId === id) { + setLocked(locked); + } + }); + + event.on('common:windowWarn', (id, warned) => { + if (propsId === id) { + setWarned(warned); + } + }); + + event.on('common:windowSave', (id, warned) => { + if (propsId === id) { + setWarned(false); + } + }); + + event.on('common:titleChanged', (id, title) => { + if (propsId === id) { + setTitle(title); + } + }); + }, []); + const ContextMenu = props.pluginContext?.commonUI?.ContextMenu || React.Fragment; + return ( + +
+
+ {ResourceIcon ? : null} +
+
{title}
+
+
{ + e.stopPropagation(); + if (changed) { + Dialog.show({ + v2: true, + title: intl('resource_tabs.src.Warning'), + content: intl('resource_tabs.src.TheCurrentWindowHasUnsaved'), + onOk: () => {}, + onCancel: onClose, + cancelProps: { + children: intl('resource_tabs.src.DiscardChanges'), + }, + okProps: { + children: intl('resource_tabs.src.ContinueEditing'), + }, + }); + return; + } + onClose(); + }} + className="resource-tab-item-close-icon" + > + +
+
+ {changed && !warned ? ( + + ) : null} + + {locked ? : null} + + {warned ? : null} +
+
+
+ + ); +} + +interface ITabItem { + id: string; + windowId: string; +} + +function TabsContent(props: { + pluginContext: IPublicModelPluginContext; + options: IOptions; +}) { + const { pluginContext, options } = props; + const { + onSort, + appKey, + shape, + tabClassName, + } = options; + const { workspace } = pluginContext; + + const [resourceListMap, setResourceListMap] = useState<{ + [key: string]: IPublicModelResource; + }>({}); + + const getTabs = useCallback((): ITabItem[] => { + let windows = workspace.windows; + if (onSort) { + windows = onSort(workspace.windows); + } + + return windows.map((d) => { + return { + id: d.resource?.id || d.resource?.options.id, + windowId: d.id, + }; + }); + }, []); + + const [tabs, setTabs] = useState(getTabs()); + const [activeTitle, setActiveTitle] = useState( + workspace.window?.resource?.id || workspace.window?.resource?.options?.id + ); + + const saveTabsToLocal = useCallback(() => { + localStorage.setItem( + '___lowcode_plugin_resource_tabs___' + appKey, + JSON.stringify(getTabs()) + ); + localStorage.setItem( + '___lowcode_plugin_resource_tabs_active_title___' + appKey, + JSON.stringify({ + id: + workspace.window?.resource?.id || + workspace.window?.resource?.options.id, + }) + ); + }, []); + + const initEvent = useCallback<() => void>(() => { + workspace.onChangeWindows(() => { + setTabs(getTabs()); + saveTabsToLocal(); + }); + workspace.onChangeActiveWindow(() => { + setActiveTitle( + workspace.window?.resource?.id || workspace.window?.resource?.options.id + ); + saveTabsToLocal(); + }); + }, []); + + useEffect(() => { + const initResourceListMap = () => { + const resourceListMap: { + [key: string]: IPublicModelResource; + } = {}; + workspace.resourceList.forEach((d) => { + resourceListMap[d.id || d.options.id] = d; + }); + setResourceListMap(resourceListMap); + }; + + if (workspace.resourceList) { + initResourceListMap(); + } + return workspace.onResourceListChange(() => { + initResourceListMap(); + }); + }, []); + useEffect(() => { + try { + if (!Object.keys(resourceListMap).length || tabs.length) { + return; + } + const value: ITabItem[] = JSON.parse( + localStorage.getItem( + '___lowcode_plugin_resource_tabs___' + appKey + ) || 'null' + ); + const activeValue: { + id: string; + } = JSON.parse( + localStorage.getItem( + '___lowcode_plugin_resource_tabs_active_title___' + appKey + ) || 'null' + ); + + if (value && value.length) { + value.forEach((d) => { + const resource = resourceListMap[d.id]; + resource && workspace.openEditorWindow(resource, true); + }); + + setTabs(getTabs()); + } + + initEvent(); + + if (activeValue) { + const resource = resourceListMap[activeValue.id]; + if (resource) { + workspace.openEditorWindow(resource); + } + } + } catch (e) { + console.error(e); + } + }, [resourceListMap]); + + return ( + ( + + )} + onChange={(name) => { + setActiveTitle(name); + const item = tabs.filter((d) => String(d.id) === String(name))?.[0]; + const resource = resourceListMap[item.id]; + workspace.openEditorWindow(resource); + }} + > + {tabs.map((item) => { + const resource = resourceListMap[item.id]; + if (!resource) { + return null; + } + + return ( + + ); + })} + + ); +} + +function Content(props: { + pluginContext: IPublicModelPluginContext; + options: IOptions; +}) { + const ContextMenu = props.pluginContext?.commonUI?.ContextMenu || React.Fragment; + return ( + + + + ) +} + +interface IOptions { + appKey?: string; + onSort?: (windows: IPublicModelWindow[]) => IPublicModelWindow[]; + shape?: 'pure' | 'wrapped' | 'text' | 'capsule'; + tabClassName?: string; + /** + * 右键菜单项 + */ + contextMenuActions: (ctx: IPublicModelPluginContext) => IPublicTypeContextMenuAction[]; + /** + * 右键 Tab 菜单项 + */ + tabContextMenuActions: (ctx: IPublicModelPluginContext, resource: IPublicModelResource) => IPublicTypeContextMenuAction[]; +} + +const resourceTabs: IPublicTypePlugin = function ( + ctx: IPublicModelPluginContext, + options: IOptions, +) { + const { skeleton } = ctx; + return { + async init() { + skeleton.add({ + area: 'subTopArea', + type: 'Widget', + name: 'resourceTabs', + props: { + align: 'left', + width: 800, + }, + index: -1, + content: Content, + contentProps: { + pluginContext: ctx, + options, + }, + }); + }, + }; +}; + +resourceTabs.pluginName = 'resourceTabs'; + +resourceTabs.meta = { + preferenceDeclaration: { + title: intl('resource_tabs.src.ApplicationTagColumnPlugIn'), + properties: [ + { + key: 'appKey', + type: 'string', + description: intl( + 'resource_tabs.src.UniqueIdentifierForCachingApplication' + ), + }, + { + key: 'onSort', + type: 'function', + description: 'tabs sort function', + }, + { + key: 'shape', + type: 'string', + description: 'Tab shape', + }, + { + key: 'tabClassName', + type: 'string', + description: 'Tab className', + }, + { + key: 'contextMenuActions', + type: 'function', + description: '右键菜单项', + }, + { + key: 'tabContextMenuActions', + type: 'function', + description: '右键 Tab 菜单项', + } + ], + }, + engines: { + lowcodeEngine: '^1.3.0', // 插件需要配合 ^1.0.0 的引擎才可运行 + }, +}; + +export default resourceTabs; diff --git a/packages/plugin-resource-tabs/src/locale/en-US.json b/packages/plugin-resource-tabs/src/locale/en-US.json new file mode 100644 index 0000000..ae407de --- /dev/null +++ b/packages/plugin-resource-tabs/src/locale/en-US.json @@ -0,0 +1,8 @@ +{ + "resource_tabs.src.Warning": "Warning", + "resource_tabs.src.TheCurrentWindowHasUnsaved": "The current window has unsaved changes. Do you want to discard the changes?", + "resource_tabs.src.DiscardChanges": "Discard changes", + "resource_tabs.src.ContinueEditing": "Continue editing", + "resource_tabs.src.ApplicationTagColumnPlugIn": "Application tag column plug-in parameter definition", + "resource_tabs.src.UniqueIdentifierForCachingApplication": "Unique identifier for caching application tabs" +} diff --git a/packages/plugin-resource-tabs/src/locale/index.ts b/packages/plugin-resource-tabs/src/locale/index.ts new file mode 100644 index 0000000..42dc9f1 --- /dev/null +++ b/packages/plugin-resource-tabs/src/locale/index.ts @@ -0,0 +1,14 @@ +import { common } from '@alilc/lowcode-engine'; +import enUS from './en-US.json'; +import zhCN from './zh-CN.json'; + +const { intl } = common?.utils?.createIntl?.({ + 'en-US': enUS, + 'zh-CN': zhCN, +}) || { + intl: (id) => { + return zhCN[id]; + } +}; + +export { intl }; diff --git a/packages/plugin-resource-tabs/src/locale/zh-CN.json b/packages/plugin-resource-tabs/src/locale/zh-CN.json new file mode 100644 index 0000000..78feeae --- /dev/null +++ b/packages/plugin-resource-tabs/src/locale/zh-CN.json @@ -0,0 +1,8 @@ +{ + "resource_tabs.src.Warning": "警告", + "resource_tabs.src.TheCurrentWindowHasUnsaved": "当前窗口有还未保存的改动，是否要舍弃变更", + "resource_tabs.src.DiscardChanges": "舍弃变更", + "resource_tabs.src.ContinueEditing": "继续编辑", + "resource_tabs.src.ApplicationTagColumnPlugIn": "应用标签栏插件参数定义", + "resource_tabs.src.UniqueIdentifierForCachingApplication": "唯一标识，用于缓存应用 Tab" +} diff --git a/packages/plugin-resource-tabs/tsconfig.json b/packages/plugin-resource-tabs/tsconfig.json new file mode 100644 index 0000000..c37b76e --- /dev/null +++ b/packages/plugin-resource-tabs/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "lib" + }, + "include": [ + "./src/" + ] +} diff --git a/packages/plugin-schema/package.json b/packages/plugin-schema/package.json index 5edc5ad..0a4cf8e 100644 --- a/packages/plugin-schema/package.json +++ b/packages/plugin-schema/package.json @@ -17,6 +17,7 @@ "prepublishOnly": "npm run build" }, "publishConfig": { + "registry": "https://registry.npmjs.org/", "access": "public" }, "dependencies": { diff --git a/packages/plugin-set-ref-prop/package.json b/packages/plugin-set-ref-prop/package.json index 8b5a5fe..c06ddb2 100644 --- a/packages/plugin-set-ref-prop/package.json +++ b/packages/plugin-set-ref-prop/package.json @@ -35,6 +35,7 @@ "build-plugin-fusion": "^0.1.22" }, "publishConfig": { + "registry": "https://registry.npmjs.org/", "access": "public" } } diff --git a/packages/plugin-simulator-size/package.json b/packages/plugin-simulator-size/package.json index 19a60b5..3b00b6d 100644 --- a/packages/plugin-simulator-size/package.json +++ b/packages/plugin-simulator-size/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-simulator-select", - "version": "1.0.3", + "version": "1.0.4", "description": "画布切换", "main": "lib/index.js", "scripts": { @@ -25,6 +25,10 @@ "react": "^16.8.1", "react-dom": "^16.8.1" }, + "publishConfig": { + "registry": "https://registry.npmjs.org/", + "access": "public" + }, "author": "mark.ck", "repository": { "type": "git", diff --git a/packages/plugin-simulator-size/src/index.tsx b/packages/plugin-simulator-size/src/index.tsx index 015c67d..7e69c5b 100644 --- a/packages/plugin-simulator-size/src/index.tsx +++ b/packages/plugin-simulator-size/src/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { NumberPicker, Icon } from '@alifd/next'; -import { ILowCodePluginContext, project, isOpenSource } from '@alilc/lowcode-engine'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; import './index.scss'; @@ -14,7 +14,9 @@ const CustomIcon = Icon.createFromIconfontCN({ scriptUrl: 'https://at.alicdn.com/t/font_2896595_33xhsbg9ux5.js', }); -export class SimulatorResizePane extends React.Component { +export class SimulatorResizePane extends React.Component<{ + pluginContext: IPublicModelPluginContext +}> { static displayName = 'SimulatorResizePane'; state = { @@ -23,6 +25,7 @@ export class SimulatorResizePane extends React.Component { }; componentDidMount() { + const { project } = this.props.pluginContext; // @ts-ignore const onSimulatorRendererReady = (project.onSimulatorRendererReady || project.onRendererReady).bind(project); onSimulatorRendererReady(() => { @@ -41,6 +44,7 @@ export class SimulatorResizePane extends React.Component { } change = (device: string) => { + const { project } = this.props.pluginContext; const simulator = project.simulatorHost; // 切换画布 simulator?.set('device', device); @@ -71,6 +75,7 @@ export class SimulatorResizePane extends React.Component { render() { const currentWidth = this.state.currentWidth || 0; + const { project } = this.props.pluginContext; return (
{ @@ -116,7 +121,7 @@ export class SimulatorResizePane extends React.Component { } } -const plugin = (ctx: ILowCodePluginContext) => { +const plugin = (ctx: IPublicModelPluginContext) => { const SimulatorResizePaneRef = React.createRef(); return { @@ -134,6 +139,7 @@ const plugin = (ctx: ILowCodePluginContext) => { content: ( ), }); diff --git a/packages/plugin-test/build.json b/packages/plugin-test/build.json new file mode 100644 index 0000000..840cacf --- /dev/null +++ b/packages/plugin-test/build.json @@ -0,0 +1,19 @@ +{ + "plugins": [ + [ + "@alilc/build-plugin-alt", + { + "type": "plugin" + } + ], + [ + "build-plugin-fusion", + { + "themePackage": "@alifd/theme-lowcode-light" + } + ], + ["build-plugin-moment-locales", { + "locales": ["zh-cn"] + }] + ] +} diff --git a/packages/plugin-test/package.json b/packages/plugin-test/package.json new file mode 100644 index 0000000..09d5504 --- /dev/null +++ b/packages/plugin-test/package.json @@ -0,0 +1,46 @@ +{ + "name": "@alilc/lowcode-plugin-test", + "version": "1.0.2", + "description": "alibaba lowcode editor test plugin", + "files": [ + "es", + "lib" + ], + "main": "lib/index.js", + "module": "es/index.js", + "scripts": { + "start": "build-scripts start", + "build": "build-scripts build", + "prepublishOnly": "npm run build" + }, + "keywords": [ + "lowcode", + "editor" + ], + "dependencies": { + "@alilc/lowcode-utils": "^1.0.0", + "@alilc/lowcode-types": "^1.1.9" + }, + "devDependencies": { + "@alib/build-scripts": "^0.1.3", + "@alilc/build-plugin-alt": "^1.0.1", + "@alilc/lowcode-engine": "^1.0.0", + "@types/react": "^16.9.13", + "@types/react-dom": "^16.9.4", + "build-plugin-fusion": "^0.1.22", + "build-plugin-moment-locales": "^0.1.0", + "@babel/plugin-proposal-private-property-in-object": "^7.21.11", + "react": "^16.8.1", + "webpack": "^5.64.4", + "react-dom": "^16.8.1" + }, + "publishConfig": { + "registry": "https://registry.npmjs.org/", + "access": "public" + }, + "repository": { + "type": "git", + "url": "https://github.com/alibaba/lowcode-plugins.git", + "directory": "packages/plugin-test" + } +} diff --git a/packages/plugin-test/src/index.tsx b/packages/plugin-test/src/index.tsx new file mode 100644 index 0000000..d489336 --- /dev/null +++ b/packages/plugin-test/src/index.tsx @@ -0,0 +1,115 @@ +import React, { PureComponent } from 'react'; +import { project } from '@alilc/lowcode-engine'; +import { Button, Icon } from '@alifd/next'; +import { PluginProps, IPublicTypeDisposable } from '@alilc/lowcode-types'; + +export interface IProps extends PluginProps { + logo?: string; +} + +export interface IState { + undoEnable: boolean; + redoEnable: boolean; +} + +class Test extends PureComponent { + static displayName = 'Test'; + + private history: any; + private changeDocumentDispose?: IPublicTypeDisposable; + private changeStateDispose?: IPublicTypeDisposable; + constructor(props: any) { + super(props); + this.state = { + undoEnable: false, + redoEnable: false, + }; + this.init(); + } + + init = (): void => { + this.changeDocumentDispose = project.onChangeDocument(doc => { + this.history = doc.history; + this.updateState(this.history?.getState() || 0); + this.changeStateDispose?.(); + this.changeStateDispose = this.history.onChangeState(() => { + this.updateState(this.history?.getState() || 0); + }); + }); + }; + + updateState = (state: number): void => { + this.setState({ + undoEnable: !!(state & 1), + redoEnable: !!(state & 2), + }); + }; + + handleUndoClick = (): void => { + this.history.back(); + }; + + handleRedoClick = (): void => { + this.history.forward(); + }; + + componentWillUnmount() { + this.changeDocumentDispose?.(); + this.changeStateDispose?.(); + } + + render(): React.ReactNode { + const { undoEnable, redoEnable } = this.state; + return ( +
+ + +
+ ); + } +} + +const plugin = (ctx: any) => { + return { + // 插件名，注册环境下唯一 + name: 'PluginTest', + // 依赖的插件（插件名数组） + dep: [], + // 插件的初始化函数，在引擎初始化之后会立刻调用 + init() { + // 往引擎增加面板 + ctx.skeleton.add({ + area: 'topArea', + type: 'Widget', + name: 'undoRedo', + content: Test, + props: { + align: 'right', + width: 88, + }, + }) + }, + }; +}; + +plugin.pluginName = 'PluginTest' + +export default plugin diff --git a/packages/plugin-test/tsconfig.json b/packages/plugin-test/tsconfig.json new file mode 100644 index 0000000..c37b76e --- /dev/null +++ b/packages/plugin-test/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "lib" + }, + "include": [ + "./src/" + ] +} diff --git a/packages/plugin-undo-redo/package.json b/packages/plugin-undo-redo/package.json index 670306a..c6d3430 100644 --- a/packages/plugin-undo-redo/package.json +++ b/packages/plugin-undo-redo/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-undo-redo", - "version": "1.0.0-beta.3", + "version": "1.0.1", "description": "alibaba lowcode editor undo redo plugin", "files": [ "es", @@ -19,7 +19,7 @@ ], "dependencies": { "@alilc/lowcode-utils": "^1.0.0", - "@alilc/lowcode-types": "^1.0.0", + "@alilc/lowcode-types": "^1.1.9", "react": "^16.8.1", "react-dom": "^16.8.1" }, @@ -33,6 +33,7 @@ "build-plugin-moment-locales": "^0.1.0" }, "publishConfig": { + "registry": "https://registry.npmjs.org/", "access": "public" }, "repository": { diff --git a/packages/plugin-undo-redo/src/index.tsx b/packages/plugin-undo-redo/src/index.tsx index d4f6673..7c42a84 100644 --- a/packages/plugin-undo-redo/src/index.tsx +++ b/packages/plugin-undo-redo/src/index.tsx @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react'; -import { ILowCodePluginContext, project } from '@alilc/lowcode-engine'; +import { project } from '@alilc/lowcode-engine'; import { Button, Icon } from '@alifd/next'; -import { PluginProps } from '@alilc/lowcode-types'; +import { PluginProps, IPublicTypeDisposable, IPublicModelPluginContext } from '@alilc/lowcode-types'; import './index.scss'; @@ -18,7 +18,8 @@ class UndoRedo extends PureComponent { static displayName = 'LowcodeUndoRedo'; private history: any; - + private changeDocumentDispose?: IPublicTypeDisposable; + private changeStateDispose?: IPublicTypeDisposable; constructor(props: any) { super(props); this.state = { @@ -29,11 +30,11 @@ class UndoRedo extends PureComponent { } init = (): void => { - project.onChangeDocument(doc => { + this.changeDocumentDispose = project.onChangeDocument(doc => { this.history = doc.history; this.updateState(this.history?.getState() || 0); - - this.history.onChangeState(() => { + this.changeStateDispose?.(); + this.changeStateDispose = this.history.onChangeState(() => { this.updateState(this.history?.getState() || 0); }); }); @@ -54,6 +55,11 @@ class UndoRedo extends PureComponent { this.history.forward(); }; + componentWillUnmount() { + this.changeDocumentDispose?.(); + this.changeStateDispose?.(); + } + render(): React.ReactNode { const { undoEnable, redoEnable } = this.state; return ( @@ -83,7 +89,7 @@ class UndoRedo extends PureComponent { } } -const plugin = (ctx: ILowCodePluginContext) => { +const plugin = (ctx: IPublicModelPluginContext) => { return { // 插件名，注册环境下唯一 name: 'PluginUndoRedo', diff --git a/packages/plugin-view-manager-pane/CHANGELOG.md b/packages/plugin-view-manager-pane/CHANGELOG.md new file mode 100644 index 0000000..061fdae --- /dev/null +++ b/packages/plugin-view-manager-pane/CHANGELOG.md @@ -0,0 +1,3 @@ +## 1.0.0 / 2022-02-16 + +* publish stable version diff --git a/packages/plugin-view-manager-pane/README.md b/packages/plugin-view-manager-pane/README.md new file mode 100644 index 0000000..1a0c312 --- /dev/null +++ b/packages/plugin-view-manager-pane/README.md @@ -0,0 +1,25 @@ +# @alilc/plugin-view-manager-pane [![][npm-image]][npm-url] + +--- + +## 使用 + +### 注册插件 +```jsx +import { plugins } from '@alilc/lowcode-engine'; +import PluginUndoRedo from '@alilc/plugin-view-manager-pane'; + +// 注册到引擎 +plugins.register(PluginUndoRedo); +``` + +### 插件属性 & 方法 + +无对外暴露的属性和方法 + +### 依赖插件 + +该插件依赖以下插件： + +| 插件名 | 包名 | +| --- | --- | diff --git a/packages/plugin-view-manager-pane/build.json b/packages/plugin-view-manager-pane/build.json new file mode 100644 index 0000000..4b3794a --- /dev/null +++ b/packages/plugin-view-manager-pane/build.json @@ -0,0 +1,20 @@ +{ + "plugins": [ + [ + "@alilc/build-plugin-alt", + { + "type": "plugin", + "inject": true + } + ], + [ + "build-plugin-fusion", + { + "themePackage": "@alifd/theme-lowcode-light" + } + ], + ["build-plugin-moment-locales", { + "locales": ["zh-cn"] + }] + ] +} diff --git a/packages/plugin-view-manager-pane/package.json b/packages/plugin-view-manager-pane/package.json new file mode 100644 index 0000000..5c7b92c --- /dev/null +++ b/packages/plugin-view-manager-pane/package.json @@ -0,0 +1,46 @@ +{ + "name": "@alilc/lowcode-plugin-view-manager-pane", + "version": "2.0.1", + "description": "alibaba lowcode editor undo redo plugin", + "files": [ + "es", + "lib" + ], + "main": "lib/index.js", + "module": "es/index.js", + "scripts": { + "start": "build-scripts start", + "build": "build-scripts build", + "prepublishOnly": "npm run build" + }, + "keywords": [ + "lowcode", + "editor" + ], + "dependencies": { + "@alilc/lowcode-types": "^1.3.0", + "@alilc/lowcode-utils": "^1.0.0", + "react": "^16.8.1", + "react-dom": "^16.8.1" + }, + "devDependencies": { + "@alib/build-scripts": "^0.1.3", + "@alilc/build-plugin-alt": "^1.0.1", + "@alilc/lowcode-engine": "^1.0.0", + "@babel/plugin-proposal-private-property-in-object": "^7.21.11", + "@types/react": "^16.9.13", + "@types/react-dom": "^16.9.4", + "build-plugin-fusion": "^0.1.22", + "webpack": "^5.64.4", + "build-plugin-moment-locales": "^0.1.0" + }, + "publishConfig": { + "registry": "https://registry.npmjs.org/", + "access": "public" + }, + "repository": { + "type": "git", + "url": "https://github.com/alibaba/lowcode-plugins.git", + "directory": "packages/plugin-view-manager-pane" + } +} diff --git a/packages/plugin-view-manager-pane/src/components/addFile/behaviors.tsx b/packages/plugin-view-manager-pane/src/components/addFile/behaviors.tsx new file mode 100644 index 0000000..a1bda9c --- /dev/null +++ b/packages/plugin-view-manager-pane/src/components/addFile/behaviors.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { IPublicModelPluginContext, IPublicModelResource } from '@alilc/lowcode-types'; +import { OthersIcon } from '../resourceTree/icon'; +import { IOptions } from '../..'; + +export function Behaviors(props: { + pluginContext: IPublicModelPluginContext; + resource: IPublicModelResource; + options: IOptions; + safeNode: any; +}) { + const menus = (props.options?.resourceContextMenuActions?.(props.pluginContext, props.resource) || []).filter(d => !d.condition || d.condition && d.condition()); + const ContextMenu = props.pluginContext.commonUI?.ContextMenu || React.Fragment; + + if (!menus.length) { + return null; + } + + return ( +
{ + e.stopPropagation(); + e.preventDefault(); + ContextMenu.create(menus, e); + }} + > + +
+ ); +} diff --git a/packages/plugin-view-manager-pane/src/components/addFile/index.scss b/packages/plugin-view-manager-pane/src/components/addFile/index.scss new file mode 100644 index 0000000..e6621c3 --- /dev/null +++ b/packages/plugin-view-manager-pane/src/components/addFile/index.scss @@ -0,0 +1,18 @@ +.next-overlay-wrapper .next-overlay-inner.view-pane-popup { + padding: 6px 0; + background: var(--color-pane-background, #fff); + box-shadow: 0 0 6px 0 var(--color-layer-mask-background, rgba(0,0,0,0.44)); + border-radius: 2px; + + &::after { + display: none; + } +} + +.add-file-icon-wrap { + cursor: pointer; + color: var(--color-title); + width: 16px; + height: 16px; + margin-left: 8px; +} diff --git a/packages/plugin-view-manager-pane/src/components/addFile/index.tsx b/packages/plugin-view-manager-pane/src/components/addFile/index.tsx new file mode 100644 index 0000000..165e664 --- /dev/null +++ b/packages/plugin-view-manager-pane/src/components/addFile/index.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +import { observer } from 'mobx-react'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; +import { AddIcon } from '../../icon'; +import { IOptions } from '../..'; +import './index.scss'; + +function AddFileComponent(props: { options: IOptions, pluginContext: IPublicModelPluginContext }) { + if (props.options?.renderAddFileComponent && typeof props.options.renderAddFileComponent === 'function') { + return props.options.renderAddFileComponent(); + } + + const menus = props.options?.contextMenuActions?.(props.pluginContext); + + if (!menus || !menus.length) { + return null; + } + + const ContextMenu = props.pluginContext?.commonUI?.ContextMenu || React.Fragment; + + return ( + { + ContextMenu.create(menus, e) + }} className='add-file-icon-wrap'> + + + ) +} + +export const AddFile = observer(AddFileComponent); diff --git a/packages/plugin-view-manager-pane/src/components/resourceTree/icon.tsx b/packages/plugin-view-manager-pane/src/components/resourceTree/icon.tsx new file mode 100644 index 0000000..35b9d38 --- /dev/null +++ b/packages/plugin-view-manager-pane/src/components/resourceTree/icon.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import { SVGIcon, IconProps } from '@alilc/lowcode-utils'; + +export const FileIcon = () => { + return ( + + + + + + + + + + + + + + ) +} + +export const OthersIcon = () => { + return ( + + + + + + + + + + + + + ) +} + +export function IconArrowRight(props: IconProps) { + return ( + + + + ); +} + +IconArrowRight.displayName = 'IconArrowRight'; diff --git a/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss b/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss new file mode 100644 index 0000000..ad7da44 --- /dev/null +++ b/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss @@ -0,0 +1,168 @@ +.resource-tree { + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 48px; + overflow-y: scroll; + + &-children { + padding-left: 24px; + } + + &-group { + fill: var(--color-brand, #5894ff); + padding-left: 12px; + } + + &-filter { + display: flex; + margin-bottom: 13px; + align-items: center; + } + + &-group-wrap { + display: flex; + align-items: center; + height: 30px; + cursor: pointer; + + &:hover { + background-color: var(--color-block-background-light, #f7f8fa); + } + } + + &-expand { + width: 10px; + line-height: 0; + align-self: stretch; + display: flex; + align-items: center; + transition: color 200ms ease; + margin-right: 4px; + color: var(--color-icon-hover, #5f697a); + cursor: pointer; + + &.expanded > svg { + transform: rotate(0) + } + + & > svg { + transform: rotate(-90deg); + transform-origin: center; + transition: transform 100ms ease; + } + } + + &-group-title { + margin-left: 5px; + color: var(--color-title, #5f697a); + font-size: 12px; + } + + &-group-icon { + position: relative; + top: 1px; + color: var(--color-brand); + } + + &-group-items { + fill: var(--color-text, #5f697a); + padding-left: 28px; + } + + &-group-node { + position: relative; + padding: 2px 0 2px 0; + font-size: 12px; + color: var(--color-title, #5f697a); + + &.active .resource-tree-title { + background-color: var(--color-block-background-light, #f7f8fa); + } + } + + &-group-item-modified { + background-color: var(--color-function-error, #e43823); + width: 5px; + height: 5px; + border-radius: 50%; + position: absolute; + left: -11px; + } + + &-group-item-modified-wrap { + display: flex; + width: 10px; + height: 24px; + align-items: center; + cursor: pointer; + width: 0px; + position: relative; + } + + &-group-title-label { + max-width: calc(100% - 44px); + word-break: break-all; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &-group-item-code { + color: var(--color-text-disabled, #8f9aa9); + margin-left: 6px; + // display: none; + max-width: 70px; + word-break: break-all; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &-group-item-icon { + height: auto; + width: 12px; + margin-right: 4px; + display: flex; + align-items: center; + + svg { + width: 100%; + } + } + + &-group-item-behaviors { + position: absolute; + right: 0; + display: none; + + &-trigger { + height: 24px; + padding: 5px 8px; + } + } + + &-group-disabled { + .resource-tree-title { + opacity: 0.4; + cursor: not-allowed; + } + } + + &-title { + height: 24px; + display: flex; + align-items: center; + cursor: pointer; + position: relative; + + &:hover { + background-color: var(--color-block-background-light, #f7f8fa); + + .resource-tree-group-item-behaviors { + display: flex; + } + } + } +} diff --git a/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx b/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx new file mode 100644 index 0000000..b3f9e95 --- /dev/null +++ b/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx @@ -0,0 +1,366 @@ +import { workspace } from '@alilc/lowcode-engine'; +import { + IPublicModelPluginContext, + IPublicModelResource, +} from '@alilc/lowcode-types'; +import { Search, Balloon } from '@alifd/next'; +import React, { useCallback, useState, useEffect, useRef } from 'react'; +import { FileIcon, IconArrowRight } from './icon'; +import './index.scss'; +import { IOptions } from '../..'; +import { intl } from '../../locale'; +import { AddFile } from '../addFile'; + +function filterResourceList(resourceList: IPublicModelResource[] | undefined, handler?: Function) { + if (typeof handler === 'function') { + return handler(resourceList); + } + + return resourceList; +} + +export function ResourcePaneContent(props: IPluginOptions) { + const { workspace } = props.pluginContext || {}; + const [resourceList, setResourceList] = useState( + filterResourceList(workspace?.resourceList, props?.options?.filterResourceList) + ); + workspace?.onResourceListChange(() => { + setResourceList(filterResourceList(workspace?.resourceList, props?.options?.filterResourceList)); + }); + return ( + + ); +} + +function ResourceListTree( + props: { + resourceList?: IPublicModelResource[]; + } & IPluginOptions +) { + const [category, setCategory] = useState<{ + [key: string]: IPublicModelResource[]; + }>({}); + const [filterValue, setFilterValue] = useState(); + const [activeId, setActiveId] = useState( + props.pluginContext?.workspace.window?.resource?.id + '' + ); + useEffect(() => { + let category: { + [key: string]: any; + } = {}; + props.resourceList?.forEach((d) => { + category[d.category!] = category[d.category!] || []; + category[d.category!].push(d); + }); + setCategory(category); + }, [props.resourceList]); + const handleSearchChange = useCallback((key) => { + setFilterValue(key); + }, []); + workspace.onChangeActiveWindow(() => { + setActiveId(workspace.window?.resource?.id + ''); + }); + return ( + <> +
+ + +
+
+ {Array.from(Object.entries(category)).map( + ([categoryName, resourceArr]) => { + return ( + + ); + } + )} +
+ + ); +} + +function ResourceGroup( + props: { + activeId?: string; + categoryName: string; + resourceArr: IPublicModelResource[]; + filterValue?: string; + depth: number; + } & IPluginOptions +) { + const [expanded, setExpanded] = useState( + props.defaultExpandAll || + props.defaultExpandedCategoryKeys?.includes(props.categoryName) + ); + const resourceArr = props.resourceArr.filter( + (d) => + !props.filterValue || + [d.options.title, d.options.slug, d.options.componentName].some( + (d) => d && d.toLowerCase().includes(props.filterValue?.toLowerCase()) + ) + ); + + if (!resourceArr || !resourceArr.length) { + return null; + } + + if (!props.categoryName || props.categoryName === 'undefined') { + return ( +
+ {resourceArr.map((d) => ( + + ))} +
+ ); + } + + const ContextMenu = props.pluginContext?.commonUI?.ContextMenu || React.Fragment; + const indent = props.depth * 28 + 12; + + const style = { + paddingLeft: indent, + marginLeft: -indent, + } + + return ( +
+ +
{ + setExpanded(!expanded); + }} + > +
+ +
+
+ +
+
{props.categoryName}
+
+ + {expanded && ( +
+ {resourceArr.map((d) => ( + + ))} +
+ )} +
+ ); +} + +function ResourceItem(props: { + resource?: IPublicModelResource; + icon?: any; + children?: IPublicModelResource[]; + activeId?: string; + behaviors?: any; + options?: IOptions; + pluginContext?: IPublicModelPluginContext; + depth: number; +}) { + const [expanded, setExpanded] = useState(false); + const ref = useRef(null); + const PropsIcon = props.icon; + const Behaviors = props.behaviors; + const display = (props.resource?.config as any)?.display ?? true; + + const indent = props.depth * 28 + 12; + const style = { + paddingLeft: indent, + marginLeft: -indent, + } + if (!display) { + return null; + } + + const children = props.children?.filter(d => d.config?.display !== false); + const { + disabled, + tips, + } = props.resource?.config || {}; + const ContextMenu = props.pluginContext?.commonUI?.ContextMenu || React.Fragment; + + const context = ( + +
+
{ + if (disabled) { + return; + } + props.resource && props.pluginContext?.workspace.openEditorWindow(props.resource); + }} + className="resource-tree-title" + style={style} + > + {props.resource?.options.modified ? ( +
} + triggerType="hover" + align='bl' + title="" + > + {props.resource.options.modifiedTips} + + ) : null} + + {((children && children.length) || null) && ( +
{ + setExpanded(!expanded); + e.stopPropagation(); + e.preventDefault(); + }} + > + +
+ )} + +
+ {PropsIcon && } +
+
+ {props.resource?.options?.label || props.resource?.title} + + { + props.resource?.options?.slug || + props.resource?.options?.componentName ? ( + + ({ props.resource.options?.slug || props.resource.options?.componentName }) + + ) : null + } +
+ + +
+ {Behaviors && + (props.resource?.config as any)?.disableBehaviors !== true ? ( + + ) : null} +
+
+ + { + expanded && children?.length ? ( +
+ { + props.children?.map((child) => ( + + )) + } +
+ ) : null + } +
+ + ); + + if (tips) { + return ( + { context }
} + triggerType="hover" + align='r' + title="" + > + {tips} + + ); + } + + return context; +} + +interface IPluginOptions { + defaultExpandedCategoryKeys?: string[]; + defaultExpandAll?: boolean; + pluginContext: IPublicModelPluginContext; + behaviors?: any; + options: IOptions; +} diff --git a/packages/plugin-view-manager-pane/src/icon.tsx b/packages/plugin-view-manager-pane/src/icon.tsx new file mode 100644 index 0000000..f287eae --- /dev/null +++ b/packages/plugin-view-manager-pane/src/icon.tsx @@ -0,0 +1,60 @@ +import * as React from 'react'; +import { SVGIcon, IconProps } from '@alilc/lowcode-utils'; +import { intl } from './locale'; + +export default function Icon(props: { + showIconText: boolean; +}) { + return ( +
+
+ + + + + + + + + + +
+
+ { + props.showIconText ? {intl('view_manager.src.icon.View')} : null + } +
+
+ ); +} + +export function IconArrowRight(props: IconProps) { + return ( + + + + ); +} + +export const AddIcon = () => { + return ( + + + + + + + + + + + ); +}; + +IconArrowRight.displayName = 'IconArrowRight'; diff --git a/packages/plugin-view-manager-pane/src/index.scss b/packages/plugin-view-manager-pane/src/index.scss new file mode 100644 index 0000000..268ea12 --- /dev/null +++ b/packages/plugin-view-manager-pane/src/index.scss @@ -0,0 +1,22 @@ +.workspace-view-pane { + font-size: 14px; + position: relative; + height: 100%; + + &-content { + padding: 11px; + background: var(--color-pane-background, #fff); + height: 100%; + position: relative; + } + + &-icon { + text-align: center; + font-size: 14px; + + &.show-icon-text { + height: 60px !important; + margin-bottom: 10px; + } + } +} diff --git a/packages/plugin-view-manager-pane/src/index.tsx b/packages/plugin-view-manager-pane/src/index.tsx new file mode 100644 index 0000000..c1541f0 --- /dev/null +++ b/packages/plugin-view-manager-pane/src/index.tsx @@ -0,0 +1,144 @@ +import * as React from 'react'; +import { + IPublicModelPluginContext, + IPublicModelResource, + IPublicTypeSkeletonConfig, + IPublicTypeContextMenuAction, +} from '@alilc/lowcode-types'; +import Icon from './icon'; +import { Pane } from './pane'; +import './index.scss'; +import { intl } from './locale'; + +export interface IOptions { + init?: (ctx: IPublicModelPluginContext) => {}; + + renderAddFileComponent?: () => React.JSX.Element; + + handleClose?: (force?: boolean) => void; + + filterResourceList?: () => {}; + + showIconText?: boolean; + + skeletonConfig?: IPublicTypeSkeletonConfig; + + /** + * 右键菜单项 + */ + contextMenuActions?: (ctx: IPublicModelPluginContext) => IPublicTypeContextMenuAction[]; + + /** + * 右键资源项，菜单项 + */ + resourceContextMenuActions?: (ctx: IPublicModelPluginContext, resource: IPublicModelResource) => IPublicTypeContextMenuAction[]; + + /** + * 右键资源组，菜单项 + */ + resourceGroupContextMenuActions?: (ctx: IPublicModelPluginContext, resources: IPublicModelResource[]) => IPublicTypeContextMenuAction[]; +} + +const ViewManagerPane = ( + ctx: IPublicModelPluginContext, + options: IOptions = {} +) => { + return { + // 插件的初始化函数，在引擎初始化之后会立刻调用 + async init() { + const showIconText = options.showIconText ?? true; + // 往引擎增加面板 + ctx.skeleton.add({ + area: 'leftArea', + name: 'ViewManagerPane', + props: { + icon: , + description: intl('view_manager.src.ViewManagement'), + className: `workspace-view-pane-icon ${showIconText ? 'show-icon-text' : null }`, + }, + panelProps: { + width: '200px', + }, + content: Pane, + contentProps: { + options: { + handleClose: () => { + ctx.skeleton.hidePanel('ViewManagerPane'); + }, + ...options, + }, + pluginContext: ctx, + }, + ...(options.skeletonConfig || {}), + type: options.skeletonConfig?.type || 'PanelDock', + }); + }, + }; +}; + +// 插件名，注册环境下唯一 +ViewManagerPane.pluginName = 'ViewManagerPane'; +ViewManagerPane.meta = { + // 依赖的插件（插件名数组） + dependencies: [], + engines: { + lowcodeEngine: '^1.3.0', // 插件需要配合 ^1.0.0 的引擎才可运行 + }, + preferenceDeclaration: { + title: intl('view_manager.src.ViewManagementPanelPlugIn'), + properties: [ + { + key: 'init', + type: 'function', + description: '', + }, + { + key: 'handleClose', + type: 'function', + description: '', + }, + { + key: 'showIconText', + type: 'boolean', + description: '', + }, + { + key: 'skeletonConfig', + type: 'object', + description: '', + }, + { + key: 'contextMenuActions', + type: 'function', + description: '右键菜单项', + }, + { + key: 'resourceContextMenuActions', + type: 'function', + description: '右键资源项，菜单项', + }, + { + key: 'resourceGroupContextMenuActions', + type: 'function', + description: '右键资源组，菜单项', + }, + { + key: 'filterResourceList', + type: 'function', + description: '', + }, + { + key: 'showIconText', + type: 'boolean', + description: '', + }, + { + key: 'skeletonConfig', + type: 'object', + description: '', + } + ], + }, +}; + +export default ViewManagerPane; diff --git a/packages/plugin-view-manager-pane/src/locale/en-US.json b/packages/plugin-view-manager-pane/src/locale/en-US.json new file mode 100644 index 0000000..723c80e --- /dev/null +++ b/packages/plugin-view-manager-pane/src/locale/en-US.json @@ -0,0 +1,16 @@ +{ + "view_manager.components.addFile.behaviors.DescriptionSettings": "{description} settings", + "view_manager.components.addFile.behaviors.CopyDescription": "Copy {description}", + "view_manager.components.addFile.behaviors.DeleteDescription": "Delete {description}", + "view_manager.components.addFile.CreatePage": "Create page", + "view_manager.components.addFile.CreateAComponent": "Create component", + "view_manager.components.resourceTree.SearchPagesAndComponents": "Search pages and components", + "view_manager.components.resourceTree.Page": "page", + "view_manager.components.resourceTree.CreateItem": "Create {categoryName}", + "view_manager.components.resourceTree.Component": "component", + "view_manager.components.resourceTree.SourceCode": "(Source code)", + "view_manager.src.icon.View": "View", + "view_manager.src.ViewManagement": "View", + "view_manager.src.ViewManagementPanelPlugIn": "View management panel plug-in parameter definition", + "view_manager.src.pane.View": "View" +} diff --git a/packages/plugin-view-manager-pane/src/locale/index.ts b/packages/plugin-view-manager-pane/src/locale/index.ts new file mode 100644 index 0000000..42dc9f1 --- /dev/null +++ b/packages/plugin-view-manager-pane/src/locale/index.ts @@ -0,0 +1,14 @@ +import { common } from '@alilc/lowcode-engine'; +import enUS from './en-US.json'; +import zhCN from './zh-CN.json'; + +const { intl } = common?.utils?.createIntl?.({ + 'en-US': enUS, + 'zh-CN': zhCN, +}) || { + intl: (id) => { + return zhCN[id]; + } +}; + +export { intl }; diff --git a/packages/plugin-view-manager-pane/src/locale/zh-CN.json b/packages/plugin-view-manager-pane/src/locale/zh-CN.json new file mode 100644 index 0000000..d972638 --- /dev/null +++ b/packages/plugin-view-manager-pane/src/locale/zh-CN.json @@ -0,0 +1,16 @@ +{ + "view_manager.components.addFile.behaviors.DescriptionSettings": "{description}设置", + "view_manager.components.addFile.behaviors.CopyDescription": "复制{description}", + "view_manager.components.addFile.behaviors.DeleteDescription": "删除{description}", + "view_manager.components.addFile.CreatePage": "新建页面", + "view_manager.components.addFile.CreateAComponent": "新建组件", + "view_manager.components.resourceTree.SearchPagesAndComponents": "搜索页面、组件", + "view_manager.components.resourceTree.Page": "页面", + "view_manager.components.resourceTree.CreateItem": "新建{categoryName}", + "view_manager.components.resourceTree.Component": "组件", + "view_manager.components.resourceTree.SourceCode": "（源码）", + "view_manager.src.icon.View": "视图", + "view_manager.src.ViewManagement": "资源", + "view_manager.src.ViewManagementPanelPlugIn": "视图管理面板插件参数定义", + "view_manager.src.pane.View": "视图" +} diff --git a/packages/plugin-view-manager-pane/src/pane.tsx b/packages/plugin-view-manager-pane/src/pane.tsx new file mode 100644 index 0000000..05eca45 --- /dev/null +++ b/packages/plugin-view-manager-pane/src/pane.tsx @@ -0,0 +1,40 @@ +import * as React from 'react'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; +import { ResourcePaneContent } from './components/resourceTree'; +import { Behaviors } from './components/addFile/behaviors'; +import { IOptions } from '.'; + +export function Pane(props: { + pluginContext: IPublicModelPluginContext; + options: IOptions; +}) { + React.useEffect(() => { + props.options?.init?.(props.pluginContext); + }, []); + + const ContextMenu = props.pluginContext.commonUI?.ContextMenu || React.Fragment; + + return ( + +
+
{ + e.stopPropagation(); + }} + > + { + return ; + }} + options={props.options} + /> +
+
+ + ); +} diff --git a/packages/plugin-view-manager-pane/tsconfig.json b/packages/plugin-view-manager-pane/tsconfig.json new file mode 100644 index 0000000..c37b76e --- /dev/null +++ b/packages/plugin-view-manager-pane/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "lib" + }, + "include": [ + "./src/" + ] +} diff --git a/packages/plugin-zh-en/package.json b/packages/plugin-zh-en/package.json index dcde3fe..3ca6002 100644 --- a/packages/plugin-zh-en/package.json +++ b/packages/plugin-zh-en/package.json @@ -28,6 +28,7 @@ "build-plugin-fusion": "^0.1.22" }, "publishConfig": { + "registry": "https://registry.npmjs.org/", "access": "public" }, "repository": { diff --git a/packages/plugin-zh-en/src/index.tsx b/packages/plugin-zh-en/src/index.tsx index cd54be0..035e423 100644 --- a/packages/plugin-zh-en/src/index.tsx +++ b/packages/plugin-zh-en/src/index.tsx @@ -1,6 +1,6 @@ import { PureComponent } from 'react'; -import { ILowCodePluginContext, common } from '@alilc/lowcode-engine'; -import { PluginProps } from '@alilc/lowcode-types'; +import { common } from '@alilc/lowcode-engine'; +import { IPublicModelPluginContext, PluginProps } from '@alilc/lowcode-types'; import { intl } from './locale'; import { IconZh } from './icons/zh'; import { IconEn } from './icons/en'; @@ -43,7 +43,7 @@ class ZhEn extends PureComponent { } } -const plugin = (ctx: ILowCodePluginContext) => { +const plugin = (ctx: IPublicModelPluginContext) => { return { // 插件名，注册环境下唯一 name: 'PluginZhEn',