From 4ff51127998d46a78442e95f453ec02592880363 Mon Sep 17 00:00:00 2001 From: rongrongt <469230393@qq.com> Date: Tue, 4 Apr 2023 11:39:59 +0800 Subject: [PATCH 01/83] Update DataSourcePane.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 解决了datasource面板没有根据当前正在使用的schema中的datasource数据回显问题：https://github.com/alibaba/lowcode-engine/issues/1837 --- packages/plugin-datasource-pane/src/pane/DataSourcePane.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) 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?.(); } From 072d6b77328d38e561f7cd4fcda20ea89ea6bcc9 Mon Sep 17 00:00:00 2001 From: silinchen Date: Tue, 4 Apr 2023 14:42:49 +0800 Subject: [PATCH 02/83] fix: fix plugin datasource pane update when type changed (#65) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 切换新建数据源时，类型不刷新 --- .../src/components/DataSourceForm/DataSourceForm.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) 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 Date: Fri, 14 Apr 2023 10:59:05 +0800 Subject: [PATCH 03/83] fix(plugin-code-editor): change to use skeleton.onShowPanel and skeleton.onHidePanel --- packages/plugin-code-editor/src/pane/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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?.(); } From 151449c5bb6dffd96b9bafb6db73c6f959e1cfb4 Mon Sep 17 00:00:00 2001 From: eightHundreds Date: Wed, 12 Apr 2023 20:52:41 +0800 Subject: [PATCH 04/83] feat: add overrideServices props --- packages/base-monaco-editor/src/helper.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) 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 }); } From 46a69bb0687d1173ca42324bbe736821e6899c36 Mon Sep 17 00:00:00 2001 From: JackLian Date: Fri, 14 Apr 2023 11:07:48 +0800 Subject: [PATCH 05/83] chore(base-monaco-editor): publish 1.1.2 --- packages/base-monaco-editor/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/base-monaco-editor/package.json b/packages/base-monaco-editor/package.json index c6153a3..5a684ff 100644 --- a/packages/base-monaco-editor/package.json +++ b/packages/base-monaco-editor/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-base-monaco-editor", - "version": "1.1.1", + "version": "1.1.2", "description": "代码编辑组件，monaco-editor 的低代码适配封装", "publishConfig": { "access": "public" @@ -62,7 +62,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", From e0698f6a68e1fbe6eae5bfb8f6141ccb8a63b801 Mon Sep 17 00:00:00 2001 From: beautiful-boyyy <66351806+beautiful-boyyy@users.noreply.github.com> Date: Fri, 14 Apr 2023 11:08:20 +0800 Subject: [PATCH 06/83] refactor(plugin-components-pane): move the components-pane plugin initialization to the plugin side (#64) * refactor: move the components-pane plugin initialization to the plugin side --- packages/plugin-components-pane/build.json | 8 + packages/plugin-components-pane/src/index.tsx | 342 ++---------------- .../src/{ => pane}/index.module.scss | 0 .../plugin-components-pane/src/pane/index.tsx | 321 ++++++++++++++++ 4 files changed, 354 insertions(+), 317 deletions(-) rename packages/plugin-components-pane/src/{ => pane}/index.module.scss (100%) create mode 100644 packages/plugin-components-pane/src/pane/index.tsx 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/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..1f9601c --- /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.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).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; From dccd9fc7a275487304c1369a367c20505bcf1619 Mon Sep 17 00:00:00 2001 From: JackLian Date: Fri, 14 Apr 2023 11:10:28 +0800 Subject: [PATCH 07/83] chore(plugin-code-editor): publish 1.0.7 --- packages/plugin-code-editor/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-code-editor/package.json b/packages/plugin-code-editor/package.json index c9814b4..f28ab93 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.7", "description": "CodeEditor", "files": [ "es", From 70c858cc2f7c7ce2a2677775db00aa7cf62ae2ef Mon Sep 17 00:00:00 2001 From: JackLian Date: Fri, 14 Apr 2023 11:15:44 +0800 Subject: [PATCH 08/83] chore(plugin-components-pane): publish 2.0.0 --- packages/plugin-components-pane/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-components-pane/package.json b/packages/plugin-components-pane/package.json index e87ade1..02833b2 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.0", "description": "低代码组件面板", "files": [ "es/", From a7e6c1e8104976aa2e2647fe293f908560804065 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=88=B4=E5=AF=8C=E9=98=B3?= <1140444693@qq.com> Date: Fri, 21 Apr 2023 14:06:39 +0800 Subject: [PATCH 09/83] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E6=BA=90=E6=97=A0=E6=B3=95=E5=AF=BC=E5=85=A5,=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E6=A0=BC=E5=BC=8F=E9=94=99=E8=AF=AF=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98=20(#67)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 修复数据源无法导入,显示格式错误的问题 * 修复无法删除数据处理函数的问题 --- .../DataSourceImportPluginCode.tsx | 36 ++++++++++++++----- .../src/components/Forms/form-lazy-obj.tsx | 10 ++++-- 2 files changed, 36 insertions(+), 10 deletions(-) diff --git a/packages/plugin-datasource-pane/src/components/DataSourceImportPluginCode/DataSourceImportPluginCode.tsx b/packages/plugin-datasource-pane/src/components/DataSourceImportPluginCode/DataSourceImportPluginCode.tsx index 77cc726..52dfa8f 100644 --- a/packages/plugin-datasource-pane/src/components/DataSourceImportPluginCode/DataSourceImportPluginCode.tsx +++ b/packages/plugin-datasource-pane/src/components/DataSourceImportPluginCode/DataSourceImportPluginCode.tsx @@ -3,7 +3,7 @@ * @todo editor 关联 types，并提供详细的出错信息 */ import React, { PureComponent } from 'react'; -import { Button } from '@alifd/next'; +import { Button, Message } from '@alifd/next'; import _noop from 'lodash/noop'; import _isArray from 'lodash/isArray'; import _last from 'lodash/last'; @@ -44,6 +44,20 @@ export class DataSourceImportPluginCode extends PureComponent< isCodeValid: true, }; + /* @author daifuyang + ** @description：修复默认panel ref没有submit方法 + */ + submit = () => { + 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; From 80ec9c25054c2e8bcdf2b1115cdd30bacbd5920c Mon Sep 17 00:00:00 2001 From: JackLian Date: Fri, 21 Apr 2023 14:16:10 +0800 Subject: [PATCH 10/83] chore(datasource-pane): publish 1.0.11 --- packages/plugin-datasource-pane/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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", From c51ae4c4019ca032d199413d9e73359efedca3d4 Mon Sep 17 00:00:00 2001 From: beautiful-boyyy Date: Wed, 10 May 2023 15:32:33 +0800 Subject: [PATCH 11/83] fix: fix english keyword search error --- packages/plugin-components-pane/src/pane/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/plugin-components-pane/src/pane/index.tsx b/packages/plugin-components-pane/src/pane/index.tsx index 1f9601c..1399353 100644 --- a/packages/plugin-components-pane/src/pane/index.tsx +++ b/packages/plugin-components-pane/src/pane/index.tsx @@ -51,7 +51,7 @@ export default class ComponentPane extends React.Component {components.map((component) => { const { componentName, snippets = [] } = component; - return snippets.filter(snippet => snippet.id && this.getKeyToSearch(snippet).includes(keyword)).map(snippet => { + return snippets.filter(snippet => snippet.id && this.getKeyToSearch(snippet).toLowerCase().includes(keyword)).map(snippet => { return ( Date: Fri, 12 May 2023 14:53:20 +0800 Subject: [PATCH 12/83] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=A4=9A?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E7=BC=96=E8=BE=91=E5=99=A8=E6=8F=92=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/plugin-multiple-editor/.npmignore | 1 + packages/plugin-multiple-editor/config/env.js | 105 + .../config/externals.js | 19 + .../config/getHttpsConfig.js | 66 + .../config/jest/babelTransform.js | 29 + .../config/jest/cssTransform.js | 14 + .../config/jest/fileTransform.js | 40 + .../plugin-multiple-editor/config/modules.js | 134 + .../plugin-multiple-editor/config/paths.js | 77 + .../plugin-multiple-editor/config/util.js | 48 + .../config/webpack.config.js | 490 + .../persistentCache/createEnvironmentHash.js | 9 + .../config/webpackDevServer.config.js | 127 + packages/plugin-multiple-editor/package.json | 179 + .../plugin-multiple-editor/public/favicon.ico | Bin 0 -> 3870 bytes .../plugin-multiple-editor/public/index.html | 106 + .../plugin-multiple-editor/public/logo192.png | Bin 0 -> 5347 bytes .../plugin-multiple-editor/public/logo512.png | Bin 0 -> 9664 bytes .../public/manifest.json | 25 + .../plugin-multiple-editor/public/robots.txt | 3 + .../plugin-multiple-editor/scripts/build.js | 195 + .../plugin-multiple-editor/scripts/start.js | 154 + .../plugin-multiple-editor/scripts/test.js | 52 + packages/plugin-multiple-editor/src/App.tsx | 12 + .../plugin-multiple-editor/src/Context.tsx | 169 + .../plugin-multiple-editor/src/Controller.ts | 355 + .../plugin-multiple-editor/src/EditorHook.ts | 32 + .../src/MultipleFileEditor/Editor.tsx | 190 + .../src/MultipleFileEditor/img/delete.svg | 1 + .../src/MultipleFileEditor/img/save.svg | 1 + .../src/MultipleFileEditor/index.less | 46 + .../src/MultipleFileEditor/index.tsx | 5 + .../src/MultipleFileEditor/util.tsx | 132 + .../plugin-multiple-editor/src/Service.ts | 59 + .../FileTree/TreeNode/img/delete.png | Bin 0 -> 340 bytes .../FileTree/TreeNode/img/file-directory.png | Bin 0 -> 310 bytes .../components/FileTree/TreeNode/img/file.png | Bin 0 -> 315 bytes .../components/FileTree/TreeNode/img/menu.png | Bin 0 -> 385 bytes .../components/FileTree/TreeNode/index.less | 108 + .../components/FileTree/TreeNode/index.tsx | 219 + .../src/components/FileTree/img/compile.svg | 7 + .../FileTree/img/fullscreen-exit.svg | 3 + .../components/FileTree/img/fullscreen.svg | 3 + .../src/components/FileTree/img/save.svg | 9 + .../src/components/FileTree/index.less | 24 + .../src/components/FileTree/index.tsx | 181 + .../src/components/MonacoEditor/config.ts | 9 + .../src/components/MonacoEditor/index.css | 5 + .../src/components/MonacoEditor/index.tsx | 139 + .../delete-hidden-transducer/index.ts | 16 + .../dev-config/sample-plugins/logo/index.scss | 11 + .../dev-config/sample-plugins/logo/index.tsx | 18 + .../scenario-switcher/index.tsx | 47 + .../sample-plugins/set-ref-prop/index.tsx | 88 + .../scenarios/basic-antd/assets.json | 94 + .../dev-config/scenarios/basic-antd/index.ts | 45 + .../scenarios/basic-antd/plugin.tsx | 269 + .../scenarios/basic-antd/schema.json | 73 + .../README.md | 3 + .../assets.json | 23622 ++++++++++++++++ .../index.ts | 45 + .../plugin.tsx | 276 + .../schema.json | 73 + .../scenarios/basic-fusion/assets.json | 23601 +++++++++++++++ .../scenarios/basic-fusion/index.ts | 45 + .../scenarios/basic-fusion/plugin.tsx | 273 + .../scenarios/basic-fusion/schema.json | 73 + .../scenarios/custom-initialization/index.tsx | 62 + .../src/dev-config/scenarios/index/index.ts | 45 + .../dev-config/scenarios/next-pro/assets.json | 82 + .../dev-config/scenarios/next-pro/index.ts | 41 + .../dev-config/scenarios/next-pro/plugin.tsx | 271 + .../dev-config/scenarios/next-pro/schema.json | 69 + .../node-extended-actions/assets.json | 23601 +++++++++++++++ .../scenarios/node-extended-actions/index.ts | 46 + .../node-extended-actions/plugin.tsx | 307 + .../node-extended-actions/schema.json | 73 + .../dev-config/setters/behavior-setter.tsx | 35 + .../src/dev-config/setters/custom-setter.tsx | 12 + .../src/dev-config/universal/assets.json | 139 + .../src/dev-config/universal/plugin.tsx | 245 + .../src/dev-config/universal/scenarios.json | 30 + .../src/dev-config/universal/schema.json | 295 + .../src/dev-config/universal/utils.ts | 300 + .../plugin-multiple-editor/src/global.d.ts | 2 + .../plugin-multiple-editor/src/index.dev.less | 4 + .../plugin-multiple-editor/src/index.dev.tsx | 91 + packages/plugin-multiple-editor/src/index.tsx | 80 + .../src/plugins/search-plugin/index.ts | 133 + .../src/plugins/search-plugin/search.ts | 102 + .../src/plugins/search-plugin/util.ts | 27 + .../plugin-multiple-editor/src/types/index.ts | 20 + .../plugin-multiple-editor/src/utils/code.ts | 84 + .../src/utils/codeLint/index.ts | 43 + .../src/utils/constants.ts | 7 + .../plugin-multiple-editor/src/utils/files.ts | 161 + .../src/utils/get-methods.ts | 153 + .../src/utils/ghostBabel.ts | 48 + .../plugin-multiple-editor/src/utils/index.ts | 6 + .../src/utils/monaco.ts | 17 + .../src/utils/multipleFile/Compiler.ts | 78 + .../src/utils/multipleFile/babel/compile.ts | 66 + .../src/utils/multipleFile/babel/index.ts | 3 + .../babel/plugin-transform-import.ts | 45 + .../src/utils/multipleFile/babel/util.ts | 17 + .../src/utils/multipleFile/constants.ts | 62 + .../src/utils/multipleFile/execute.ts | 4 + .../src/utils/multipleFile/index.ts | 3 + .../src/utils/multipleFile/transform.ts | 24 + .../src/utils/multipleFile/types.ts | 1 + .../utils/multipleFile/utils/file-module.ts | 11 + .../src/utils/multipleFile/utils/index.ts | 1 + .../src/utils/transformUMD.ts | 122 + .../src/utils/tsUtils.ts | 16 + .../tests/compile.test.ts | 0 .../tests/files.test.ts | 14 + packages/plugin-multiple-editor/tests/test.js | 99 + .../plugin-multiple-editor/tsconfig-test.json | 13 + packages/plugin-multiple-editor/tsconfig.json | 22 + 119 files changed, 79486 insertions(+) create mode 100644 packages/plugin-multiple-editor/.npmignore create mode 100644 packages/plugin-multiple-editor/config/env.js create mode 100644 packages/plugin-multiple-editor/config/externals.js create mode 100644 packages/plugin-multiple-editor/config/getHttpsConfig.js create mode 100644 packages/plugin-multiple-editor/config/jest/babelTransform.js create mode 100644 packages/plugin-multiple-editor/config/jest/cssTransform.js create mode 100644 packages/plugin-multiple-editor/config/jest/fileTransform.js create mode 100644 packages/plugin-multiple-editor/config/modules.js create mode 100644 packages/plugin-multiple-editor/config/paths.js create mode 100644 packages/plugin-multiple-editor/config/util.js create mode 100644 packages/plugin-multiple-editor/config/webpack.config.js create mode 100644 packages/plugin-multiple-editor/config/webpack/persistentCache/createEnvironmentHash.js create mode 100644 packages/plugin-multiple-editor/config/webpackDevServer.config.js create mode 100644 packages/plugin-multiple-editor/package.json create mode 100644 packages/plugin-multiple-editor/public/favicon.ico create mode 100644 packages/plugin-multiple-editor/public/index.html create mode 100644 packages/plugin-multiple-editor/public/logo192.png create mode 100644 packages/plugin-multiple-editor/public/logo512.png create mode 100644 packages/plugin-multiple-editor/public/manifest.json create mode 100644 packages/plugin-multiple-editor/public/robots.txt create mode 100644 packages/plugin-multiple-editor/scripts/build.js create mode 100644 packages/plugin-multiple-editor/scripts/start.js create mode 100644 packages/plugin-multiple-editor/scripts/test.js create mode 100644 packages/plugin-multiple-editor/src/App.tsx create mode 100644 packages/plugin-multiple-editor/src/Context.tsx create mode 100644 packages/plugin-multiple-editor/src/Controller.ts create mode 100644 packages/plugin-multiple-editor/src/EditorHook.ts create mode 100644 packages/plugin-multiple-editor/src/MultipleFileEditor/Editor.tsx create mode 100644 packages/plugin-multiple-editor/src/MultipleFileEditor/img/delete.svg create mode 100644 packages/plugin-multiple-editor/src/MultipleFileEditor/img/save.svg create mode 100644 packages/plugin-multiple-editor/src/MultipleFileEditor/index.less create mode 100644 packages/plugin-multiple-editor/src/MultipleFileEditor/index.tsx create mode 100644 packages/plugin-multiple-editor/src/MultipleFileEditor/util.tsx create mode 100644 packages/plugin-multiple-editor/src/Service.ts create mode 100644 packages/plugin-multiple-editor/src/components/FileTree/TreeNode/img/delete.png create mode 100644 packages/plugin-multiple-editor/src/components/FileTree/TreeNode/img/file-directory.png create mode 100644 packages/plugin-multiple-editor/src/components/FileTree/TreeNode/img/file.png create mode 100644 packages/plugin-multiple-editor/src/components/FileTree/TreeNode/img/menu.png create mode 100644 packages/plugin-multiple-editor/src/components/FileTree/TreeNode/index.less create mode 100644 packages/plugin-multiple-editor/src/components/FileTree/TreeNode/index.tsx create mode 100644 packages/plugin-multiple-editor/src/components/FileTree/img/compile.svg create mode 100644 packages/plugin-multiple-editor/src/components/FileTree/img/fullscreen-exit.svg create mode 100644 packages/plugin-multiple-editor/src/components/FileTree/img/fullscreen.svg create mode 100644 packages/plugin-multiple-editor/src/components/FileTree/img/save.svg create mode 100644 packages/plugin-multiple-editor/src/components/FileTree/index.less create mode 100644 packages/plugin-multiple-editor/src/components/FileTree/index.tsx create mode 100644 packages/plugin-multiple-editor/src/components/MonacoEditor/config.ts create mode 100644 packages/plugin-multiple-editor/src/components/MonacoEditor/index.css create mode 100644 packages/plugin-multiple-editor/src/components/MonacoEditor/index.tsx create mode 100644 packages/plugin-multiple-editor/src/dev-config/sample-plugins/delete-hidden-transducer/index.ts create mode 100644 packages/plugin-multiple-editor/src/dev-config/sample-plugins/logo/index.scss create mode 100644 packages/plugin-multiple-editor/src/dev-config/sample-plugins/logo/index.tsx create mode 100644 packages/plugin-multiple-editor/src/dev-config/sample-plugins/scenario-switcher/index.tsx create mode 100644 packages/plugin-multiple-editor/src/dev-config/sample-plugins/set-ref-prop/index.tsx create mode 100644 packages/plugin-multiple-editor/src/dev-config/scenarios/basic-antd/assets.json create mode 100644 packages/plugin-multiple-editor/src/dev-config/scenarios/basic-antd/index.ts create mode 100644 packages/plugin-multiple-editor/src/dev-config/scenarios/basic-antd/plugin.tsx create mode 100644 packages/plugin-multiple-editor/src/dev-config/scenarios/basic-antd/schema.json create mode 100644 packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion-with-single-component/README.md create mode 100644 packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion-with-single-component/assets.json create mode 100644 packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion-with-single-component/index.ts create mode 100644 packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion-with-single-component/plugin.tsx create mode 100644 packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion-with-single-component/schema.json create mode 100644 packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion/assets.json create mode 100644 packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion/index.ts create mode 100644 packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion/plugin.tsx create mode 100644 packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion/schema.json create mode 100644 packages/plugin-multiple-editor/src/dev-config/scenarios/custom-initialization/index.tsx create mode 100644 packages/plugin-multiple-editor/src/dev-config/scenarios/index/index.ts create mode 100644 packages/plugin-multiple-editor/src/dev-config/scenarios/next-pro/assets.json create mode 100644 packages/plugin-multiple-editor/src/dev-config/scenarios/next-pro/index.ts create mode 100644 packages/plugin-multiple-editor/src/dev-config/scenarios/next-pro/plugin.tsx create mode 100644 packages/plugin-multiple-editor/src/dev-config/scenarios/next-pro/schema.json create mode 100644 packages/plugin-multiple-editor/src/dev-config/scenarios/node-extended-actions/assets.json create mode 100644 packages/plugin-multiple-editor/src/dev-config/scenarios/node-extended-actions/index.ts create mode 100644 packages/plugin-multiple-editor/src/dev-config/scenarios/node-extended-actions/plugin.tsx create mode 100644 packages/plugin-multiple-editor/src/dev-config/scenarios/node-extended-actions/schema.json create mode 100644 packages/plugin-multiple-editor/src/dev-config/setters/behavior-setter.tsx create mode 100644 packages/plugin-multiple-editor/src/dev-config/setters/custom-setter.tsx create mode 100644 packages/plugin-multiple-editor/src/dev-config/universal/assets.json create mode 100644 packages/plugin-multiple-editor/src/dev-config/universal/plugin.tsx create mode 100644 packages/plugin-multiple-editor/src/dev-config/universal/scenarios.json create mode 100644 packages/plugin-multiple-editor/src/dev-config/universal/schema.json create mode 100644 packages/plugin-multiple-editor/src/dev-config/universal/utils.ts create mode 100644 packages/plugin-multiple-editor/src/global.d.ts create mode 100644 packages/plugin-multiple-editor/src/index.dev.less create mode 100644 packages/plugin-multiple-editor/src/index.dev.tsx create mode 100644 packages/plugin-multiple-editor/src/index.tsx create mode 100644 packages/plugin-multiple-editor/src/plugins/search-plugin/index.ts create mode 100644 packages/plugin-multiple-editor/src/plugins/search-plugin/search.ts create mode 100644 packages/plugin-multiple-editor/src/plugins/search-plugin/util.ts create mode 100644 packages/plugin-multiple-editor/src/types/index.ts create mode 100644 packages/plugin-multiple-editor/src/utils/code.ts create mode 100644 packages/plugin-multiple-editor/src/utils/codeLint/index.ts create mode 100644 packages/plugin-multiple-editor/src/utils/constants.ts create mode 100644 packages/plugin-multiple-editor/src/utils/files.ts create mode 100644 packages/plugin-multiple-editor/src/utils/get-methods.ts create mode 100644 packages/plugin-multiple-editor/src/utils/ghostBabel.ts create mode 100644 packages/plugin-multiple-editor/src/utils/index.ts create mode 100644 packages/plugin-multiple-editor/src/utils/monaco.ts create mode 100644 packages/plugin-multiple-editor/src/utils/multipleFile/Compiler.ts create mode 100644 packages/plugin-multiple-editor/src/utils/multipleFile/babel/compile.ts create mode 100644 packages/plugin-multiple-editor/src/utils/multipleFile/babel/index.ts create mode 100644 packages/plugin-multiple-editor/src/utils/multipleFile/babel/plugin-transform-import.ts create mode 100644 packages/plugin-multiple-editor/src/utils/multipleFile/babel/util.ts create mode 100644 packages/plugin-multiple-editor/src/utils/multipleFile/constants.ts create mode 100644 packages/plugin-multiple-editor/src/utils/multipleFile/execute.ts create mode 100644 packages/plugin-multiple-editor/src/utils/multipleFile/index.ts create mode 100644 packages/plugin-multiple-editor/src/utils/multipleFile/transform.ts create mode 100644 packages/plugin-multiple-editor/src/utils/multipleFile/types.ts create mode 100644 packages/plugin-multiple-editor/src/utils/multipleFile/utils/file-module.ts create mode 100644 packages/plugin-multiple-editor/src/utils/multipleFile/utils/index.ts create mode 100644 packages/plugin-multiple-editor/src/utils/transformUMD.ts create mode 100644 packages/plugin-multiple-editor/src/utils/tsUtils.ts create mode 100644 packages/plugin-multiple-editor/tests/compile.test.ts create mode 100644 packages/plugin-multiple-editor/tests/files.test.ts create mode 100644 packages/plugin-multiple-editor/tests/test.js create mode 100644 packages/plugin-multiple-editor/tsconfig-test.json create mode 100644 packages/plugin-multiple-editor/tsconfig.json 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/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 0000000000000000000000000000000000000000..fc44b0a3796c0e0a64c3d858ca038bd4570465d9 GIT binary patch literal 5347 zcmZWtbyO6NvR-oO24RV%BvuJ&=?+<7=`LvyB&A_#M7mSDYw1v6DJkiYl9XjT!%$dLEBTQ8R9|wd3008in6lFF3GV-6mLi?MoP_y~}QUnaDCHI#t z7w^m$@6DI)|C8_jrT?q=f8D?0AM?L)Z}xAo^e^W>t$*Y0KlT5=@bBjT9kxb%-KNdk zeOS1tKO#ChhG7%{ApNBzE2ZVNcxbrin#E1TiAw#BlUhXllzhN$qWez5l;h+t^q#Eav8PhR2|T}y5kkflaK`ba-eoE+Z2q@o6P$)=&` z+(8}+-McnNO>e#$Rr{32ngsZIAX>GH??tqgwUuUz6kjns|LjsB37zUEWd|(&O!)DY zQLrq%Y>)Y8G`yYbYCx&aVHi@-vZ3|ebG!f$sTQqMgi0hWRJ^Wc+Ibv!udh_r%2|U) zPi|E^PK?UE!>_4`f`1k4hqqj_$+d!EB_#IYt;f9)fBOumGNyglU(ofY`yHq4Y?B%- zp&G!MRY<~ajTgIHErMe(Z8JG*;D-PJhd@RX@QatggM7+G(Lz8eZ;73)72Hfx5KDOE zkT(m}i2;@X2AT5fW?qVp?@WgN$aT+f_6eo?IsLh;jscNRp|8H}Z9p_UBO^SJXpZew zEK8fz|0Th%(Wr|KZBGTM4yxkA5CFdAj8=QSrT$fKW#tweUFqr0TZ9D~a5lF{)%-tTGMK^2tz(y2v$i%V8XAxIywrZCp=)83p(zIk6@S5AWl|Oa2hF`~~^W zI;KeOSkw1O#TiQ8;U7OPXjZM|KrnN}9arP)m0v$c|L)lF`j_rpG(zW1Qjv$=^|p*f z>)Na{D&>n`jOWMwB^TM}slgTEcjxTlUby89j1)|6ydRfWERn3|7Zd2&e7?!K&5G$x z`5U3uFtn4~SZq|LjFVrz$3iln-+ucY4q$BC{CSm7Xe5c1J<=%Oagztj{ifpaZk_bQ z9Sb-LaQMKp-qJA*bP6DzgE3`}*i1o3GKmo2pn@dj0;He}F=BgINo};6gQF8!n0ULZ zL>kC0nPSFzlcB7p41doao2F7%6IUTi_+!L`MM4o*#Y#0v~WiO8uSeAUNp=vA2KaR&=jNR2iVwG>7t%sG2x_~yXzY)7K& zk3p+O0AFZ1eu^T3s};B%6TpJ6h-Y%B^*zT&SN7C=N;g|#dGIVMSOru3iv^SvO>h4M=t-N1GSLLDqVTcgurco6)3&XpU!FP6Hlrmj}f$ zp95;b)>M~`kxuZF3r~a!rMf4|&1=uMG$;h^g=Kl;H&Np-(pFT9FF@++MMEx3RBsK?AU0fPk-#mdR)Wdkj)`>ZMl#^<80kM87VvsI3r_c@_vX=fdQ`_9-d(xiI z4K;1y1TiPj_RPh*SpDI7U~^QQ?%0&!$Sh#?x_@;ag)P}ZkAik{_WPB4rHyW#%>|Gs zdbhyt=qQPA7`?h2_8T;-E6HI#im9K>au*(j4;kzwMSLgo6u*}-K`$_Gzgu&XE)udQ zmQ72^eZd|vzI)~!20JV-v-T|<4@7ruqrj|o4=JJPlybwMg;M$Ud7>h6g()CT@wXm` zbq=A(t;RJ^{Xxi*Ff~!|3!-l_PS{AyNAU~t{h;(N(PXMEf^R(B+ZVX3 z8y0;0A8hJYp@g+c*`>eTA|3Tgv9U8#BDTO9@a@gVMDxr(fVaEqL1tl?md{v^j8aUv zm&%PX4^|rX|?E4^CkplWWNv*OKM>DxPa z!RJ)U^0-WJMi)Ksc!^ixOtw^egoAZZ2Cg;X7(5xZG7yL_;UJ#yp*ZD-;I^Z9qkP`} zwCTs0*%rIVF1sgLervtnUo&brwz?6?PXRuOCS*JI-WL6GKy7-~yi0giTEMmDs_-UX zo=+nFrW_EfTg>oY72_4Z0*uG>MnXP=c0VpT&*|rvv1iStW;*^={rP1y?Hv+6R6bxFMkxpWkJ>m7Ba{>zc_q zEefC3jsXdyS5??Mz7IET$Kft|EMNJIv7Ny8ZOcKnzf`K5Cd)&`-fTY#W&jnV0l2vt z?Gqhic}l}mCv1yUEy$%DP}4AN;36$=7aNI^*AzV(eYGeJ(Px-j<^gSDp5dBAv2#?; zcMXv#aj>%;MiG^q^$0MSg-(uTl!xm49dH!{X0){Ew7ThWV~Gtj7h%ZD zVN-R-^7Cf0VH!8O)uUHPL2mO2tmE*cecwQv_5CzWeh)ykX8r5Hi`ehYo)d{Jnh&3p z9ndXT$OW51#H5cFKa76c<%nNkP~FU93b5h-|Cb}ScHs@4Q#|}byWg;KDMJ#|l zE=MKD*F@HDBcX@~QJH%56eh~jfPO-uKm}~t7VkHxHT;)4sd+?Wc4* z>CyR*{w@4(gnYRdFq=^(#-ytb^5ESD?x<0Skhb%Pt?npNW1m+Nv`tr9+qN<3H1f<% zZvNEqyK5FgPsQ`QIu9P0x_}wJR~^CotL|n zk?dn;tLRw9jJTur4uWoX6iMm914f0AJfB@C74a;_qRrAP4E7l890P&{v<}>_&GLrW z)klculcg`?zJO~4;BBAa=POU%aN|pmZJn2{hA!d!*lwO%YSIzv8bTJ}=nhC^n}g(ld^rn#kq9Z3)z`k9lvV>y#!F4e{5c$tnr9M{V)0m(Z< z#88vX6-AW7T2UUwW`g<;8I$Jb!R%z@rCcGT)-2k7&x9kZZT66}Ztid~6t0jKb&9mm zpa}LCb`bz`{MzpZR#E*QuBiZXI#<`5qxx=&LMr-UUf~@dRk}YI2hbMsAMWOmDzYtm zjof16D=mc`^B$+_bCG$$@R0t;e?~UkF?7<(vkb70*EQB1rfUWXh$j)R2)+dNAH5%R zEBs^?N;UMdy}V};59Gu#0$q53$}|+q7CIGg_w_WlvE}AdqoS<7DY1LWS9?TrfmcvT zaypmplwn=P4;a8-%l^e?f`OpGb}%(_mFsL&GywhyN(-VROj`4~V~9bGv%UhcA|YW% zs{;nh@aDX11y^HOFXB$a7#Sr3cEtNd4eLm@Y#fc&j)TGvbbMwze zXtekX_wJqxe4NhuW$r}cNy|L{V=t#$%SuWEW)YZTH|!iT79k#?632OFse{+BT_gau zJwQcbH{b}dzKO?^dV&3nTILYlGw{27UJ72ZN){BILd_HV_s$WfI2DC<9LIHFmtyw? zQ;?MuK7g%Ym+4e^W#5}WDLpko%jPOC=aN)3!=8)s#Rnercak&b3ESRX3z{xfKBF8L z5%CGkFmGO@x?_mPGlpEej!3!AMddChabyf~nJNZxx!D&{@xEb!TDyvqSj%Y5@A{}9 zRzoBn0?x}=krh{ok3Nn%e)#~uh;6jpezhA)ySb^b#E>73e*frBFu6IZ^D7Ii&rsiU z%jzygxT-n*joJpY4o&8UXr2s%j^Q{?e-voloX`4DQyEK+DmrZh8A$)iWL#NO9+Y@!sO2f@rI!@jN@>HOA< z?q2l{^%mY*PNx2FoX+A7X3N}(RV$B`g&N=e0uvAvEN1W^{*W?zT1i#fxuw10%~))J zjx#gxoVlXREWZf4hRkgdHx5V_S*;p-y%JtGgQ4}lnA~MBz-AFdxUxU1RIT$`sal|X zPB6sEVRjGbXIP0U+?rT|y5+ev&OMX*5C$n2SBPZr`jqzrmpVrNciR0e*Wm?fK6DY& zl(XQZ60yWXV-|Ps!A{EF;=_z(YAF=T(-MkJXUoX zI{UMQDAV2}Ya?EisdEW;@pE6dt;j0fg5oT2dxCi{wqWJ<)|SR6fxX~5CzblPGr8cb zUBVJ2CQd~3L?7yfTpLNbt)He1D>*KXI^GK%<`bq^cUq$Q@uJifG>p3LU(!H=C)aEL zenk7pVg}0{dKU}&l)Y2Y2eFMdS(JS0}oZUuVaf2+K*YFNGHB`^YGcIpnBlMhO7d4@vV zv(@N}(k#REdul8~fP+^F@ky*wt@~&|(&&meNO>rKDEnB{ykAZ}k>e@lad7to>Ao$B zz<1(L=#J*u4_LB=8w+*{KFK^u00NAmeNN7pr+Pf+N*Zl^dO{LM-hMHyP6N!~`24jd zXYP|Ze;dRXKdF2iJG$U{k=S86l@pytLx}$JFFs8e)*Vi?aVBtGJ3JZUj!~c{(rw5>vuRF$`^p!P8w1B=O!skwkO5yd4_XuG^QVF z`-r5K7(IPSiKQ2|U9+`@Js!g6sfJwAHVd|s?|mnC*q zp|B|z)(8+mxXyxQ{8Pg3F4|tdpgZZSoU4P&9I8)nHo1@)9_9u&NcT^FI)6|hsAZFk zZ+arl&@*>RXBf-OZxhZerOr&dN5LW9@gV=oGFbK*J+m#R-|e6(Loz(;g@T^*oO)0R zN`N=X46b{7yk5FZGr#5&n1!-@j@g02g|X>MOpF3#IjZ_4wg{dX+G9eqS+Es9@6nC7 zD9$NuVJI}6ZlwtUm5cCAiYv0(Yi{%eH+}t)!E^>^KxB5^L~a`4%1~5q6h>d;paC9c zTj0wTCKrhWf+F#5>EgX`sl%POl?oyCq0(w0xoL?L%)|Q7d|Hl92rUYAU#lc**I&^6p=4lNQPa0 znQ|A~i0ip@`B=FW-Q;zh?-wF;Wl5!+q3GXDu-x&}$gUO)NoO7^$BeEIrd~1Dh{Tr` z8s<(Bn@gZ(mkIGnmYh_ehXnq78QL$pNDi)|QcT*|GtS%nz1uKE+E{7jdEBp%h0}%r zD2|KmYGiPa4;md-t_m5YDz#c*oV_FqXd85d@eub?9N61QuYcb3CnVWpM(D-^|CmkL z(F}L&N7qhL2PCq)fRh}XO@U`Yn<?TNGR4L(mF7#4u29{i~@k;pLsgl({YW5`Mo+p=zZn3L*4{JU;++dG9 X@eDJUQo;Ye2mwlRs?y0|+_a0zY+Zo%Dkae}+MySoIppb75o?vUW_?)>@g{U2`ERQIXV zeY$JrWnMZ$QC<=ii4X|@0H8`si75jB(ElJb00HAB%>SlLR{!zO|C9P3zxw_U8?1d8uRZ=({Ga4shyN}3 zAK}WA(ds|``G4jA)9}Bt2Hy0+f3rV1E6b|@?hpGA=PI&r8)ah|)I2s(P5Ic*Ndhn^ z*T&j@gbCTv7+8rpYbR^Ty}1AY)YH;p!m948r#%7x^Z@_-w{pDl|1S4`EM3n_PaXvK z1JF)E3qy$qTj5Xs{jU9k=y%SQ0>8E$;x?p9ayU0bZZeo{5Z@&FKX>}s!0+^>C^D#z z>xsCPvxD3Z=dP}TTOSJhNTPyVt14VCQ9MQFN`rn!c&_p?&4<5_PGm4a;WS&1(!qKE z_H$;dDdiPQ!F_gsN`2>`X}$I=B;={R8%L~`>RyKcS$72ai$!2>d(YkciA^J0@X%G4 z4cu!%Ps~2JuJ8ex`&;Fa0NQOq_nDZ&X;^A=oc1&f#3P1(!5il>6?uK4QpEG8z0Rhu zvBJ+A9RV?z%v?!$=(vcH?*;vRs*+PPbOQ3cdPr5=tOcLqmfx@#hOqX0iN)wTTO21jH<>jpmwRIAGw7`a|sl?9y9zRBh>(_%| zF?h|P7}~RKj?HR+q|4U`CjRmV-$mLW>MScKnNXiv{vD3&2@*u)-6P@h0A`eeZ7}71 zK(w%@R<4lLt`O7fs1E)$5iGb~fPfJ?WxhY7c3Q>T-w#wT&zW522pH-B%r5v#5y^CF zcC30Se|`D2mY$hAlIULL%-PNXgbbpRHgn<&X3N9W!@BUk@9g*P5mz-YnZBb*-$zMM z7Qq}ic0mR8n{^L|=+diODdV}Q!gwr?y+2m=3HWwMq4z)DqYVg0J~^}-%7rMR@S1;9 z7GFj6K}i32X;3*$SmzB&HW{PJ55kT+EI#SsZf}bD7nW^Haf}_gXciYKX{QBxIPSx2Ma? zHQqgzZq!_{&zg{yxqv3xq8YV+`S}F6A>Gtl39_m;K4dA{pP$BW0oIXJ>jEQ!2V3A2 zdpoTxG&V=(?^q?ZTj2ZUpDUdMb)T?E$}CI>r@}PFPWD9@*%V6;4Ag>D#h>!s)=$0R zRXvdkZ%|c}ubej`jl?cS$onl9Tw52rBKT)kgyw~Xy%z62Lr%V6Y=f?2)J|bZJ5(Wx zmji`O;_B+*X@qe-#~`HFP<{8$w@z4@&`q^Q-Zk8JG3>WalhnW1cvnoVw>*R@c&|o8 zZ%w!{Z+MHeZ*OE4v*otkZqz11*s!#s^Gq>+o`8Z5 z^i-qzJLJh9!W-;SmFkR8HEZJWiXk$40i6)7 zZpr=k2lp}SasbM*Nbn3j$sn0;rUI;%EDbi7T1ZI4qL6PNNM2Y%6{LMIKW+FY_yF3) zSKQ2QSujzNMSL2r&bYs`|i2Dnn z=>}c0>a}>|uT!IiMOA~pVT~R@bGlm}Edf}Kq0?*Af6#mW9f9!}RjW7om0c9Qlp;yK z)=XQs(|6GCadQbWIhYF=rf{Y)sj%^Id-ARO0=O^Ad;Ph+ z0?$eE1xhH?{T$QI>0JP75`r)U_$#%K1^BQ8z#uciKf(C701&RyLQWBUp*Q7eyn76} z6JHpC9}R$J#(R0cDCkXoFSp;j6{x{b&0yE@P7{;pCEpKjS(+1RQy38`=&Yxo%F=3y zCPeefABp34U-s?WmU#JJw23dcC{sPPFc2#J$ZgEN%zod}J~8dLm*fx9f6SpO zn^Ww3bt9-r0XaT2a@Wpw;C23XM}7_14#%QpubrIw5aZtP+CqIFmsG4`Cm6rfxl9n5 z7=r2C-+lM2AB9X0T_`?EW&Byv&K?HS4QLoylJ|OAF z`8atBNTzJ&AQ!>sOo$?^0xj~D(;kS$`9zbEGd>f6r`NC3X`tX)sWgWUUOQ7w=$TO&*j;=u%25ay-%>3@81tGe^_z*C7pb9y*Ed^H3t$BIKH2o+olp#$q;)_ zfpjCb_^VFg5fU~K)nf*d*r@BCC>UZ!0&b?AGk_jTPXaSnCuW110wjHPPe^9R^;jo3 zwvzTl)C`Zl5}O2}3lec=hZ*$JnkW#7enKKc)(pM${_$9Hc=Sr_A9Biwe*Y=T?~1CK z6eZ9uPICjy-sMGbZl$yQmpB&`ouS8v{58__t0$JP%i3R&%QR3ianbZqDs<2#5FdN@n5bCn^ZtH992~5k(eA|8|@G9u`wdn7bnpg|@{m z^d6Y`*$Zf2Xr&|g%sai#5}Syvv(>Jnx&EM7-|Jr7!M~zdAyjt*xl;OLhvW-a%H1m0 z*x5*nb=R5u><7lyVpNAR?q@1U59 zO+)QWwL8t zyip?u_nI+K$uh{y)~}qj?(w0&=SE^8`_WMM zTybjG=999h38Yes7}-4*LJ7H)UE8{mE(6;8voE+TYY%33A>S6`G_95^5QHNTo_;Ao ztIQIZ_}49%{8|=O;isBZ?=7kfdF8_@azfoTd+hEJKWE!)$)N%HIe2cplaK`ry#=pV z0q{9w-`i0h@!R8K3GC{ivt{70IWG`EP|(1g7i_Q<>aEAT{5(yD z=!O?kq61VegV+st@XCw475j6vS)_z@efuqQgHQR1T4;|-#OLZNQJPV4k$AX1Uk8Lm z{N*b*ia=I+MB}kWpupJ~>!C@xEN#Wa7V+7{m4j8c?)ChV=D?o~sjT?0C_AQ7B-vxqX30s0I_`2$in86#`mAsT-w?j{&AL@B3$;P z31G4(lV|b}uSDCIrjk+M1R!X7s4Aabn<)zpgT}#gE|mIvV38^ODy@<&yflpCwS#fRf9ZX3lPV_?8@C5)A;T zqmouFLFk;qIs4rA=hh=GL~sCFsXHsqO6_y~*AFt939UYVBSx1s(=Kb&5;j7cSowdE;7()CC2|-i9Zz+_BIw8#ll~-tyH?F3{%`QCsYa*b#s*9iCc`1P1oC26?`g<9))EJ3%xz+O!B3 zZ7$j~To)C@PquR>a1+Dh>-a%IvH_Y7^ys|4o?E%3`I&ADXfC8++hAdZfzIT#%C+Jz z1lU~K_vAm0m8Qk}K$F>|>RPK%<1SI0(G+8q~H zAsjezyP+u!Se4q3GW)`h`NPSRlMoBjCzNPesWJwVTY!o@G8=(6I%4XHGaSiS3MEBK zhgGFv6Jc>L$4jVE!I?TQuwvz_%CyO!bLh94nqK11C2W$*aa2ueGopG8DnBICVUORP zgytv#)49fVXDaR$SukloYC3u7#5H)}1K21=?DKj^U)8G;MS)&Op)g^zR2($<>C*zW z;X7`hLxiIO#J`ANdyAOJle4V%ppa*(+0i3w;8i*BA_;u8gOO6)MY`ueq7stBMJTB; z-a0R>hT*}>z|Gg}@^zDL1MrH+2hsR8 zHc}*9IvuQC^Ju)^#Y{fOr(96rQNPNhxc;mH@W*m206>Lo<*SaaH?~8zg&f&%YiOEG zGiz?*CP>Bci}!WiS=zj#K5I}>DtpregpP_tfZtPa(N<%vo^#WCQ5BTv0vr%Z{)0q+ z)RbfHktUm|lg&U3YM%lMUM(fu}i#kjX9h>GYctkx9Mt_8{@s%!K_EI zScgwy6%_fR?CGJQtmgNAj^h9B#zmaMDWgH55pGuY1Gv7D z;8Psm(vEPiwn#MgJYu4Ty9D|h!?Rj0ddE|&L3S{IP%H4^N!m`60ZwZw^;eg4sk6K{ ziA^`Sbl_4~f&Oo%n;8Ye(tiAdlZKI!Z=|j$5hS|D$bDJ}p{gh$KN&JZYLUjv4h{NY zBJ>X9z!xfDGY z+oh_Z&_e#Q(-}>ssZfm=j$D&4W4FNy&-kAO1~#3Im;F)Nwe{(*75(p=P^VI?X0GFakfh+X-px4a%Uw@fSbmp9hM1_~R>?Z8+ ziy|e9>8V*`OP}4x5JjdWp}7eX;lVxp5qS}0YZek;SNmm7tEeSF*-dI)6U-A%m6YvCgM(}_=k#a6o^%-K4{`B1+}O4x zztDT%hVb;v#?j`lTvlFQ3aV#zkX=7;YFLS$uIzb0E3lozs5`Xy zi~vF+%{z9uLjKvKPhP%x5f~7-Gj+%5N`%^=yk*Qn{`> z;xj&ROY6g`iy2a@{O)V(jk&8#hHACVDXey5a+KDod_Z&}kHM}xt7}Md@pil{2x7E~ zL$k^d2@Ec2XskjrN+IILw;#7((abu;OJii&v3?60x>d_Ma(onIPtcVnX@ELF0aL?T zSmWiL3(dOFkt!x=1O!_0n(cAzZW+3nHJ{2S>tgSK?~cFha^y(l@-Mr2W$%MN{#af8J;V*>hdq!gx=d0h$T7l}>91Wh07)9CTX zh2_ZdQCyFOQ)l(}gft0UZG`Sh2`x-w`5vC2UD}lZs*5 zG76$akzn}Xi))L3oGJ75#pcN=cX3!=57$Ha=hQ2^lwdyU#a}4JJOz6ddR%zae%#4& za)bFj)z=YQela(F#Y|Q#dp}PJghITwXouVaMq$BM?K%cXn9^Y@g43$=O)F&ZlOUom zJiad#dea;-eywBA@e&D6Pdso1?2^(pXiN91?jvcaUyYoKUmvl5G9e$W!okWe*@a<^ z8cQQ6cNSf+UPDx%?_G4aIiybZHHagF{;IcD(dPO!#=u zWfqLcPc^+7Uu#l(Bpxft{*4lv#*u7X9AOzDO z1D9?^jIo}?%iz(_dwLa{ex#T}76ZfN_Z-hwpus9y+4xaUu9cX}&P{XrZVWE{1^0yw zO;YhLEW!pJcbCt3L8~a7>jsaN{V3>tz6_7`&pi%GxZ=V3?3K^U+*ryLSb)8^IblJ0 zSRLNDvIxt)S}g30?s_3NX>F?NKIGrG_zB9@Z>uSW3k2es_H2kU;Rnn%j5qP)!XHKE zPB2mHP~tLCg4K_vH$xv`HbRsJwbZMUV(t=ez;Ec(vyHH)FbfLg`c61I$W_uBB>i^r z&{_P;369-&>23R%qNIULe=1~T$(DA`ev*EWZ6j(B$(te}x1WvmIll21zvygkS%vwG zzkR6Z#RKA2!z!C%M!O>!=Gr0(J0FP=-MN=5t-Ir)of50y10W}j`GtRCsXBakrKtG& zazmITDJMA0C51&BnLY)SY9r)NVTMs);1<=oosS9g31l{4ztjD3#+2H7u_|66b|_*O z;Qk6nalpqdHOjx|K&vUS_6ITgGll;TdaN*ta=M_YtyC)I9Tmr~VaPrH2qb6sd~=AcIxV+%z{E&0@y=DPArw zdV7z(G1hBx7hd{>(cr43^WF%4Y@PXZ?wPpj{OQ#tvc$pABJbvPGvdR`cAtHn)cSEV zrpu}1tJwQ3y!mSmH*uz*x0o|CS<^w%&KJzsj~DU0cLQUxk5B!hWE>aBkjJle8z~;s z-!A=($+}Jq_BTK5^B!`R>!MulZN)F=iXXeUd0w5lUsE5VP*H*oCy(;?S$p*TVvTxwAeWFB$jHyb0593)$zqalVlDX=GcCN1gU0 zlgU)I$LcXZ8Oyc2TZYTPu@-;7<4YYB-``Qa;IDcvydIA$%kHhJKV^m*-zxcvU4viy&Kr5GVM{IT>WRywKQ9;>SEiQD*NqplK-KK4YR`p0@JW)n_{TU3bt0 zim%;(m1=#v2}zTps=?fU5w^(*y)xT%1vtQH&}50ZF!9YxW=&7*W($2kgKyz1mUgfs zfV<*XVVIFnohW=|j+@Kfo!#liQR^x>2yQdrG;2o8WZR+XzU_nG=Ed2rK?ntA;K5B{ z>M8+*A4!Jm^Bg}aW?R?6;@QG@uQ8&oJ{hFixcfEnJ4QH?A4>P=q29oDGW;L;= z9-a0;g%c`C+Ai!UmK$NC*4#;Jp<1=TioL=t^YM)<<%u#hnnfSS`nq63QKGO1L8RzX z@MFDqs1z ztYmxDl@LU)5acvHk)~Z`RW7=aJ_nGD!mOSYD>5Odjn@TK#LY{jf?+piB5AM-CAoT_ z?S-*q7}wyLJzK>N%eMPuFgN)Q_otKP;aqy=D5f!7<=n(lNkYRXVpkB{TAYLYg{|(jtRqYmg$xH zjmq?B(RE4 zQx^~Pt}gxC2~l=K$$-sYy_r$CO(d=+b3H1MB*y_5g6WLaWTXn+TKQ|hNY^>Mp6k*$ zwkovomhu776vQATqT4blf~g;TY(MWCrf^^yfWJvSAB$p5l;jm@o#=!lqw+Lqfq>X= z$6~kxfm7`3q4zUEB;u4qa#BdJxO!;xGm)wwuisj{0y2x{R(IGMrsIzDY9LW>m!Y`= z04sx3IjnYvL<4JqxQ8f7qYd0s2Ig%`ytYPEMKI)s(LD}D@EY>x`VFtqvnADNBdeao zC96X+MxnwKmjpg{U&gP3HE}1=s!lv&D{6(g_lzyF3A`7Jn*&d_kL<;dAFx!UZ>hB8 z5A*%LsAn;VLp>3${0>M?PSQ)9s3}|h2e?TG4_F{}{Cs>#3Q*t$(CUc}M)I}8cPF6% z=+h(Kh^8)}gj(0}#e7O^FQ6`~fd1#8#!}LMuo3A0bN`o}PYsm!Y}sdOz$+Tegc=qT z8x`PH$7lvnhJp{kHWb22l;@7B7|4yL4UOOVM0MP_>P%S1Lnid)+k9{+3D+JFa#Pyf zhVc#&df87APl4W9X)F3pGS>@etfl=_E5tBcVoOfrD4hmVeTY-cj((pkn%n@EgN{0f zwb_^Rk0I#iZuHK!l*lN`ceJn(sI{$Fq6nN& zE<-=0_2WN}m+*ivmIOxB@#~Q-cZ>l136w{#TIJe478`KE7@=a{>SzPHsKLzYAyBQO zAtuuF$-JSDy_S@6GW0MOE~R)b;+0f%_NMrW(+V#c_d&U8Z9+ec4=HmOHw?gdjF(Lu zzra83M_BoO-1b3;9`%&DHfuUY)6YDV21P$C!Rc?mv&{lx#f8oc6?0?x zK08{WP65?#>(vPfA-c=MCY|%*1_<3D4NX zeVTi-JGl2uP_2@0F{G({pxQOXt_d{g_CV6b?jNpfUG9;8yle-^4KHRvZs-_2siata zt+d_T@U$&t*xaD22(fH(W1r$Mo?3dc%Tncm=C6{V9y{v&VT#^1L04vDrLM9qBoZ4@ z6DBN#m57hX7$C(=#$Y5$bJmwA$T8jKD8+6A!-IJwA{WOfs%s}yxUw^?MRZjF$n_KN z6`_bGXcmE#5e4Ym)aQJ)xg3Pg0@k`iGuHe?f(5LtuzSq=nS^5z>vqU0EuZ&75V%Z{ zYyhRLN^)$c6Ds{f7*FBpE;n5iglx5PkHfWrj3`x^j^t z7ntuV`g!9Xg#^3!x)l*}IW=(Tz3>Y5l4uGaB&lz{GDjm2D5S$CExLT`I1#n^lBH7Y zDgpMag@`iETKAI=p<5E#LTkwzVR@=yY|uBVI1HG|8h+d;G-qfuj}-ZR6fN>EfCCW z9~wRQoAPEa#aO?3h?x{YvV*d+NtPkf&4V0k4|L=uj!U{L+oLa(z#&iuhJr3-PjO3R z5s?=nn_5^*^Rawr>>Nr@K(jwkB#JK-=+HqwfdO<+P5byeim)wvqGlP-P|~Nse8=XF zz`?RYB|D6SwS}C+YQv+;}k6$-%D(@+t14BL@vM z2q%q?f6D-A5s$_WY3{^G0F131bbh|g!}#BKw=HQ7mx;Dzg4Z*bTLQSfo{ed{4}NZW zfrRm^Ca$rlE{Ue~uYv>R9{3smwATcdM_6+yWIO z*ZRH~uXE@#p$XTbCt5j7j2=86e{9>HIB6xDzV+vAo&B?KUiMP|ttOElepnl%|DPqL b{|{}U^kRn2wo}j7|0ATu<;8xA7zX}7|B6mN literal 0 HcmV?d00001 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..a15ed89 --- /dev/null +++ b/packages/plugin-multiple-editor/scripts/build.js @@ -0,0 +1,195 @@ +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'))); + } + 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); + }); + }); +} \ No newline at end of file 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..9346c35 --- /dev/null +++ b/packages/plugin-multiple-editor/src/Context.tsx @@ -0,0 +1,169 @@ +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'; +import { getDefaultFileList } from './MultipleFileEditor/util'; + +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' + ): void; + selectFile(file: File | string, path: string[]): void; + selectFileByName(name: string): void; + updateState(state: Partial): 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', ''); + } 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) { + const { fileTree } = state; + if (operation === 'add') { + insertNodeToTree(fileTree, path, target); + } else if (operation === 'delete') { + deleteNodeOnTree(fileTree, path, target); + } + 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 }); + }, + }), + [fileMap, 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..112ddde --- /dev/null +++ b/packages/plugin-multiple-editor/src/Controller.ts @@ -0,0 +1,355 @@ +import type { Project, Event } from '@alilc/lowcode-shell'; +import { ProjectSchema } from '@alilc/lowcode-types'; +import { skeleton } from '@alilc/lowcode-engine'; +import { + beautifyCSS, + compatGetSourceCodeMap, + getConstructorContent, + getDefaultDeclaration, + getInitFuncContent, + lintIndex, + treeToMap, +} from './utils'; +import { FunctionEventParams, Monaco, ObjectType } from './types'; +import { common } from '@alilc/lowcode-engine'; +import type { 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 { Service } from './Service'; + +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; + + public monaco?: Monaco; + + private codeTemp?: CodeTemp; + + private listeners: any[]; + + private extraLibMap: Map; + + private state: EditorControllerState; + + public codeEditor?: editor.IStandaloneCodeEditor; + + private codeEditorCtx?: EditorContextType; + + public service!: Service; + + public onImportSchema: HookHandleFn< + (schema: ProjectSchema) => 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); + + constructor() { + super(); + this.state = { + declarationsMap: {}, + extraLibs: [], + }; + this.listeners = []; + this.defaultFiles = {}; + this.extraLibMap = new Map(); + } + + 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)); + } + + initCodeEditor( + codeEditor: editor.IStandaloneCodeEditor, + ctx: EditorContextType + ) { + this.codeEditor = codeEditor; + this.codeEditorCtx = ctx; + } + + 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) { + const { getMonaco } = await import( + '@alilc/lowcode-plugin-base-monaco-editor' + ); + this.monaco = await getMonaco(undefined); + } + 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): ProjectSchema { + 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) { + if (!this.compileSourceCode(fileMap)) { + throw new Error('编译失败'); + } + Object.assign(schema.componentsTree[0], this.codeTemp); + } + return schema; + } + + importSchema(schema: ProjectSchema) { + 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: ProjectSchema) { + const componentSchema = schema.componentsTree[0] || {}; + const { css, methods, state, lifeCycles } = componentSchema; + const codeMap = (componentSchema as any)._sourceCodeMap; + const defaultFileMap = { + ...this.defaultFiles, + ...getDefaultFileList(schema), + }; + const compatMap = compatGetSourceCodeMap(codeMap); + this.codeTemp = { + css, + methods, + state, + lifeCycles, + _sourceCodeMap: { + ...compatMap, + files: defaultFileMap, + }, + }; + } + + 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 + ) => { + setTimeout(() => { + this.codeEditorCtx?.selectFile('index.js', []); + 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; + pageNode.css = beautifyCSS(fileMap['index.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: [] }); + } + + 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..0433d69 --- /dev/null +++ b/packages/plugin-multiple-editor/src/EditorHook.ts @@ -0,0 +1,32 @@ +export enum HookKeys { + onImport = 'onImport', + onSourceCodeChange = 'onSourceCodeChange', + onEditCodeChange = 'onEditCodeChange', +} + +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/MultipleFileEditor/Editor.tsx b/packages/plugin-multiple-editor/src/MultipleFileEditor/Editor.tsx new file mode 100644 index 0000000..ee1b2fc --- /dev/null +++ b/packages/plugin-multiple-editor/src/MultipleFileEditor/Editor.tsx @@ -0,0 +1,190 @@ +import FileTree from '@/components/FileTree'; +import MonacoEditor from '@/components/MonacoEditor'; +import { useEditorContext } from '../Context'; +import { Dialog, Message } from '@alifd/next'; +import cls from 'classnames'; +import React, { + FC, + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from 'react'; +import './index.less'; +import { HandleChangeFn } from '../components/FileTree/TreeNode'; +import { languageMap } from '../utils/constants'; +import { getKeyByPath, 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 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 containerRef = useRef(); + const filePath = useMemo( + () => [...path, file?.name].join('/'), + [file?.name, path] + ); + const handleChange = useCallback( + (file, path) => { + selectFile(file, path); + }, + [selectFile] + ); + const handleEditorChange = useCallback( + (value: string) => { + file && (file.content = value); + const curKey = getKeyByPath(path, file?.name || ''); + editorController.triggerHook(HookKeys.onEditCodeChange, { + file: path + .join('/') + .concat('/') + .concat(file?.name || ''), + content: value, + }); + if (!modifiedKeys.find((k) => k === curKey)) { + updateState({ modifiedKeys: [...modifiedKeys, curKey] }); + } + }, + [file, modifiedKeys, path, 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); + }, + [editorContext, initialFileMap] + ); + + useEffect(() => { + if (monacoEditor.current && editorContext) { + editorController.initCodeEditor(monacoEditor.current, editorContext); + } + }, [editorContext]); + + useEffect(() => { + const filepath = path + .join('/') + .concat('/') + .concat(file?.name || ''); + editorController.service.triggerHook(PluginHooks.onSelectFileChange, { + filepath, + content: file?.content, + }); + editorController.triggerHook(HookKeys.onEditCodeChange, { + file: filepath, + 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); + }, []); + return ( +
+ handleCompile()} + fullscreen={fullscreen} + onFullscreen={handleFullScreen} + /> +
+

{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..963a950 --- /dev/null +++ b/packages/plugin-multiple-editor/src/MultipleFileEditor/index.less @@ -0,0 +1,46 @@ + +@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; + &-fullscreen { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: 2000; + } + &-tree { + position: absolute; + left: 0; + top: 0; + 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..bc2f4bb --- /dev/null +++ b/packages/plugin-multiple-editor/src/MultipleFileEditor/util.tsx @@ -0,0 +1,132 @@ +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): 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]), + {} + ) + ), + '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; + } + const count = monacoEditor.getModel()?.getLineCount() ?? 0; + 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..24f4d05 --- /dev/null +++ b/packages/plugin-multiple-editor/src/Service.ts @@ -0,0 +1,59 @@ +import { EditorController } from './Controller'; +import { EditorHook } from './EditorHook'; +import type { Event } from '@alilc/lowcode-shell'; + +export enum PluginHooks { + onActive = 'onActive', + onDeActive = 'onDeActive', + onSelectFileChange = 'onSelectFileChange', +} + +export interface EditorPluginInterface { + apply(service: Service): void; +} + +export interface ServiceInitOptions { + plugins?: EditorPluginInterface[]; +} + +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); + + constructor(public controller: EditorController, private editor: Event) { + super(); + } + + init(options: ServiceInitOptions) { + // this.options = options; + const { plugins } = options; + if (plugins) { + for (const plugin of plugins) { + plugin.apply(this); + } + } + this.setupHooks(); + return this; + } + + private setupHooks() { + this.editor.on('skeleton.panel-dock.unactive', (pluginName) => { + if (pluginName === 'codeEditor') { + this.triggerHook(PluginHooks.onDeActive); + } + }); + this.editor.on('skeleton.panel-dock.active', (pluginName) => { + if (pluginName === 'codeEditor') { + this.triggerHook(PluginHooks.onActive); + } + }); + } + + public triggerHook(key: PluginHooks, ...args: any[]): void { + super.triggerHook(key, ...args); + } +} 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 0000000000000000000000000000000000000000..c272d576004a6127632f913fe5ecca337b0da067 GIT binary patch literal 340 zcmV-a0jvIrP)Px$4oO5oR9Hvtm%$CfFbqY1_5g`1s)wMvATb7I6xQHEhxipoIIu@iP>WD$;-nRA z56Ll!?Ux@%u?=P(X6E<^0uYfSfIWa!2yk834*-{{st($I6`%=TXpS7~1<8}oRt3ni z>~4(N0LV#}As`~M18@cKB)J|1AR@JOKvISM4isvqIt_KyJ!Pof2S7xuWLCN#j*Qhs5$U&FegBh6E^$bchwFNxizn18#r%s>&H)P>jUV0ey;3}olgKsfuulE zASp0Lf!M#mTTw;-1+l-QRv9G#rvgLD@t(p|Ezf;dV7sBA4M~^9*`Rn!ve=fa8`ZXG m#+Wln=RuZR6UIKbq5EG_Nir~uCe@Vy0000Px#@JU2LR9Hvtmq8AKFc3wjuwd;eOmykm6OgnJ6HnkhgmbWS>89-|Jb@mkW10ww zL8P57&}3MW|7RY*Whep`zQn@)fdPgDs;X*)5a+-pxjE-f*4js)eo{67)OC%K#qQ3z zV=BZ5Kx_SVUq~s}d7gIwu#W^DMb083KQpNzB04Kl+ za00)dKE&u=k07*qo IM6N<$f}_}g9{>OV literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..d0b0638a0ae98e50d2155224d3befe37cbc1c64a GIT binary patch literal 315 zcmV-B0mS}^P)Px#^+`lQR9Hvt*FO$|Fcb#x?{NoRT%Gh1Z~|b!OSpR|9UeE3OE|eWc?v>J4J1bS z^B&L;lXfGN_SY{hZ3zn(TDX6-0@5_S0tiRo9so|ve35?J1u)VEKI+{7?Ca-)6wwPX z#zYbb5!u8F04ptG5Rm7&ZMd@}NfI`Is;Z7b5S%rLSpm!(#c{mTAZ7>Hs5A&C01d(! zpat<{=FRtHnibG9SKq6HnSc7549K!{|OK93HStj z0zLtsz@H`{+2@DqjNXoi8rHtooCn5U&H7A*J+_O^gxZl!slWK`_ysW|Q7~Jd>D>ST N002ovPDHLkV1k;=fD8Zt literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..cdb21ac78856e0542f33c59ed9a3e0ee08020a56 GIT binary patch literal 385 zcmV-{0e=38P)Px$J4r-AR9HvtmZ46?FcgOW)5ieAH3$*}1`VEM=kx_2C_E%cz#%{qFa(WYrvV-S zgTkOuSMeA-qzNM%?22)_yNT7UT~ELM?K%AkJvZukeT)E&3W&(6s(viucxnL5yh22; z0G0r}sOokVf|<7xKutpk(=tvCzP;g+?2Ixy=XQ&tIIBvPVBy9PV;YVM3{L^?{iB(!6VXGS z=SN-L{>C(9=2Id%sT86~nTpJONJJM2fNB-?cPX9;AR-3A?Ro$FbiaR%@L=>&wkK-PeEl(hC f>kwld=v{#?9<_}j#c;Wn00000NkvXXu0mjfn);pP literal 0 HcmV?d00001 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..fe1f70f --- /dev/null +++ b/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/index.less @@ -0,0 +1,108 @@ +.ilp-tree-node { + width: 100%; + 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; + } + span { + margin-left: 4px; + } + &-icon { + position: absolute; + right: 8px; + top: calc(50% - 7px); + } + } + &-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 { + display: none; + } + &:hover &-icon { + display: block; + } + } +} + +.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..3f19078 --- /dev/null +++ b/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/index.tsx @@ -0,0 +1,219 @@ +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 './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 interface TreeNodeProps { + disableAction?: boolean; + dir?: Dir; + parentKey?: string; + selectedKey?: string; + modifiedKeys?: string[]; + level?: number; + onChange?: HandleChangeFn; + onAdd?: HandleAddFn; + onDelete?: HandleDeleteFn; + className?: string; +} + +const helpPopupProps = { + animation: { + in: 'zoomIn', + out: 'zoomOut', + }, + triggerType: 'hover', + placementOffset: 4, +}; + +const defaultDir = new Dir('root'); + +const TreeNode: FC = ({ + dir = defaultDir, + className, + selectedKey, + parentKey, + level = 1, + onChange, + onDelete, + onAdd, + 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', + }); + } + return baseActions; + }, [dir, onAdd, onDelete, parentKey]); + const handleFileClick = (f: File, key: string) => { + onChange?.(f, parseKey(key).path); + }; + 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 === key) && + 'ilp-tree-node-file-modified' + )} + onClick={() => handleFileClick(f, key)} + > + file + {f.name} + {f.ext !== 'css' && + !(f.name === 'index.js' && !parentKey) && + !actionDisabled && ( + handleDelete(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..65d9825 --- /dev/null +++ b/packages/plugin-multiple-editor/src/components/FileTree/index.less @@ -0,0 +1,24 @@ +.ilp-file-bar { + width: 200px; + padding: 8px; + &-title { + font-size: 14px; + color: #333; + margin: 0; + display: flex; + justify-content: space-between; + align-items: center; + 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..b3c51bd --- /dev/null +++ b/packages/plugin-multiple-editor/src/components/FileTree/index.tsx @@ -0,0 +1,181 @@ +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, getKeyByPath } from '../../utils/files'; +import TreeNode, { + HandleAddFn, + HandleChangeFn, + HandleDeleteFn, +} from './TreeNode'; +import './index.less'; +import { useEditorContext } from '../../Context'; +// import saveIcon from './img/save.svg'; +import fullscreenIcon from './img/fullscreen.svg'; +import fullscreenExitIcon from './img/fullscreen-exit.svg'; +import compileIcon from './img/compile.svg'; + +export interface FileTreeProps { + dir?: Dir; + mode?: 'single' | 'multiple'; + onChange?: HandleChangeFn; + className?: string; + onSave?: () => any; + onFullscreen?: (enable: boolean) => void; + fullscreen?: boolean; +} + +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') { + return name && /\.(js)$/.test(name) ? undefined : '文件名必填且未js后缀'; + } +} + +const newModalStyle: CSSProperties = { + width: 380, +}; + +const FileTree: FC = ({ + dir = defaultDir, + onChange, + className, + onSave, + onFullscreen, + fullscreen, + mode, +}) => { + const { updateFileTreeByPath, fileTree, modifiedKeys, currentFile } = + useEditorContext(); + const [visible, setVisible] = useState(false); + const [value, setValue] = useState({ name: '' }); + const tmp = useRef<{ path: string[]; type: string }>({} as any).current; + const handleAdd = useCallback( + (type, path) => { + 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 handleAddFileToTree = 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 target = tmp.type === 'file' ? new File(name, '') : new Dir(name); + 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] + ); + return ( +
+

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

+ + + + handleAddFileToTree()} + > +
+ + handleAddFileToTree(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..b514143 --- /dev/null +++ b/packages/plugin-multiple-editor/src/components/MonacoEditor/index.tsx @@ -0,0 +1,139 @@ +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'; + +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); + } + + 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 }, + }); + } + // base editor 的bug，value 改变编辑器不会更新，暂时这么解决 + if ( + this.props.value !== prevProps.value && + this.props.filePath === prevProps.filePath + ) { + this.editor?.getModel()?.setValue(this.props.value || ''); + } + } + + 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.ES2015, + allowJs: true, + allowNonTsExtensions: true, + noEmit: true, + esModuleInterop: true, + jsx: monaco.languages.typescript.JsxEmit.React, + reactNamespace: 'React', + }); + + 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); + if (result === null) { + this.props.onGotoFile?.(input.resource?.path); + // console.log('Open definition for:', input); + // console.log( + // 'Corresponding model:', + // monaco.editor.getModel(input.resource) + // ); + } + return result; // always return the base 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/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..9382a1b --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/sample-plugins/delete-hidden-transducer/index.ts @@ -0,0 +1,16 @@ +import { ILowCodePluginContext, project } from '@alilc/lowcode-engine'; +import { CompositeObject, TransformStage } from '@alilc/lowcode-types'; + +export const deleteHiddenTransducer = (ctx: ILowCodePluginContext) => { + return { + name: 'deleteHiddenTransducer', + async init() { + project.addPropsTransducer((props: CompositeObject): CompositeObject => { + delete props.hidden; + return props; + }, TransformStage.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..28bd634 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/sample-plugins/scenario-switcher/index.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import { + ILowCodePluginContext, +} from '@alilc/lowcode-engine'; +import { Select } from '@alifd/next'; +import scenarios from '../../universal/scenarios.json'; +const { Option } = Select; + +const getCurrentScenarioName = () => { + // return 'index' + const list = location.href.split('/'); + return list[list.length - 1].replace('.html', ''); +} + +function Switcher(props: any) { + return () +} + +export const scenarioSwitcher = (ctx: ILowCodePluginContext) => { + 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..7a8efbd --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/sample-plugins/set-ref-prop/index.tsx @@ -0,0 +1,88 @@ +import { + TransformedComponentMetadata, + FieldConfig, +} from '@alilc/lowcode-types'; +import { v4 as uuidv4 } from 'uuid'; +import { material } from '@alilc/lowcode-engine'; + +function addonCombine(metadata: TransformedComponentMetadata) { + const { componentName, configure = {} } = metadata; + + const isRoot: boolean = + componentName === 'Page' || componentName === 'Component'; + + if (isRoot) { + return metadata; + } + + let advancedGroup: FieldConfig | undefined; + + const refItem: FieldConfig = { + 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: FieldConfig[] = 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..c812a4d --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-antd/plugin.tsx @@ -0,0 +1,269 @@ +import React from 'react'; +import { + ILowCodePluginContext, + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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-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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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..14e78be --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion-with-single-component/plugin.tsx @@ -0,0 +1,276 @@ +import React from 'react'; +import { + ILowCodePluginContext, + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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..a05fb96 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/basic-fusion/plugin.tsx @@ -0,0 +1,273 @@ +import React from 'react'; +import { + ILowCodePluginContext, + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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..1691a9e --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/next-pro/plugin.tsx @@ -0,0 +1,271 @@ +import React from 'react'; +import { + ILowCodePluginContext, + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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..6c229f6 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/scenarios/node-extended-actions/plugin.tsx @@ -0,0 +1,307 @@ +import React from 'react'; +import { + ILowCodePluginContext, + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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..440b5f7 --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/universal/plugin.tsx @@ -0,0 +1,245 @@ +import React from 'react'; +import { + ILowCodePluginContext, + plugins, + skeleton, + project, + setters, +} 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 ZhEnPlugin from '@alilc/lowcode-plugin-zh-en'; +import SchemaPlugin from '@alilc/lowcode-plugin-schema'; +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); + + // plugin API 见 https://yuque.antfin.com/ali-lowcode/docs/cdukce + SchemaPlugin.pluginName = 'SchemaPlugin'; + await plugins.register(SchemaPlugin); + + const editorInit = (ctx: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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(ZhEnPlugin); + + const loadAssetsSample = (ctx: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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: ILowCodePluginContext) => { + 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..e952c6a --- /dev/null +++ b/packages/plugin-multiple-editor/src/dev-config/universal/utils.ts @@ -0,0 +1,300 @@ +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)) + ); +}; + +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 { + 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..e238d01 --- /dev/null +++ b/packages/plugin-multiple-editor/src/global.d.ts @@ -0,0 +1,2 @@ +declare module '*.png'; +declare module '*.svg'; 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..02fe5b5 --- /dev/null +++ b/packages/plugin-multiple-editor/src/index.dev.tsx @@ -0,0 +1,91 @@ +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'; + +controller.updateMeta({ singleton: true }); + +(async () => { + console.log((await getMonaco()) === (await getMonaco())); +})(); + +async function initEditor(el: any) { + await registerAllPlugin(); + await plugins.register( + codePlugin({ + softSave: true, + // mode: 'single', + es6: true, + defaultFiles: { + 'aspect.js': 'export default {}', + }, + plugins: [ + new SearchPlugin({ + onGotoRef: (name) => { + console.log(name); + }, + }), + ], + 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); + }); + }, + }) + ); + await init(el, { + locale: 'zh-CN', + enableCondition: true, + enableCanvasLock: true, + // 默认绑定变量 + supportVariableGlobally: true, + }); +} + +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..630a06a --- /dev/null +++ b/packages/plugin-multiple-editor/src/index.tsx @@ -0,0 +1,80 @@ +import { project, editor } from '@alilc/lowcode-engine'; +import type { + ILowCodePluginConfig, + ILowCodePluginContext, +} from '@alilc/lowcode-engine'; +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'; + +export { editorController }; + +baseController.registerMethod('getSchema', () => { + return editorController.getSchema(); +}); + +const pluginCodeEditor = ( + options: { + mode?: 'single' | 'multiple'; + es6?: boolean; + softSave?: boolean; + onInstall?: (controller: EditorController) => void; + plugins?: EditorPluginInterface[]; + defaultFiles?: Record; + } = {} +) => { + const plugin = (ctx: ILowCodePluginContext): ILowCodePluginConfig => { + return { + exports: () => ({}), + init() { + options.onInstall?.(editorController); + editorController.es6 = options.es6; + 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 service = new Service(editorController, editor); + service.init({ plugins: options.plugins }); + editorController.init(project, editor, service); + }); + }, + }; + }; + plugin.pluginName = 'codeEditor'; + return plugin; +}; + +export default pluginCodeEditor; 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..396e65f --- /dev/null +++ b/packages/plugin-multiple-editor/src/plugins/search-plugin/index.ts @@ -0,0 +1,133 @@ +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.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..0a16eed --- /dev/null +++ b/packages/plugin-multiple-editor/src/plugins/search-plugin/search.ts @@ -0,0 +1,102 @@ +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[]) => { + 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..664f73e --- /dev/null +++ b/packages/plugin-multiple-editor/src/types/index.ts @@ -0,0 +1,20 @@ +import { JSExpression } from '@alilc/lowcode-types'; + +export type Monaco = typeof import('monaco-editor/esm/vs/editor/editor.api'); +export type ObjectType = Record; + +export interface IState extends JSExpression { + 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..dd10a96 --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/code.ts @@ -0,0 +1,84 @@ +import { + isJSExpression, + ProjectSchema, + RootSchema, + JSFunction, + JSExpression, +} 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: RootSchema | 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: ProjectSchema, 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..3e39b1c --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/constants.ts @@ -0,0 +1,7 @@ +import { ObjectType } from './multipleFile/types'; + +export const languageMap: ObjectType = { + js: 'javascript', + css: 'css', + json: 'json', +}; 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..c9a5d09 --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/files.ts @@ -0,0 +1,161 @@ +/* eslint-disable no-unreachable */ +export class File { + public ext: string | undefined; + + public type = 'file'; + + constructor(public name: string, public content: string) { + this.ext = name.match(/\.(\w+)$/)?.[1]; + } +} + +export class Dir { + public dirs: Dir[]; + public files: File[]; + public type = 'dir'; + + constructor(public name: string, dirs?: Dir[], files?: File[]) { + this.dirs = dirs || []; + this.files = files || []; + } +} + +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); + nextDir.dirs.push(found); + } + nextDir = found; + } + // 添加文件 + nextDir.files.push(new File(filename, file.content)); +} + +/** + * 后续 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 = {}) { + const { meta, files, ...rest } = origin; + return { + files: files || rest, + 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..1d51709 --- /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?.rawValue + ] = { + 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..7ee0f79 --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/ghostBabel.ts @@ -0,0 +1,48 @@ +/** + * 使用 @babel/standalone 的能力实现 parse 和 traverse + */ + +import { transform, transformFromAst } 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', +}; + +export function traverse(code: string | ParseResult | Node, visitor: Visitor) { + const plugin: PluginItem = () => { + return { + visitor, + }; + }; + + if (typeof code === 'string') { + transform(code, { + ...defaultBabelOption, + plugins: [plugin], + }); + } else { + transformFromAst(code, undefined, { + ...defaultBabelOption, + plugins: [plugin], + }); + } +} + +export function parse(code: string): File { + let ast: File; + traverse(code, { + Program(path) { + ast = file(path.node); + }, + }); + // @ts-ignore + return ast; +} 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..3e3fcd0 --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/index.ts @@ -0,0 +1,6 @@ +export * from './transformUMD'; +export * from './code'; +export * from './tsUtils'; +export * from './files'; +export * from './codeLint'; +export * from './ghostBabel'; 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..3533e65 --- /dev/null +++ b/packages/plugin-multiple-editor/src/utils/multipleFile/babel/compile.ts @@ -0,0 +1,66 @@ +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']); + } + 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/transformUMD.ts b/packages/plugin-multiple-editor/src/utils/transformUMD.ts new file mode 100644 index 0000000..844531b --- /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'].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..8c6bf06 --- /dev/null +++ b/packages/plugin-multiple-editor/tsconfig.json @@ -0,0 +1,22 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "baseUrl": "./", + "outDir": "./es", + "moduleResolution": "node", + "declaration": true, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "module": "es2020", + "target": "ES5", + "paths": { + "@/*": ["./src/*"], + "utils": ["./src/utils"], + "utils/*": ["./src/utils/*"], + "types": ["./src/types"], + "types/*": ["./src/types/*"] + } + }, + "include": ["src"] +} From 08a432e03457ddfe7c6916e7441d644d96a7f68c Mon Sep 17 00:00:00 2001 From: JackLian Date: Mon, 15 May 2023 18:34:30 +0800 Subject: [PATCH 13/83] chore(components-pane): publish 2.0.1 --- packages/plugin-components-pane/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-components-pane/package.json b/packages/plugin-components-pane/package.json index 02833b2..8655eff 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": "2.0.0", + "version": "2.0.1", "description": "低代码组件面板", "files": [ "es/", From 16d5bf523e8360ed1e06555851de50f0ca1d0b27 Mon Sep 17 00:00:00 2001 From: JackLian Date: Mon, 15 May 2023 19:10:03 +0800 Subject: [PATCH 14/83] fix(components-pane): fix error when searching, schema may be falsy --- packages/plugin-components-pane/src/pane/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-components-pane/src/pane/index.tsx b/packages/plugin-components-pane/src/pane/index.tsx index 1399353..eacb5db 100644 --- a/packages/plugin-components-pane/src/pane/index.tsx +++ b/packages/plugin-components-pane/src/pane/index.tsx @@ -51,7 +51,7 @@ export default class ComponentPane extends React.Component Date: Mon, 15 May 2023 19:12:26 +0800 Subject: [PATCH 15/83] chore(components-pane): publish 2.0.2 --- packages/plugin-components-pane/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-components-pane/package.json b/packages/plugin-components-pane/package.json index 8655eff..c221cb6 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": "2.0.1", + "version": "2.0.2", "description": "低代码组件面板", "files": [ "es/", From e53f72f33ecf694b57022c1855b127c55b7cbfd9 Mon Sep 17 00:00:00 2001 From: jingyu Date: Tue, 16 May 2023 19:23:33 +0800 Subject: [PATCH 16/83] =?UTF-8?q?feat:=20=E4=BF=AE=E5=A4=8D=E6=9E=84?= =?UTF-8?q?=E5=BB=BA=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/plugin-multiple-editor/.eslintrc.js | 42 +++++++ packages/plugin-multiple-editor/package.json | 4 +- .../plugin-multiple-editor/src/Controller.ts | 38 +++--- .../delete-hidden-transducer/index.ts | 10 +- .../sample-plugins/set-ref-prop/index.tsx | 12 +- .../src/dev-config/universal/plugin.tsx | 15 ++- .../src/dev-config/universal/utils.ts | 4 +- packages/plugin-multiple-editor/src/index.tsx | 6 +- .../plugin-multiple-editor/src/types/index.ts | 4 +- .../plugin-multiple-editor/src/utils/code.ts | 11 +- .../src/utils/get-methods.ts | 2 +- packages/plugin-multiple-editor/tsconfig.json | 111 ++++++++++++++++-- 12 files changed, 184 insertions(+), 75 deletions(-) create mode 100644 packages/plugin-multiple-editor/.eslintrc.js 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/package.json b/packages/plugin-multiple-editor/package.json index 7c537aa..0c79b6a 100644 --- a/packages/plugin-multiple-editor/package.json +++ b/packages/plugin-multiple-editor/package.json @@ -98,10 +98,10 @@ "postcss-normalize": "^10.0.1", "postcss-preset-env": "^7.0.1", "prompts": "^2.4.2", - "react": "^17.0.2", + "react": "*", "react-app-polyfill": "^3.0.0", "react-dev-utils": "^12.0.0", - "react-dom": "^17.0.2", + "react-dom": "*", "react-refresh": "^0.11.0", "resolve": "^1.20.0", "resolve-url-loader": "^4.0.0", diff --git a/packages/plugin-multiple-editor/src/Controller.ts b/packages/plugin-multiple-editor/src/Controller.ts index 112ddde..cce1d56 100644 --- a/packages/plugin-multiple-editor/src/Controller.ts +++ b/packages/plugin-multiple-editor/src/Controller.ts @@ -1,6 +1,5 @@ import type { Project, Event } from '@alilc/lowcode-shell'; -import { ProjectSchema } from '@alilc/lowcode-types'; -import { skeleton } from '@alilc/lowcode-engine'; +import { skeleton, common } from '@alilc/lowcode-engine'; import { beautifyCSS, compatGetSourceCodeMap, @@ -11,7 +10,6 @@ import { treeToMap, } from './utils'; import { FunctionEventParams, Monaco, ObjectType } from './types'; -import { common } from '@alilc/lowcode-engine'; import type { editor } from 'monaco-editor'; import { addFunction, @@ -29,7 +27,7 @@ export * from './EditorHook'; export interface EditorControllerState { declarationsMap: Record; - extraLibs: { path: string; content: string }[]; + extraLibs: Array<{ path: string; content: string }>; } export type HookHandleFn = (fn: T) => () => void; @@ -51,7 +49,7 @@ export class EditorController extends EditorHook { defaultFiles: ObjectType; - public monaco?: Monaco; + monaco?: Monaco; private codeTemp?: CodeTemp; @@ -61,20 +59,20 @@ export class EditorController extends EditorHook { private state: EditorControllerState; - public codeEditor?: editor.IStandaloneCodeEditor; + codeEditor?: editor.IStandaloneCodeEditor; private codeEditorCtx?: EditorContextType; - public service!: Service; + service!: Service; - public onImportSchema: HookHandleFn< - (schema: ProjectSchema) => void | Promise - > = this.hookFactory(HookKeys.onImport); + onImportSchema: HookHandleFn<(schema: any) => void | Promise> = + this.hookFactory(HookKeys.onImport); - public onSourceCodeChange: HookHandleFn<(code: any) => void> = - this.hookFactory(HookKeys.onSourceCodeChange); + onSourceCodeChange: HookHandleFn<(code: any) => void> = this.hookFactory( + HookKeys.onSourceCodeChange + ); - public onEditCodeChange: HookHandleFn< + onEditCodeChange: HookHandleFn< (code: { content: string; file: string }) => void > = this.hookFactory(HookKeys.onEditCodeChange); @@ -124,7 +122,7 @@ export class EditorController extends EditorHook { this.applyLibs(); } - addComponentDeclarations(list: [string, string][] = []) { + addComponentDeclarations(list: Array<[string, string]> = []) { for (const [key, dec] of list) { this.state.declarationsMap[key] = dec; } @@ -133,7 +131,7 @@ export class EditorController extends EditorHook { } private publishExtraLib() { - const libs: { path: string; content: string }[] = []; + const libs: Array<{ path: string; content: string }> = []; this.extraLibMap.forEach((content, path) => libs.push({ content, path })); this.state.extraLibs = libs; this.publish(); @@ -156,7 +154,7 @@ export class EditorController extends EditorHook { const { getMonaco } = await import( '@alilc/lowcode-plugin-base-monaco-editor' ); - this.monaco = await getMonaco(undefined); + this.monaco = await getMonaco(undefined) as any; } const decStr = Object.keys(this.state.declarationsMap).reduce( (v, k) => `${v}\n${k}: ${this.state.declarationsMap[k]};\n`, @@ -175,7 +173,7 @@ export class EditorController extends EditorHook { }); } - getSchema(pure?: boolean): ProjectSchema { + getSchema(pure?: boolean): any { const schema = this.project.exportSchema( common.designerCabin.TransformStage.Save ); @@ -192,7 +190,7 @@ export class EditorController extends EditorHook { return schema; } - importSchema(schema: ProjectSchema) { + importSchema(schema: any) { this.project.importSchema(schema); this.initCodeTempBySchema(schema); this.triggerHook(HookKeys.onImport, schema); @@ -219,7 +217,7 @@ export class EditorController extends EditorHook { }; } - public initCodeTempBySchema(schema: ProjectSchema) { + initCodeTempBySchema(schema: any) { const componentSchema = schema.componentsTree[0] || {}; const { css, methods, state, lifeCycles } = componentSchema; const codeMap = (componentSchema as any)._sourceCodeMap; @@ -343,7 +341,7 @@ export class EditorController extends EditorHook { return true; } - public resetSaveStatus() { + resetSaveStatus() { this.codeEditorCtx?.updateState({ modifiedKeys: [] }); } 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 index 9382a1b..921cd03 100644 --- 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 @@ -1,14 +1,14 @@ -import { ILowCodePluginContext, project } from '@alilc/lowcode-engine'; -import { CompositeObject, TransformStage } from '@alilc/lowcode-types'; +import { project } from '@alilc/lowcode-engine'; +import { IPublicEnumTransformStage } from '@alilc/lowcode-types'; -export const deleteHiddenTransducer = (ctx: ILowCodePluginContext) => { +export const deleteHiddenTransducer = (ctx: any) => { return { name: 'deleteHiddenTransducer', async init() { - project.addPropsTransducer((props: CompositeObject): CompositeObject => { + project.addPropsTransducer((props: any): any => { delete props.hidden; return props; - }, TransformStage.Save); + }, IPublicEnumTransformStage.Save); }, }; } 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 index 7a8efbd..b85e750 100644 --- 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 @@ -1,11 +1,7 @@ -import { - TransformedComponentMetadata, - FieldConfig, -} from '@alilc/lowcode-types'; import { v4 as uuidv4 } from 'uuid'; import { material } from '@alilc/lowcode-engine'; -function addonCombine(metadata: TransformedComponentMetadata) { +function addonCombine(metadata: any) { const { componentName, configure = {} } = metadata; const isRoot: boolean = @@ -15,9 +11,9 @@ function addonCombine(metadata: TransformedComponentMetadata) { return metadata; } - let advancedGroup: FieldConfig | undefined; + let advancedGroup: any | undefined; - const refItem: FieldConfig = { + const refItem: any = { title: { label: 'refId', tip: '用于获取组件实例，调用物料内部方法', @@ -57,7 +53,7 @@ function addonCombine(metadata: TransformedComponentMetadata) { advancedGroup.items = [refItem]; } - const advanceItems: FieldConfig[] = advancedGroup.items || []; + const advanceItems: any[] = advancedGroup.items || []; if ( !advanceItems || diff --git a/packages/plugin-multiple-editor/src/dev-config/universal/plugin.tsx b/packages/plugin-multiple-editor/src/dev-config/universal/plugin.tsx index 440b5f7..c55ddff 100644 --- a/packages/plugin-multiple-editor/src/dev-config/universal/plugin.tsx +++ b/packages/plugin-multiple-editor/src/dev-config/universal/plugin.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { - ILowCodePluginContext, plugins, skeleton, project, @@ -41,7 +40,7 @@ export default async function registerPlugins() { SchemaPlugin.pluginName = 'SchemaPlugin'; await plugins.register(SchemaPlugin); - const editorInit = (ctx: ILowCodePluginContext) => { + const editorInit = (ctx: any) => { return { name: 'editor-init', async init() { @@ -66,7 +65,7 @@ export default async function registerPlugins() { editorInit.pluginName = 'editorInit'; await plugins.register(editorInit); - const builtinPluginRegistry = (ctx: ILowCodePluginContext) => { + const builtinPluginRegistry = (ctx: any) => { return { name: 'builtin-plugin-registry', async init() { @@ -110,7 +109,7 @@ export default async function registerPlugins() { await plugins.register(builtinPluginRegistry); // 设置内置 setter 和事件绑定、插件绑定面板 - const setterRegistry = (ctx: ILowCodePluginContext) => { + const setterRegistry = (ctx: any) => { const { setterMap, pluginMap } = AliLowCodeEngineExt; return { name: 'ext-setters-registry', @@ -145,7 +144,7 @@ export default async function registerPlugins() { // 注册中英文切换 await plugins.register(ZhEnPlugin); - const loadAssetsSample = (ctx: ILowCodePluginContext) => { + const loadAssetsSample = (ctx: any) => { return { name: 'loadAssetsSample', async init() { @@ -170,7 +169,7 @@ export default async function registerPlugins() { await plugins.register(loadAssetsSample); // 注册保存面板 - const saveSample = (ctx: ILowCodePluginContext) => { + const saveSample = (ctx: any) => { return { name: 'saveSample', async init() { @@ -204,7 +203,7 @@ export default async function registerPlugins() { saveSample.pluginName = 'saveSample'; await plugins.register(saveSample); - const previewSample = (ctx: ILowCodePluginContext) => { + const previewSample = (ctx: any) => { return { name: 'previewSample', async init() { @@ -228,7 +227,7 @@ export default async function registerPlugins() { previewSample.pluginName = 'previewSample'; await plugins.register(previewSample); - const customSetter = (ctx: ILowCodePluginContext) => { + const customSetter = (ctx: any) => { return { name: '___registerCustomSetter___', async init() { diff --git a/packages/plugin-multiple-editor/src/dev-config/universal/utils.ts b/packages/plugin-multiple-editor/src/dev-config/universal/utils.ts index e952c6a..e6e3af7 100644 --- a/packages/plugin-multiple-editor/src/dev-config/universal/utils.ts +++ b/packages/plugin-multiple-editor/src/dev-config/universal/utils.ts @@ -1,7 +1,7 @@ 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'; +import { IPublicEnumTransformStage } from '@alilc/lowcode-types'; export const loadIncrementalAssets = () => { material?.onChangeAssets(() => { @@ -252,7 +252,7 @@ const setProjectSchemaToLocalStorage = (scenarioName: string) => { } window.localStorage.setItem( getLSName(scenarioName), - JSON.stringify(project.exportSchema(TransformStage.Save)) + JSON.stringify(project.exportSchema(IPublicEnumTransformStage.Save)) ); }; diff --git a/packages/plugin-multiple-editor/src/index.tsx b/packages/plugin-multiple-editor/src/index.tsx index 630a06a..117870b 100644 --- a/packages/plugin-multiple-editor/src/index.tsx +++ b/packages/plugin-multiple-editor/src/index.tsx @@ -1,8 +1,4 @@ import { project, editor } from '@alilc/lowcode-engine'; -import type { - ILowCodePluginConfig, - ILowCodePluginContext, -} from '@alilc/lowcode-engine'; import { controller as baseController } from '@alilc/lowcode-plugin-base-monaco-editor/es/controller'; import { EditorProvider } from './Context'; import MultipleFileEditor from './MultipleFileEditor'; @@ -26,7 +22,7 @@ const pluginCodeEditor = ( defaultFiles?: Record; } = {} ) => { - const plugin = (ctx: ILowCodePluginContext): ILowCodePluginConfig => { + const plugin = (ctx: any): any => { return { exports: () => ({}), init() { diff --git a/packages/plugin-multiple-editor/src/types/index.ts b/packages/plugin-multiple-editor/src/types/index.ts index 664f73e..4682325 100644 --- a/packages/plugin-multiple-editor/src/types/index.ts +++ b/packages/plugin-multiple-editor/src/types/index.ts @@ -1,9 +1,7 @@ -import { JSExpression } from '@alilc/lowcode-types'; - export type Monaco = typeof import('monaco-editor/esm/vs/editor/editor.api'); export type ObjectType = Record; -export interface IState extends JSExpression { +export interface IState { originCode?: string; } diff --git a/packages/plugin-multiple-editor/src/utils/code.ts b/packages/plugin-multiple-editor/src/utils/code.ts index dd10a96..796f89d 100644 --- a/packages/plugin-multiple-editor/src/utils/code.ts +++ b/packages/plugin-multiple-editor/src/utils/code.ts @@ -1,10 +1,3 @@ -import { - isJSExpression, - ProjectSchema, - RootSchema, - JSFunction, - JSExpression, -} from '@alilc/lowcode-types'; // @ts-ignore import prettier from 'prettier/esm/standalone.mjs'; import parserBabel from 'prettier/parser-babel'; @@ -30,7 +23,7 @@ const prettierCssConfig = { printWidth: 120, // 超过120个字符强制换行 }; -export const initCode = (componentSchema: RootSchema | undefined) => { +export const initCode = (componentSchema: any | undefined) => { return ( (componentSchema as any)?.originCode || `export default class LowcodeComponent extends Component { @@ -79,6 +72,6 @@ export const beautifyCSS = (input: string, options: any): string => { }; // schema转换为CSS代码 -export const schema2CssCode = (schema: ProjectSchema, prettierOptions: any) => { +export const schema2CssCode = (schema: any, prettierOptions: any) => { return beautifyCSS(schema.componentsTree[0]?.css || '', prettierOptions); }; diff --git a/packages/plugin-multiple-editor/src/utils/get-methods.ts b/packages/plugin-multiple-editor/src/utils/get-methods.ts index 1d51709..4d3b760 100644 --- a/packages/plugin-multiple-editor/src/utils/get-methods.ts +++ b/packages/plugin-multiple-editor/src/utils/get-methods.ts @@ -111,7 +111,7 @@ export const getMethods = (fileContent: string) => { ?.code; const compiledCode = pureTranspile(codeStr, { esm: true }); state[ - (property.key as Identifier).name ?? property?.key?.extra?.rawValue + (property.key as Identifier).name ?? property?.key?.extra?.rawValue as string ] = { type: 'JSExpression', value: compiledCode.replace(/var *name *= */, '').replace(/;$/, ''), diff --git a/packages/plugin-multiple-editor/tsconfig.json b/packages/plugin-multiple-editor/tsconfig.json index 8c6bf06..c820ed9 100644 --- a/packages/plugin-multiple-editor/tsconfig.json +++ b/packages/plugin-multiple-editor/tsconfig.json @@ -1,22 +1,109 @@ { - "extends": "../../tsconfig.json", "compilerOptions": { - "rootDir": "./src", - "baseUrl": "./", - "outDir": "./es", - "moduleResolution": "node", - "declaration": true, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "module": "es2020", - "target": "ES5", + /* Visit https://aka.ms/tsconfig.json to read more about this file */ + + /* Projects */ + // "incremental": true, /* Enable incremental compilation */ + // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ + // "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */ + // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */ + // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ + // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ + + /* Language and Environment */ + "target": "ES5" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */, + // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ + "jsx": "react" /* Specify what JSX code is generated. */, + "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ + "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ + // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */ + // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ + // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */ + // "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */ + // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ + // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ + + /* Modules */ + "module": "ES2020" /* Specify what module code is generated. */, + "rootDir": "./src", /* Specify the root folder within your source files. */ + "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ + "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ "paths": { "@/*": ["./src/*"], "utils": ["./src/utils"], "utils/*": ["./src/utils/*"], "types": ["./src/types"], "types/*": ["./src/types/*"] - } + }, /* Specify a set of entries that re-map imports to additional lookup locations. */ + // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ + // "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */ + // "types": [], /* Specify type package names to be included without being referenced in a source file. */ + // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ + "resolveJsonModule": true /* Enable importing .json files */, + // "noResolve": true, /* Disallow `import`s, `require`s or ``s from expanding the number of files TypeScript should add to a project. */ + + /* JavaScript Support */ + // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */ + // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ + // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */ + + /* Emit */ + "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ + // "declarationMap": true, /* Create sourcemaps for d.ts files. */ + // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ + // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ + // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */ + "outDir": "./es", /* Specify an output folder for all emitted files. */ + // "removeComments": true, /* Disable emitting comments. */ + // "noEmit": true, /* Disable emitting files from a compilation. */ + // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ + // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types */ + // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ + // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ + // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ + // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ + // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ + // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ + // "newLine": "crlf", /* Set the newline character for emitting files. */ + // "stripInternal": true, /* Disable emitting declarations that have `@internal` in their JSDoc comments. */ + // "noEmitHelpers": true, /* Disable generating custom helper functions like `__extends` in compiled output. */ + // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ + // "preserveConstEnums": true, /* Disable erasing `const enum` declarations in generated code. */ + // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ + // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ + + /* Interop Constraints */ + // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ + // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ + "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */, + // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ + "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */, + + /* Type Checking */ + "strict": false /* Enable all strict type-checking options. */, + // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied `any` type.. */ + // "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */ + // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ + // "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */ + // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ + // "noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */ + // "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */ + // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ + // "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */ + // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */ + // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ + // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ + // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ + // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ + // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ + // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */ + // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ + // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ + + /* Completeness */ + // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ + "skipLibCheck": true /* Skip type checking all .d.ts files. */ }, - "include": ["src"] + "include": ["src"], + "exclude": ["src/dev-config/*"] } From c6a8fb3639ee30fb758897a207138f0c518a9f23 Mon Sep 17 00:00:00 2001 From: jingyu Date: Tue, 16 May 2023 19:25:10 +0800 Subject: [PATCH 17/83] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E5=8F=91?= =?UTF-8?q?=E5=B8=83=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/plugin-multiple-editor/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-multiple-editor/package.json b/packages/plugin-multiple-editor/package.json index 0c79b6a..1b5c99f 100644 --- a/packages/plugin-multiple-editor/package.json +++ b/packages/plugin-multiple-editor/package.json @@ -174,6 +174,6 @@ "es" ], "fastPublish": { - "npmClient": "tnpm" + "npmClient": "npm" } } From e995f116ef47263c66838a367db5447733acc311 Mon Sep 17 00:00:00 2001 From: jingyu Date: Tue, 16 May 2023 19:23:33 +0800 Subject: [PATCH 18/83] =?UTF-8?q?feat:=20=E4=BF=AE=E5=A4=8D=E6=9E=84?= =?UTF-8?q?=E5=BB=BA=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/plugin-multiple-editor/.eslintrc.js | 42 +++++++ packages/plugin-multiple-editor/package.json | 4 +- .../plugin-multiple-editor/src/Controller.ts | 38 +++--- .../delete-hidden-transducer/index.ts | 10 +- .../sample-plugins/set-ref-prop/index.tsx | 12 +- .../src/dev-config/universal/plugin.tsx | 15 ++- .../src/dev-config/universal/utils.ts | 4 +- packages/plugin-multiple-editor/src/index.tsx | 6 +- .../plugin-multiple-editor/src/types/index.ts | 4 +- .../plugin-multiple-editor/src/utils/code.ts | 11 +- .../src/utils/get-methods.ts | 2 +- packages/plugin-multiple-editor/tsconfig.json | 111 ++++++++++++++++-- 12 files changed, 184 insertions(+), 75 deletions(-) create mode 100644 packages/plugin-multiple-editor/.eslintrc.js 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/package.json b/packages/plugin-multiple-editor/package.json index 7c537aa..0c79b6a 100644 --- a/packages/plugin-multiple-editor/package.json +++ b/packages/plugin-multiple-editor/package.json @@ -98,10 +98,10 @@ "postcss-normalize": "^10.0.1", "postcss-preset-env": "^7.0.1", "prompts": "^2.4.2", - "react": "^17.0.2", + "react": "*", "react-app-polyfill": "^3.0.0", "react-dev-utils": "^12.0.0", - "react-dom": "^17.0.2", + "react-dom": "*", "react-refresh": "^0.11.0", "resolve": "^1.20.0", "resolve-url-loader": "^4.0.0", diff --git a/packages/plugin-multiple-editor/src/Controller.ts b/packages/plugin-multiple-editor/src/Controller.ts index 112ddde..cce1d56 100644 --- a/packages/plugin-multiple-editor/src/Controller.ts +++ b/packages/plugin-multiple-editor/src/Controller.ts @@ -1,6 +1,5 @@ import type { Project, Event } from '@alilc/lowcode-shell'; -import { ProjectSchema } from '@alilc/lowcode-types'; -import { skeleton } from '@alilc/lowcode-engine'; +import { skeleton, common } from '@alilc/lowcode-engine'; import { beautifyCSS, compatGetSourceCodeMap, @@ -11,7 +10,6 @@ import { treeToMap, } from './utils'; import { FunctionEventParams, Monaco, ObjectType } from './types'; -import { common } from '@alilc/lowcode-engine'; import type { editor } from 'monaco-editor'; import { addFunction, @@ -29,7 +27,7 @@ export * from './EditorHook'; export interface EditorControllerState { declarationsMap: Record; - extraLibs: { path: string; content: string }[]; + extraLibs: Array<{ path: string; content: string }>; } export type HookHandleFn = (fn: T) => () => void; @@ -51,7 +49,7 @@ export class EditorController extends EditorHook { defaultFiles: ObjectType; - public monaco?: Monaco; + monaco?: Monaco; private codeTemp?: CodeTemp; @@ -61,20 +59,20 @@ export class EditorController extends EditorHook { private state: EditorControllerState; - public codeEditor?: editor.IStandaloneCodeEditor; + codeEditor?: editor.IStandaloneCodeEditor; private codeEditorCtx?: EditorContextType; - public service!: Service; + service!: Service; - public onImportSchema: HookHandleFn< - (schema: ProjectSchema) => void | Promise - > = this.hookFactory(HookKeys.onImport); + onImportSchema: HookHandleFn<(schema: any) => void | Promise> = + this.hookFactory(HookKeys.onImport); - public onSourceCodeChange: HookHandleFn<(code: any) => void> = - this.hookFactory(HookKeys.onSourceCodeChange); + onSourceCodeChange: HookHandleFn<(code: any) => void> = this.hookFactory( + HookKeys.onSourceCodeChange + ); - public onEditCodeChange: HookHandleFn< + onEditCodeChange: HookHandleFn< (code: { content: string; file: string }) => void > = this.hookFactory(HookKeys.onEditCodeChange); @@ -124,7 +122,7 @@ export class EditorController extends EditorHook { this.applyLibs(); } - addComponentDeclarations(list: [string, string][] = []) { + addComponentDeclarations(list: Array<[string, string]> = []) { for (const [key, dec] of list) { this.state.declarationsMap[key] = dec; } @@ -133,7 +131,7 @@ export class EditorController extends EditorHook { } private publishExtraLib() { - const libs: { path: string; content: string }[] = []; + const libs: Array<{ path: string; content: string }> = []; this.extraLibMap.forEach((content, path) => libs.push({ content, path })); this.state.extraLibs = libs; this.publish(); @@ -156,7 +154,7 @@ export class EditorController extends EditorHook { const { getMonaco } = await import( '@alilc/lowcode-plugin-base-monaco-editor' ); - this.monaco = await getMonaco(undefined); + this.monaco = await getMonaco(undefined) as any; } const decStr = Object.keys(this.state.declarationsMap).reduce( (v, k) => `${v}\n${k}: ${this.state.declarationsMap[k]};\n`, @@ -175,7 +173,7 @@ export class EditorController extends EditorHook { }); } - getSchema(pure?: boolean): ProjectSchema { + getSchema(pure?: boolean): any { const schema = this.project.exportSchema( common.designerCabin.TransformStage.Save ); @@ -192,7 +190,7 @@ export class EditorController extends EditorHook { return schema; } - importSchema(schema: ProjectSchema) { + importSchema(schema: any) { this.project.importSchema(schema); this.initCodeTempBySchema(schema); this.triggerHook(HookKeys.onImport, schema); @@ -219,7 +217,7 @@ export class EditorController extends EditorHook { }; } - public initCodeTempBySchema(schema: ProjectSchema) { + initCodeTempBySchema(schema: any) { const componentSchema = schema.componentsTree[0] || {}; const { css, methods, state, lifeCycles } = componentSchema; const codeMap = (componentSchema as any)._sourceCodeMap; @@ -343,7 +341,7 @@ export class EditorController extends EditorHook { return true; } - public resetSaveStatus() { + resetSaveStatus() { this.codeEditorCtx?.updateState({ modifiedKeys: [] }); } 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 index 9382a1b..921cd03 100644 --- 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 @@ -1,14 +1,14 @@ -import { ILowCodePluginContext, project } from '@alilc/lowcode-engine'; -import { CompositeObject, TransformStage } from '@alilc/lowcode-types'; +import { project } from '@alilc/lowcode-engine'; +import { IPublicEnumTransformStage } from '@alilc/lowcode-types'; -export const deleteHiddenTransducer = (ctx: ILowCodePluginContext) => { +export const deleteHiddenTransducer = (ctx: any) => { return { name: 'deleteHiddenTransducer', async init() { - project.addPropsTransducer((props: CompositeObject): CompositeObject => { + project.addPropsTransducer((props: any): any => { delete props.hidden; return props; - }, TransformStage.Save); + }, IPublicEnumTransformStage.Save); }, }; } 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 index 7a8efbd..b85e750 100644 --- 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 @@ -1,11 +1,7 @@ -import { - TransformedComponentMetadata, - FieldConfig, -} from '@alilc/lowcode-types'; import { v4 as uuidv4 } from 'uuid'; import { material } from '@alilc/lowcode-engine'; -function addonCombine(metadata: TransformedComponentMetadata) { +function addonCombine(metadata: any) { const { componentName, configure = {} } = metadata; const isRoot: boolean = @@ -15,9 +11,9 @@ function addonCombine(metadata: TransformedComponentMetadata) { return metadata; } - let advancedGroup: FieldConfig | undefined; + let advancedGroup: any | undefined; - const refItem: FieldConfig = { + const refItem: any = { title: { label: 'refId', tip: '用于获取组件实例，调用物料内部方法', @@ -57,7 +53,7 @@ function addonCombine(metadata: TransformedComponentMetadata) { advancedGroup.items = [refItem]; } - const advanceItems: FieldConfig[] = advancedGroup.items || []; + const advanceItems: any[] = advancedGroup.items || []; if ( !advanceItems || diff --git a/packages/plugin-multiple-editor/src/dev-config/universal/plugin.tsx b/packages/plugin-multiple-editor/src/dev-config/universal/plugin.tsx index 440b5f7..c55ddff 100644 --- a/packages/plugin-multiple-editor/src/dev-config/universal/plugin.tsx +++ b/packages/plugin-multiple-editor/src/dev-config/universal/plugin.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { - ILowCodePluginContext, plugins, skeleton, project, @@ -41,7 +40,7 @@ export default async function registerPlugins() { SchemaPlugin.pluginName = 'SchemaPlugin'; await plugins.register(SchemaPlugin); - const editorInit = (ctx: ILowCodePluginContext) => { + const editorInit = (ctx: any) => { return { name: 'editor-init', async init() { @@ -66,7 +65,7 @@ export default async function registerPlugins() { editorInit.pluginName = 'editorInit'; await plugins.register(editorInit); - const builtinPluginRegistry = (ctx: ILowCodePluginContext) => { + const builtinPluginRegistry = (ctx: any) => { return { name: 'builtin-plugin-registry', async init() { @@ -110,7 +109,7 @@ export default async function registerPlugins() { await plugins.register(builtinPluginRegistry); // 设置内置 setter 和事件绑定、插件绑定面板 - const setterRegistry = (ctx: ILowCodePluginContext) => { + const setterRegistry = (ctx: any) => { const { setterMap, pluginMap } = AliLowCodeEngineExt; return { name: 'ext-setters-registry', @@ -145,7 +144,7 @@ export default async function registerPlugins() { // 注册中英文切换 await plugins.register(ZhEnPlugin); - const loadAssetsSample = (ctx: ILowCodePluginContext) => { + const loadAssetsSample = (ctx: any) => { return { name: 'loadAssetsSample', async init() { @@ -170,7 +169,7 @@ export default async function registerPlugins() { await plugins.register(loadAssetsSample); // 注册保存面板 - const saveSample = (ctx: ILowCodePluginContext) => { + const saveSample = (ctx: any) => { return { name: 'saveSample', async init() { @@ -204,7 +203,7 @@ export default async function registerPlugins() { saveSample.pluginName = 'saveSample'; await plugins.register(saveSample); - const previewSample = (ctx: ILowCodePluginContext) => { + const previewSample = (ctx: any) => { return { name: 'previewSample', async init() { @@ -228,7 +227,7 @@ export default async function registerPlugins() { previewSample.pluginName = 'previewSample'; await plugins.register(previewSample); - const customSetter = (ctx: ILowCodePluginContext) => { + const customSetter = (ctx: any) => { return { name: '___registerCustomSetter___', async init() { diff --git a/packages/plugin-multiple-editor/src/dev-config/universal/utils.ts b/packages/plugin-multiple-editor/src/dev-config/universal/utils.ts index e952c6a..e6e3af7 100644 --- a/packages/plugin-multiple-editor/src/dev-config/universal/utils.ts +++ b/packages/plugin-multiple-editor/src/dev-config/universal/utils.ts @@ -1,7 +1,7 @@ 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'; +import { IPublicEnumTransformStage } from '@alilc/lowcode-types'; export const loadIncrementalAssets = () => { material?.onChangeAssets(() => { @@ -252,7 +252,7 @@ const setProjectSchemaToLocalStorage = (scenarioName: string) => { } window.localStorage.setItem( getLSName(scenarioName), - JSON.stringify(project.exportSchema(TransformStage.Save)) + JSON.stringify(project.exportSchema(IPublicEnumTransformStage.Save)) ); }; diff --git a/packages/plugin-multiple-editor/src/index.tsx b/packages/plugin-multiple-editor/src/index.tsx index 630a06a..117870b 100644 --- a/packages/plugin-multiple-editor/src/index.tsx +++ b/packages/plugin-multiple-editor/src/index.tsx @@ -1,8 +1,4 @@ import { project, editor } from '@alilc/lowcode-engine'; -import type { - ILowCodePluginConfig, - ILowCodePluginContext, -} from '@alilc/lowcode-engine'; import { controller as baseController } from '@alilc/lowcode-plugin-base-monaco-editor/es/controller'; import { EditorProvider } from './Context'; import MultipleFileEditor from './MultipleFileEditor'; @@ -26,7 +22,7 @@ const pluginCodeEditor = ( defaultFiles?: Record; } = {} ) => { - const plugin = (ctx: ILowCodePluginContext): ILowCodePluginConfig => { + const plugin = (ctx: any): any => { return { exports: () => ({}), init() { diff --git a/packages/plugin-multiple-editor/src/types/index.ts b/packages/plugin-multiple-editor/src/types/index.ts index 664f73e..4682325 100644 --- a/packages/plugin-multiple-editor/src/types/index.ts +++ b/packages/plugin-multiple-editor/src/types/index.ts @@ -1,9 +1,7 @@ -import { JSExpression } from '@alilc/lowcode-types'; - export type Monaco = typeof import('monaco-editor/esm/vs/editor/editor.api'); export type ObjectType = Record; -export interface IState extends JSExpression { +export interface IState { originCode?: string; } diff --git a/packages/plugin-multiple-editor/src/utils/code.ts b/packages/plugin-multiple-editor/src/utils/code.ts index dd10a96..796f89d 100644 --- a/packages/plugin-multiple-editor/src/utils/code.ts +++ b/packages/plugin-multiple-editor/src/utils/code.ts @@ -1,10 +1,3 @@ -import { - isJSExpression, - ProjectSchema, - RootSchema, - JSFunction, - JSExpression, -} from '@alilc/lowcode-types'; // @ts-ignore import prettier from 'prettier/esm/standalone.mjs'; import parserBabel from 'prettier/parser-babel'; @@ -30,7 +23,7 @@ const prettierCssConfig = { printWidth: 120, // 超过120个字符强制换行 }; -export const initCode = (componentSchema: RootSchema | undefined) => { +export const initCode = (componentSchema: any | undefined) => { return ( (componentSchema as any)?.originCode || `export default class LowcodeComponent extends Component { @@ -79,6 +72,6 @@ export const beautifyCSS = (input: string, options: any): string => { }; // schema转换为CSS代码 -export const schema2CssCode = (schema: ProjectSchema, prettierOptions: any) => { +export const schema2CssCode = (schema: any, prettierOptions: any) => { return beautifyCSS(schema.componentsTree[0]?.css || '', prettierOptions); }; diff --git a/packages/plugin-multiple-editor/src/utils/get-methods.ts b/packages/plugin-multiple-editor/src/utils/get-methods.ts index 1d51709..4d3b760 100644 --- a/packages/plugin-multiple-editor/src/utils/get-methods.ts +++ b/packages/plugin-multiple-editor/src/utils/get-methods.ts @@ -111,7 +111,7 @@ export const getMethods = (fileContent: string) => { ?.code; const compiledCode = pureTranspile(codeStr, { esm: true }); state[ - (property.key as Identifier).name ?? property?.key?.extra?.rawValue + (property.key as Identifier).name ?? property?.key?.extra?.rawValue as string ] = { type: 'JSExpression', value: compiledCode.replace(/var *name *= */, '').replace(/;$/, ''), diff --git a/packages/plugin-multiple-editor/tsconfig.json b/packages/plugin-multiple-editor/tsconfig.json index 8c6bf06..c820ed9 100644 --- a/packages/plugin-multiple-editor/tsconfig.json +++ b/packages/plugin-multiple-editor/tsconfig.json @@ -1,22 +1,109 @@ { - "extends": "../../tsconfig.json", "compilerOptions": { - "rootDir": "./src", - "baseUrl": "./", - "outDir": "./es", - "moduleResolution": "node", - "declaration": true, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "module": "es2020", - "target": "ES5", + /* Visit https://aka.ms/tsconfig.json to read more about this file */ + + /* Projects */ + // "incremental": true, /* Enable incremental compilation */ + // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ + // "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */ + // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */ + // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ + // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ + + /* Language and Environment */ + "target": "ES5" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */, + // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ + "jsx": "react" /* Specify what JSX code is generated. */, + "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ + "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ + // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */ + // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ + // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */ + // "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */ + // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ + // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ + + /* Modules */ + "module": "ES2020" /* Specify what module code is generated. */, + "rootDir": "./src", /* Specify the root folder within your source files. */ + "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ + "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ "paths": { "@/*": ["./src/*"], "utils": ["./src/utils"], "utils/*": ["./src/utils/*"], "types": ["./src/types"], "types/*": ["./src/types/*"] - } + }, /* Specify a set of entries that re-map imports to additional lookup locations. */ + // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ + // "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */ + // "types": [], /* Specify type package names to be included without being referenced in a source file. */ + // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ + "resolveJsonModule": true /* Enable importing .json files */, + // "noResolve": true, /* Disallow `import`s, `require`s or ``s from expanding the number of files TypeScript should add to a project. */ + + /* JavaScript Support */ + // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */ + // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ + // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */ + + /* Emit */ + "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ + // "declarationMap": true, /* Create sourcemaps for d.ts files. */ + // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ + // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ + // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */ + "outDir": "./es", /* Specify an output folder for all emitted files. */ + // "removeComments": true, /* Disable emitting comments. */ + // "noEmit": true, /* Disable emitting files from a compilation. */ + // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ + // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types */ + // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ + // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ + // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ + // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ + // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ + // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ + // "newLine": "crlf", /* Set the newline character for emitting files. */ + // "stripInternal": true, /* Disable emitting declarations that have `@internal` in their JSDoc comments. */ + // "noEmitHelpers": true, /* Disable generating custom helper functions like `__extends` in compiled output. */ + // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ + // "preserveConstEnums": true, /* Disable erasing `const enum` declarations in generated code. */ + // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ + // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ + + /* Interop Constraints */ + // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ + // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ + "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */, + // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ + "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */, + + /* Type Checking */ + "strict": false /* Enable all strict type-checking options. */, + // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied `any` type.. */ + // "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */ + // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ + // "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */ + // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ + // "noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */ + // "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */ + // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ + // "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */ + // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */ + // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ + // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ + // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ + // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ + // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ + // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */ + // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ + // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ + + /* Completeness */ + // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ + "skipLibCheck": true /* Skip type checking all .d.ts files. */ }, - "include": ["src"] + "include": ["src"], + "exclude": ["src/dev-config/*"] } From 30e8a3de7e8d4805a30ea625417e86cee1b5af66 Mon Sep 17 00:00:00 2001 From: jingyu Date: Tue, 16 May 2023 19:25:10 +0800 Subject: [PATCH 19/83] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E5=8F=91?= =?UTF-8?q?=E5=B8=83=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/plugin-multiple-editor/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-multiple-editor/package.json b/packages/plugin-multiple-editor/package.json index 0c79b6a..1b5c99f 100644 --- a/packages/plugin-multiple-editor/package.json +++ b/packages/plugin-multiple-editor/package.json @@ -174,6 +174,6 @@ "es" ], "fastPublish": { - "npmClient": "tnpm" + "npmClient": "npm" } } From cb75029601098ee395963105cdeaaaf949f53b37 Mon Sep 17 00:00:00 2001 From: peterlevel1 <1785103669@qq.com> Date: Thu, 8 Jun 2023 02:24:58 +0800 Subject: [PATCH 20/83] refactor(action-block): remove log for html2canvas and node - html2canvas: https://html2canvas.hertzen.com/ - node: type Node = designerCabin.Node --- packages/action-block/src/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 +}; From 46f842db183bbd3d7cebd9e8f22683032b5bf9e5 Mon Sep 17 00:00:00 2001 From: JackLian Date: Thu, 8 Jun 2023 09:50:27 +0800 Subject: [PATCH 21/83] chore(action-block): publish 1.0.1 --- packages/action-block/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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" } From 25a72d6e3adeb1e2ae5ef4ac0373c72ca828da92 Mon Sep 17 00:00:00 2001 From: AndyJin Date: Tue, 1 Aug 2023 11:22:58 +0800 Subject: [PATCH 22/83] fix: remove event listener for document and history (#76) --- packages/plugin-undo-redo/package.json | 2 +- packages/plugin-undo-redo/src/index.tsx | 16 +++++++++++----- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/plugin-undo-redo/package.json b/packages/plugin-undo-redo/package.json index 670306a..c456f11 100644 --- a/packages/plugin-undo-redo/package.json +++ b/packages/plugin-undo-redo/package.json @@ -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" }, diff --git a/packages/plugin-undo-redo/src/index.tsx b/packages/plugin-undo-redo/src/index.tsx index d4f6673..e9c1efb 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 { Button, Icon } from '@alifd/next'; -import { PluginProps } from '@alilc/lowcode-types'; +import { PluginProps, IPublicTypeDisposable } 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 ( From 21b03c9cbed18c04f3e5ff4d671005bd13d77af2 Mon Sep 17 00:00:00 2001 From: JackLian Date: Tue, 1 Aug 2023 11:26:52 +0800 Subject: [PATCH 23/83] chore(undo-redo): publish 1.0.1 --- packages/plugin-undo-redo/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-undo-redo/package.json b/packages/plugin-undo-redo/package.json index c456f11..36e04e6 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", From 9fff9d69b5d6eeafccd7d8091abc3b68ec332c08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=83=96=E4=B8=81?= <339341037@qq.com> Date: Wed, 16 Aug 2023 17:32:25 +0800 Subject: [PATCH 24/83] fix(code-editor): fixed @babel/preset-env version (7.22.9) in the @babel/preset-env version @7.22.10 version, changed the introduction method of plugin-syntax-xxxxxx. Causing the new version to be unusable.(https://github.com/babel/babel/commit/6b91b9b2af22251fe04f0b6f1d8f74c18a414a10#diff-2281f56422073bffd4b039230999ad8fe300fa0ce0fe9af45580695488c82f68) --- packages/plugin-code-editor/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-code-editor/package.json b/packages/plugin-code-editor/package.json index f28ab93..e0802fe 100644 --- a/packages/plugin-code-editor/package.json +++ b/packages/plugin-code-editor/package.json @@ -24,7 +24,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", From 74a5ea041e22c7a0fe93ee17b9d03b3ec801598d Mon Sep 17 00:00:00 2001 From: JackLian Date: Thu, 17 Aug 2023 09:36:28 +0800 Subject: [PATCH 25/83] chore(plugin-code-editor): publish 1.0.8 --- packages/plugin-code-editor/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-code-editor/package.json b/packages/plugin-code-editor/package.json index e0802fe..7b4cf9d 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.7", + "version": "1.0.8", "description": "CodeEditor", "files": [ "es", From 251534cdff6075acfa071cb881e635c1e1fb68de Mon Sep 17 00:00:00 2001 From: liujuping Date: Fri, 25 Aug 2023 15:16:02 +0800 Subject: [PATCH 26/83] feat: add worskapces plugins --- package.json | 2 +- packages/base-monaco-editor/package.json | 1 + packages/plugin-code-editor/package.json | 1 + packages/plugin-manual/package.json | 1 + packages/plugin-resource-tabs/CHANGELOG.md | 3 + packages/plugin-resource-tabs/README.md | 39 +++ packages/plugin-resource-tabs/build.json | 20 ++ packages/plugin-resource-tabs/package.json | 44 +++ packages/plugin-resource-tabs/src/icon.tsx | 50 +++ packages/plugin-resource-tabs/src/index.scss | 58 ++++ packages/plugin-resource-tabs/src/index.tsx | 325 ++++++++++++++++++ packages/plugin-resource-tabs/tsconfig.json | 9 + packages/plugin-schema/package.json | 1 + packages/plugin-set-ref-prop/package.json | 1 + packages/plugin-simulator-size/package.json | 6 +- packages/plugin-simulator-size/src/index.tsx | 12 +- packages/plugin-undo-redo/package.json | 1 + .../plugin-view-manager-pane/CHANGELOG.md | 3 + packages/plugin-view-manager-pane/README.md | 25 ++ packages/plugin-view-manager-pane/build.json | 20 ++ .../plugin-view-manager-pane/package.json | 44 +++ .../src/components/addFile/behaviors.tsx | 91 +++++ .../src/components/addFile/index.scss | 22 ++ .../src/components/addFile/index.tsx | 56 +++ .../src/components/resourceTree/icon.tsx | 49 +++ .../src/components/resourceTree/index.scss | 149 ++++++++ .../src/components/resourceTree/index.tsx | 288 ++++++++++++++++ .../plugin-view-manager-pane/src/icon.tsx | 69 ++++ .../plugin-view-manager-pane/src/index.scss | 41 +++ .../plugin-view-manager-pane/src/index.tsx | 116 +++++++ .../plugin-view-manager-pane/src/pane.tsx | 49 +++ .../plugin-view-manager-pane/tsconfig.json | 9 + packages/plugin-zh-en/package.json | 1 + 33 files changed, 1601 insertions(+), 5 deletions(-) create mode 100644 packages/plugin-resource-tabs/CHANGELOG.md create mode 100644 packages/plugin-resource-tabs/README.md create mode 100644 packages/plugin-resource-tabs/build.json create mode 100644 packages/plugin-resource-tabs/package.json create mode 100644 packages/plugin-resource-tabs/src/icon.tsx create mode 100644 packages/plugin-resource-tabs/src/index.scss create mode 100644 packages/plugin-resource-tabs/src/index.tsx create mode 100644 packages/plugin-resource-tabs/tsconfig.json create mode 100644 packages/plugin-view-manager-pane/CHANGELOG.md create mode 100644 packages/plugin-view-manager-pane/README.md create mode 100644 packages/plugin-view-manager-pane/build.json create mode 100644 packages/plugin-view-manager-pane/package.json create mode 100644 packages/plugin-view-manager-pane/src/components/addFile/behaviors.tsx create mode 100644 packages/plugin-view-manager-pane/src/components/addFile/index.scss create mode 100644 packages/plugin-view-manager-pane/src/components/addFile/index.tsx create mode 100644 packages/plugin-view-manager-pane/src/components/resourceTree/icon.tsx create mode 100644 packages/plugin-view-manager-pane/src/components/resourceTree/index.scss create mode 100644 packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx create mode 100644 packages/plugin-view-manager-pane/src/icon.tsx create mode 100644 packages/plugin-view-manager-pane/src/index.scss create mode 100644 packages/plugin-view-manager-pane/src/index.tsx create mode 100644 packages/plugin-view-manager-pane/src/pane.tsx create mode 100644 packages/plugin-view-manager-pane/tsconfig.json diff --git a/package.json b/package.json index 58231d4..8fe9b05 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": { diff --git a/packages/base-monaco-editor/package.json b/packages/base-monaco-editor/package.json index 5a684ff..6dfa41a 100644 --- a/packages/base-monaco-editor/package.json +++ b/packages/base-monaco-editor/package.json @@ -3,6 +3,7 @@ "version": "1.1.2", "description": "代码编辑组件，monaco-editor 的低代码适配封装", "publishConfig": { + "registry": "https://registry.npmjs.org/", "access": "public" }, "files": [ diff --git a/packages/plugin-code-editor/package.json b/packages/plugin-code-editor/package.json index 7b4cf9d..5b03f02 100644 --- a/packages/plugin-code-editor/package.json +++ b/packages/plugin-code-editor/package.json @@ -17,6 +17,7 @@ "build": "build-scripts build --config build.js" }, "publishConfig": { + "registry": "https://registry.npmjs.org/", "access": "public" }, "dependencies": { 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-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..7d84569 --- /dev/null +++ b/packages/plugin-resource-tabs/package.json @@ -0,0 +1,44 @@ +{ + "name": "@alilc/lowcode-plugin-resource-tabs", + "version": "1.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.0.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", + "@types/react": "^16.9.13", + "@types/react-dom": "^16.9.4", + "build-plugin-fusion": "^0.1.22", + "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-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..ea331e0 --- /dev/null +++ b/packages/plugin-resource-tabs/src/icon.tsx @@ -0,0 +1,50 @@ +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..e3d70bc --- /dev/null +++ b/packages/plugin-resource-tabs/src/index.scss @@ -0,0 +1,58 @@ +.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 { + position: relative; + top: 2px; + margin-right: 2px; + } + + &-changed-icon { + display: block; + width: 5px; + height: 5px; + border-radius: 100%; + background-color: var(--color-brand1-6, #006aff); + margin: 0 auto; + } + + &-title { + max-width: 100px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &-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..1545141 --- /dev/null +++ b/packages/plugin-resource-tabs/src/index.tsx @@ -0,0 +1,325 @@ +import { Tab, Dialog } from '@alifd/next'; +import { IPublicModelPluginContext, IPublicModelResource, IPublicModelWindow, IPublicTypePlugin } from '@alilc/lowcode-types'; +import React from 'react'; +import { useState, useEffect, useCallback } from 'react'; +import './index.scss'; +import { CloseIcon, LockIcon, WarnIcon } from './icon'; + +function CustomTabItem(props: { + icon: any; + title: string; + onClose: () => void; + key: string; + ctx: IPublicModelPluginContext; + id: string; +}) { + const { id: propsId } = props; + const { event } = props.ctx; + const [changed, setChanged] = useState(false); + const [locked, setLocked] = useState(false); + const [warned, setWarned] = useState(false); + const [title, setTitle] = useState(props.title); + 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 ResourceIcon = props.icon; + return ( +
+
+ { ResourceIcon ? : null } +
+
{ title }
+
+
{ + e.stopPropagation(); + if (changed) { + Dialog.show({ + v2: true, + title: "警告", + content: "当前窗口有还未保存的改动，是否要舍弃变更", + onOk: () => {}, + onCancel: () => { + props.onClose(); + }, + cancelProps: { + children: '舍弃变更' + }, + okProps: { + children: '继续编辑', + } + }); + return; + } + props.onClose(); + }} + className='resource-tab-item-close-icon' + > + +
+
+ { + changed && !warned ? () : null + } + { + locked ? () : null + } + { + warned ? () : null + } +
+
+
+ ) +} + +interface ITabItem { + id: string; + windowId: string; +} + +function Content(props: { + ctx: IPublicModelPluginContext; + appKey?: string; + onSort?: (windows: IPublicModelWindow[]) => IPublicModelWindow[]; + shape?: 'pure' | 'wrapped' | 'text' | 'capsule'; + tabClassName?: string; +}) { + const { ctx } = props; + const { workspace } = ctx; + + const [resourceListMap, setResourceListMap] = useState<{ + [key: string]: IPublicModelResource; + }>({}); + + const getTabs = useCallback((): ITabItem[] => { + let windows = workspace.windows; + if (props.onSort) { + windows = props.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___' + props.appKey, JSON.stringify(getTabs())); + localStorage.setItem('___lowcode_plugin_resource_tabs_active_title___' + props.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 = {}; + 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___' + props.appKey)); + const activeValue: { + id: string; + } = JSON.parse(localStorage.getItem('___lowcode_plugin_resource_tabs_active_title___' + props.appKey)); + + 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]; + resource && workspace.openEditorWindow(resource); + } + } catch(e) { + console.error(e); + } + }, [resourceListMap]); + + return ( + void; + value: string; + }) => ( + + )} + 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 ( + { + (workspace as any).removeEditorWindow(resource); + }} + /> + ) + })} + + ) +} + +const resourceTabs: IPublicTypePlugin = function (ctx: IPublicModelPluginContext, options: { + appKey?: string; + onSort?: (windows: IPublicModelWindow[]) => IPublicModelWindow[]; + shape?: string; + tabClassName?: string; +}) { + const { + skeleton, + } = ctx; + return { + async init() { + skeleton.add({ + area: 'subTopArea', + type: 'Widget', + name: 'resourceTabs', + props: { + align: 'left', + width: 800, + }, + index: -1, + content: Content, + contentProps: { + ctx, + appKey: options?.appKey, + onSort: options?.onSort, + shape: options?.shape, + tabClassName: options?.tabClassName + }, + }); + } + } +} + +resourceTabs.pluginName = 'resourceTabs'; + +resourceTabs.meta = { + preferenceDeclaration: { + title: '应用标签栏插件参数定义', + properties: [ + { + key: 'appKey', + type: 'string', + description: '唯一标识，用于缓存应用 Tab', + }, + { + key: 'onSort', + type: 'function', + description: 'tabs sort function', + }, + { + key: 'shape', + type: 'string', + description: 'Tab shape' + }, + { + key: 'tabClassName', + type: 'string', + description: 'Tab className', + } + ] + } +} + +export default resourceTabs; \ No newline at end of file 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-undo-redo/package.json b/packages/plugin-undo-redo/package.json index 36e04e6..c6d3430 100644 --- a/packages/plugin-undo-redo/package.json +++ b/packages/plugin-undo-redo/package.json @@ -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-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..2084ea4 --- /dev/null +++ b/packages/plugin-view-manager-pane/package.json @@ -0,0 +1,44 @@ +{ + "name": "@alilc/lowcode-plugin-view-manager-pane", + "version": "1.0.0", + "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-utils": "^1.0.0", + "@alilc/lowcode-types": "^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", + "@types/react": "^16.9.13", + "@types/react-dom": "^16.9.4", + "build-plugin-fusion": "^0.1.22", + "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..64edf16 --- /dev/null +++ b/packages/plugin-view-manager-pane/src/components/addFile/behaviors.tsx @@ -0,0 +1,91 @@ +import React from "react"; +import { Balloon } from '@alifd/next'; +import { IPublicModelResource } from '@alilc/lowcode-types'; +import { OthersIcon } from "../resourceTree/icon"; +import { IOptions } from "../.."; + +export function Behaviors(props: { + resource: IPublicModelResource; + options: IOptions; + showBehaviors: boolean; + onVisibleChange: any; + safeNode: any; +}) { + const { description, name } = props.resource; + let behaviors = []; + if (name === 'lowcode') { + props.options?.onEditComponent && behaviors.push('edit'); + props.options?.onCopyComponent && behaviors.push('copy'); + props.options?.onDeleteComponent && behaviors.push('delete'); + } else if (name === 'page') { + props.options?.onEditPage && behaviors.push('edit'); + props.options?.onCopyPage && behaviors.push('copy'); + props.options?.onDeletePage && behaviors.push('delete'); + } + + if (!behaviors.length) { + return null; + } + + return ( + { + e.stopPropagation(); + e.preventDefault(); + }}> + +
+ )} + triggerType="click" + align='bl' + popupClassName='view-pane-popup' + closable={false} + visible={props.showBehaviors} + safeNode={props.safeNode} + onVisibleChange={props.onVisibleChange} + > + { + behaviors.map(d => { + let text, handleLowcodeClick, handlePageClick; + switch(d) { + case 'edit': + text = `${description}设置`; + handleLowcodeClick = props.options?.onEditComponent; + handlePageClick = props.options?.onEditPage; + break; + case 'copy': + text = `复制${description}`; + handleLowcodeClick = props.options?.onCopyComponent; + handlePageClick = props.options?.onCopyPage; + break; + case 'delete': + text = `删除${description}`; + handleLowcodeClick = props.options?.onDeleteComponent; + handlePageClick = props.options?.onDeletePage; + break; + } + + return ( +
{ + e.stopPropagation(); + e.preventDefault(); + props.onVisibleChange(false); + if (name === 'lowcode') { + handleLowcodeClick(props.resource); + } else { + handlePageClick(props.resource); + } + }} + className='view-pane-popup-item' + > + {text} +
+ ) + }) + } + + ) +} \ No newline at end of file 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..e905640 --- /dev/null +++ b/packages/plugin-view-manager-pane/src/components/addFile/index.scss @@ -0,0 +1,22 @@ +.next-overlay-wrapper .next-overlay-inner.view-pane-popup { + padding: 6px 0; + background-color: #fff; + box-shadow: 0 0 6px 0 rgba(0,0,0,0.44); + border-radius: 2px; + + &::after { + display: none; + } + + .view-pane-popup-item { + width: 130px; + height: 28px; + line-height: 28px; + padding: 0 12px; + cursor: pointer; + + &:hover { + background-color: var(--color-fill1-2, #f1f3f6); + } + } +} 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..eb43343 --- /dev/null +++ b/packages/plugin-view-manager-pane/src/components/addFile/index.tsx @@ -0,0 +1,56 @@ +import { Balloon } from '@alifd/next'; +import * as React from 'react'; +import { observer } from "mobx-react" +import { AddIcon } from '../../icon'; +import { IOptions } from '../..'; + +import './index.scss'; + +function AddFileComponent(props: { + options: IOptions; +}) { + if (!props.options?.onAddPage && !props.options?.onAddComponent) { + return null; + } + + return ( + <> + } + triggerType="click" + align='bl' + popupClassName='view-pane-popup' + closable={false} + > + { + props.options.onAddPage ? ( +
{ + props.options.onAddPage(); + }} + className='view-pane-popup-item' + > + 新建页面 +
+ ) : null + } + + { + props.options.onAddComponent ? ( +
{ + props.options.onAddComponent(); + }} + > + 新建组件 +
+ ) : null + } + + + ) +} + +export const AddFile = observer(AddFileComponent); \ No newline at end of file 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..35ee0a0 --- /dev/null +++ b/packages/plugin-view-manager-pane/src/components/resourceTree/icon.tsx @@ -0,0 +1,49 @@ +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..fb754bd --- /dev/null +++ b/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss @@ -0,0 +1,149 @@ +.resource-tree { + position: absolute; + left: 11px; + right: 11px; + bottom: 0; + top: 90px; + overflow: scroll; + + &-group { + fill: var(--color-data1-1, #5894ff); + + & > .resource-tree-group-item { + padding-left: 14px; + } + + &-wrap { + display: flex; + align-items: center; + height: 30px; + } + + &-expand { + width: 10px; + line-height: 0; + align-self: stretch; + display: flex; + align-items: center; + transition: color 200ms ease; + margin-right: 4px; + color: var(--color-fill1-8, #5f697a); + + &.expanded > svg { + transform: rotate(0) + } + + & > svg { + transform: rotate(-90deg); + transform-origin: center; + transition: transform 100ms ease; + } + } + + &-title { + margin-left: 3px; + color: var(--color-fill1-8, #5f697a); + font-weight: 500; + font-size: 12px; + } + + &-icon { + position: relative; + top: 1px; + } + + &-items { + fill: var(--color-fill1-8, #5f697a); + } + + &-item { + position: relative; + padding: 2px 0 2px 21px; + font-size: 12px; + font-weight: 500; + color: var(--color-fill1-8, #5f697a); + + &.resource-tree-group-item-pro-code { + color: var(--color-text1-1, #bcc5d1); + pointer-events: none; + } + + &.active { + background-color: var(--color-fill1-1, #f7f8fa); + } + + &:hover { + background-color: var(--color-fill1-1, #f7f8fa); + + .resource-tree-group-item-behaviors { + display: flex; + } + + .resource-tree-group-item-code { + display: block; + } + } + + &-modified { + position: absolute; + background-color: var(--color-error-4, #e43823); + width: 5px; + height: 5px; + left: 11px; + border-radius: 50%; + top: calc(50% - 3px); + } + + &-title { + max-width: 140px; + word-break: break-all; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &-code { + color: var(--color-text1-2, #8f9aa9); + margin-left: 6px; + display: none; + max-width: 70px; + word-break: break-all; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &-icon { + height: 17px; + width: 16px; + margin-right: 2px; + position: relative; + top: 1px; + } + + &-behaviors { + position: absolute; + right: 0; + display: none; + + &-trigger { + height: 24px; + padding: 5px 8px; + } + } + + &-children { + height: 24px; + display: flex; + align-items: center; + cursor: pointer; + position: relative; + } + } + } + + &-filter { + display: flex; + margin-bottom: 13px; + } +} 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..8ca4beb --- /dev/null +++ b/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx @@ -0,0 +1,288 @@ +import { workspace } from '@alilc/lowcode-engine'; +import { IPublicModelPluginContext, IPublicModelResource } from '@alilc/lowcode-types'; +import { Search, Overlay } from '@alifd/next'; +import React, { useCallback, useState, useEffect, useRef } from 'react'; +import { FileIcon, IconArrowRight } from './icon'; +import './index.scss'; +import { IOptions } from '../..'; + +export function ResourcePaneContent(props: IPluginOptions) { + const { workspace } = props.pluginContext; + const [ resourceList, setResourceList ] = useState(workspace.resourceList); + workspace.onResourceListChange(() => { + setResourceList(workspace.resourceList); + }) + return ( + + ) +} + +function ResourceListTree(props: { + resourceList: IPublicModelResource[]; +} & Required) { + const [ category, setCategory ] = useState<{ + [key: string]: IPublicModelResource[]; + }>({}); + const [ filterValue, setFilterValue ] = useState(); + const [ activeId, setActiveId ] = useState(props.pluginContext.workspace.window?.resource.id); + useEffect(() => { + let category = {}; + 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?.title); + }); + return ( + <> +
+ +
+
+ { + Array.from(Object.entries(category)).map(([categoryName, resourceArr]) => { + return ( + + ) + }) + } +
+ + ) +} + +function ResourceGroup(props: { + activeId: string; + categoryName: string; + resourceArr: IPublicModelResource[]; + filterValue: string; +} & Required) { + const [expanded, setExpanded] = useState(props.defaultExpandAll || props.defaultExpandedCategoryKeys?.includes(props.categoryName)); + const [visible, setVisible] = useState(false); + const ref = useRef(null); + + 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 => ( + + )) + } +
+ ) + } + + return ( +
+
{ + e.preventDefault(); + e.stopPropagation(); + setVisible(!visible) + }} + ref={ref} + > +
{ + setExpanded(!expanded); + }} + > + +
+
+ +
+
{ props.categoryName }
+ { + setVisible(false); + }} + safeNode={ref?.current} + // @ts-ignore + placement="br" + className='view-pane-popup' + > +
+
{ + if (props.categoryName === '页面') { + props.options.onAddPage(); + } else { + props.options.onAddComponent(); + } + }} + className='view-pane-popup-item' + > + 新建{ props.categoryName === '页面' ? '页面' : '组件' } +
+
+ +
+ { + expanded &&
+ { + resourceArr + .map(d => ( + + )) + } +
+ } +
+ ) +} + +function ResourceItem(props: { + resource: IPublicModelResource; + icon: any; + children: IPublicModelResource[]; + activeId: string; + behaviors: any; + options: IOptions; + pluginContext: IPublicModelPluginContext; +}) { + const [expanded, setExpanded] = useState(false); + const ref = useRef(null); + const [showBehaviors, setShowBehaviors] = useState(false); + const PropsIcon = props.icon; + const Behaviors = props.behaviors; + const display = (props.resource.config as any)?.display ?? true; + + if (!display) { + return null; + } + + return ( +
{ + e.preventDefault(); + e.stopPropagation(); + setShowBehaviors(!showBehaviors); + }} + > + { + props.resource.options.modified ?
: null + } +
{ + props.pluginContext.workspace.openEditorWindow(props.resource); + props.options.handleClose(true); + }} + className='resource-tree-group-item-children' + > + { + (props.children && props.children.length || null) &&
{ + setExpanded(!expanded); + e.stopPropagation(); + e.preventDefault(); + }} + > + +
+ } +
{ PropsIcon && }
+
{props.resource.options?.label || props.resource.title}{props.resource.options.isProCodePage ? '（源码）' : ''}
+
{props.resource.options?.slug || props.resource.options?.componentName || ''}
+
+ { Behaviors && (props.resource.config as any)?.disableBehaviors !== true ? ( + { + setShowBehaviors(visible); + }} + safeNode={ref?.current} + /> + ) : null } +
+
+ { + expanded && props.children && props.children.map((child) => ( + + )) + } +
+ ) +} + +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..1b029cd --- /dev/null +++ b/packages/plugin-view-manager-pane/src/icon.tsx @@ -0,0 +1,69 @@ +import * as React from 'react'; +import { SVGIcon, IconProps } from '@alilc/lowcode-utils'; + +export default function Icon() { + return ( +
+
+ + + + + + + + + + + +
+
+ 视图 +
+
+ ); +} + +export function IconArrowRight(props: IconProps) { + return ( + + + + ); +} + +export const AddIcon = () => { + return ( + + + + + + + + + + + + + ) +} + +export const CloseIcon = () => { + 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..4e35a9e --- /dev/null +++ b/packages/plugin-view-manager-pane/src/index.scss @@ -0,0 +1,41 @@ +.workspace-view-pane { + font-size: 14px; + background-color: rgba(0, 0, 0, 0.3); + position: fixed; + left: var(--top-area-height); + top: 42px; + bottom: 0; + right: 0; + + &-content { + width: 300px; + padding: 11px; + background: #fff; + height: 100%; + position: relative; + } + + &-icon { + height: 60px !important; + text-align: center; + margin-bottom: 10px; + font-size: 14px; + } + + &-top { + margin-bottom: 11px; + font-size: 14px; + display: flex; + justify-content: space-between; + } + + &-title { + font-weight: 500; + + } + + &-top-icon { + margin-left: 14px; + cursor: pointer; + } +} 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..8df071e --- /dev/null +++ b/packages/plugin-view-manager-pane/src/index.tsx @@ -0,0 +1,116 @@ +import * as React from 'react'; +import { IPublicModelPluginContext, IPublicModelResource } from '@alilc/lowcode-types'; +import Icon from './icon'; +import { Pane } from './pane'; +import './index.scss'; + +export interface IOptions { + init?: (ctx: IPublicModelPluginContext) => {}, + + onAddPage?: () => {}, + + onDeletePage?: (resource: IPublicModelResource) => {}; + + onEditPage?: (resource: IPublicModelResource) => {}; + + onCopyPage?: (resource: IPublicModelResource) => {}; + + onAddComponent?: () => {}; + + onEditComponent?: (resource: IPublicModelResource) => {}; + + onCopyComponent?: (resource: IPublicModelResource) => {}; + + onDeleteComponent?: (resource: IPublicModelResource) => {}; + + handleClose?: (force?: boolean) => void; +} + +const ViewManagerPane = (ctx: IPublicModelPluginContext, options: IOptions = {}) => { + return { + // 插件的初始化函数，在引擎初始化之后会立刻调用 + async init() { + // 往引擎增加面板 + ctx.skeleton.add({ + area: 'leftArea', + name: 'ViewManagerPane', + type: 'PanelDock', + props: { + icon: , + description: '视图管理', + className: 'workspace-view-pane-icon', + }, + panelProps: { + hideTitleBar: true, + width: '200px', + }, + content: Pane, + contentProps: { + options: { + handleClose: () => { + ctx.skeleton.hidePanel('ViewManagerPane'); + }, + ...options, + }, + pluginContext: ctx, + } + }); + }, + }; +}; + +// 插件名，注册环境下唯一 +ViewManagerPane.pluginName = 'ViewManagerPane'; +ViewManagerPane.meta = { + // 依赖的插件（插件名数组） + dependencies: [], + engines: { + lowcodeEngine: '^1.0.0', // 插件需要配合 ^1.0.0 的引擎才可运行 + }, + preferenceDeclaration: { + title: '视图管理面板插件参数定义', + properties: [{ + key: 'init', + type: 'function', + description: '', + }, { + key: 'onAddPage', + type: 'function', + description: '', + }, { + key: 'onDeletePage', + type: 'function', + description: '', + }, { + key: 'onEditPage', + type: 'function', + description: '', + }, { + key: 'onCopyPage', + type: 'function', + description: '', + }, { + key: 'onAddComponent', + type: 'function', + description: '', + }, { + key: 'onEditComponent', + type: 'function', + description: '', + }, { + key: 'onCopyComponent', + type: 'function', + description: '', + }, { + key: 'onDeleteComponent', + type: 'function', + description: '', + }, { + key: 'handleClose', + type: 'function', + description: '', + }], + }, +} + +export default ViewManagerPane; 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..2ee08e7 --- /dev/null +++ b/packages/plugin-view-manager-pane/src/pane.tsx @@ -0,0 +1,49 @@ +import * as React from 'react'; +import { IPublicModelPluginContext } from "@alilc/lowcode-types"; +import { ResourcePaneContent } from './components/resourceTree'; +import { AddFile } from './components/addFile'; +import { CloseIcon } from './icon'; +import { Behaviors } from './components/addFile/behaviors'; +import { IOptions } from '.'; + + +export function Pane(props: { + pluginContext: IPublicModelPluginContext; + options: IOptions; +}) { + React.useEffect(() => { + props.options?.init?.(props.pluginContext); + }, []) + + return ( +
{ + props.options.handleClose?.(); + }}> +
{ + e.stopPropagation(); + }}> +
+ 视图 +
+ + + + { + props.options.handleClose?.(); + }} className="workspace-view-pane-top-icon"> + + +
+
+ { + return + }} + options={props.options} + /> +
+
+ ) +} \ No newline at end of file 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": { From 78c2bde4e2380e6a9fc571b155a7589da00b5b1a Mon Sep 17 00:00:00 2001 From: 154305 <38000719+154305@users.noreply.github.com> Date: Thu, 7 Sep 2023 09:35:55 +0800 Subject: [PATCH 27/83] Update index.module.scss (#79) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 解决这里width: (100 / 3) * 1%;报错警告 --- .../src/components/Component/index.module.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/plugin-components-pane/src/components/Component/index.module.scss b/packages/plugin-components-pane/src/components/Component/index.module.scss index f1ba65a..8469192 100644 --- a/packages/plugin-components-pane/src/components/Component/index.module.scss +++ b/packages/plugin-components-pane/src/components/Component/index.module.scss @@ -1,10 +1,11 @@ +@use "sass:math"; .card { display: flex; flex-direction: column; padding: 14px; align-items: center; justify-content: space-between; - width: (100 / 3) * 1%; + width: math.div(1, 3); height: 114px; flex-grow: 0; flex-shrink: 0; From a2c1423fe0b189ecb735b2bc959a91859da0dfb3 Mon Sep 17 00:00:00 2001 From: JackLian Date: Thu, 7 Sep 2023 09:39:26 +0800 Subject: [PATCH 28/83] chore(plugin-components-pane): publish 2.0.3 --- packages/plugin-components-pane/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-components-pane/package.json b/packages/plugin-components-pane/package.json index c221cb6..cb3d1f6 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": "2.0.2", + "version": "2.0.3", "description": "低代码组件面板", "files": [ "es/", From 2c016386c6d2c75b1acd26a644edcd2092b999e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E8=8F=8A=E8=90=8D=28=E7=B5=AE=E9=BB=8E=29?= Date: Fri, 8 Sep 2023 15:18:20 +0800 Subject: [PATCH 29/83] Revert "Update index.module.scss (#79)" This reverts commit 78c2bde4e2380e6a9fc571b155a7589da00b5b1a. --- .../src/components/Component/index.module.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/plugin-components-pane/src/components/Component/index.module.scss b/packages/plugin-components-pane/src/components/Component/index.module.scss index 8469192..f1ba65a 100644 --- a/packages/plugin-components-pane/src/components/Component/index.module.scss +++ b/packages/plugin-components-pane/src/components/Component/index.module.scss @@ -1,11 +1,10 @@ -@use "sass:math"; .card { display: flex; flex-direction: column; padding: 14px; align-items: center; justify-content: space-between; - width: math.div(1, 3); + width: (100 / 3) * 1%; height: 114px; flex-grow: 0; flex-shrink: 0; From 84720d465e605dda3e1a1623208f559b4d8d3b85 Mon Sep 17 00:00:00 2001 From: JackLian Date: Fri, 8 Sep 2023 15:21:56 +0800 Subject: [PATCH 30/83] chore(plugin-components-pane): publish 2.0.4 --- packages/plugin-components-pane/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-components-pane/package.json b/packages/plugin-components-pane/package.json index cb3d1f6..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": "2.0.3", + "version": "2.0.4", "description": "低代码组件面板", "files": [ "es/", From 4500aba5f66869eb1a12770b60ba6f204ae4ce0f Mon Sep 17 00:00:00 2001 From: liujuping Date: Sat, 30 Sep 2023 17:53:28 +0800 Subject: [PATCH 31/83] feat: add i18n to plugin-view-manager-pane --- .../plugin-view-manager-pane/package.json | 4 +- .../src/components/addFile/behaviors.tsx | 115 +++++---- .../src/components/addFile/index.scss | 8 +- .../src/components/addFile/index.tsx | 65 +++-- .../src/components/resourceTree/icon.tsx | 24 +- .../src/components/resourceTree/index.scss | 20 +- .../src/components/resourceTree/index.tsx | 233 +++++++++++------- .../plugin-view-manager-pane/src/icon.tsx | 101 +++++--- .../plugin-view-manager-pane/src/index.scss | 14 +- .../plugin-view-manager-pane/src/index.tsx | 128 ++++++---- .../src/locale/en-US.json | 16 ++ .../src/locale/index.ts | 14 ++ .../src/locale/zh-CN.json | 16 ++ .../plugin-view-manager-pane/src/pane.tsx | 43 ++-- 14 files changed, 488 insertions(+), 313 deletions(-) create mode 100644 packages/plugin-view-manager-pane/src/locale/en-US.json create mode 100644 packages/plugin-view-manager-pane/src/locale/index.ts create mode 100644 packages/plugin-view-manager-pane/src/locale/zh-CN.json diff --git a/packages/plugin-view-manager-pane/package.json b/packages/plugin-view-manager-pane/package.json index 2084ea4..2c3a944 100644 --- a/packages/plugin-view-manager-pane/package.json +++ b/packages/plugin-view-manager-pane/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-view-manager-pane", - "version": "1.0.0", + "version": "1.0.1", "description": "alibaba lowcode editor undo redo plugin", "files": [ "es", @@ -18,8 +18,8 @@ "editor" ], "dependencies": { - "@alilc/lowcode-utils": "^1.0.0", "@alilc/lowcode-types": "^1.0.0", + "@alilc/lowcode-utils": "^1.0.0", "react": "^16.8.1", "react-dom": "^16.8.1" }, diff --git a/packages/plugin-view-manager-pane/src/components/addFile/behaviors.tsx b/packages/plugin-view-manager-pane/src/components/addFile/behaviors.tsx index 64edf16..c421f9c 100644 --- a/packages/plugin-view-manager-pane/src/components/addFile/behaviors.tsx +++ b/packages/plugin-view-manager-pane/src/components/addFile/behaviors.tsx @@ -1,8 +1,9 @@ -import React from "react"; +import React from 'react'; import { Balloon } from '@alifd/next'; import { IPublicModelResource } from '@alilc/lowcode-types'; -import { OthersIcon } from "../resourceTree/icon"; -import { IOptions } from "../.."; +import { OthersIcon } from '../resourceTree/icon'; +import { IOptions } from '../..'; +import { intl } from '../../locale'; export function Behaviors(props: { resource: IPublicModelResource; @@ -30,62 +31,72 @@ export function Behaviors(props: { return ( { - e.stopPropagation(); - e.preventDefault(); - }}> + trigger={ +
{ + e.stopPropagation(); + e.preventDefault(); + }} + >
- )} + } triggerType="click" - align='bl' - popupClassName='view-pane-popup' + align="bl" + popupClassName="view-pane-popup" closable={false} visible={props.showBehaviors} safeNode={props.safeNode} onVisibleChange={props.onVisibleChange} > - { - behaviors.map(d => { - let text, handleLowcodeClick, handlePageClick; - switch(d) { - case 'edit': - text = `${description}设置`; - handleLowcodeClick = props.options?.onEditComponent; - handlePageClick = props.options?.onEditPage; - break; - case 'copy': - text = `复制${description}`; - handleLowcodeClick = props.options?.onCopyComponent; - handlePageClick = props.options?.onCopyPage; - break; - case 'delete': - text = `删除${description}`; - handleLowcodeClick = props.options?.onDeleteComponent; - handlePageClick = props.options?.onDeletePage; - break; - } + {behaviors.map((d) => { + let text, handleLowcodeClick, handlePageClick; + switch (d) { + case 'edit': + text = intl( + 'view_manager.components.addFile.behaviors.DescriptionSettings', + { description: description } + ); + handleLowcodeClick = props.options?.onEditComponent; + handlePageClick = props.options?.onEditPage; + break; + case 'copy': + text = intl( + 'view_manager.components.addFile.behaviors.CopyDescription', + { description: description } + ); + handleLowcodeClick = props.options?.onCopyComponent; + handlePageClick = props.options?.onCopyPage; + break; + case 'delete': + text = intl( + 'view_manager.components.addFile.behaviors.DeleteDescription', + { description: description } + ); + handleLowcodeClick = props.options?.onDeleteComponent; + handlePageClick = props.options?.onDeletePage; + break; + } - return ( -
{ - e.stopPropagation(); - e.preventDefault(); - props.onVisibleChange(false); - if (name === 'lowcode') { - handleLowcodeClick(props.resource); - } else { - handlePageClick(props.resource); - } - }} - className='view-pane-popup-item' - > - {text} -
- ) - }) - } + return ( +
{ + e.stopPropagation(); + e.preventDefault(); + props.onVisibleChange(false); + if (name === 'lowcode') { + handleLowcodeClick(props.resource); + } else { + handlePageClick(props.resource); + } + }} + className="view-pane-popup-item" + > + {text} +
+ ); + })} - ) -} \ No newline at end of file + ); +} diff --git a/packages/plugin-view-manager-pane/src/components/addFile/index.scss b/packages/plugin-view-manager-pane/src/components/addFile/index.scss index e905640..e57f916 100644 --- a/packages/plugin-view-manager-pane/src/components/addFile/index.scss +++ b/packages/plugin-view-manager-pane/src/components/addFile/index.scss @@ -1,7 +1,7 @@ .next-overlay-wrapper .next-overlay-inner.view-pane-popup { padding: 6px 0; - background-color: #fff; - box-shadow: 0 0 6px 0 rgba(0,0,0,0.44); + 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 { @@ -9,14 +9,14 @@ } .view-pane-popup-item { - width: 130px; height: 28px; line-height: 28px; padding: 0 12px; + color: var(--color-text); cursor: pointer; &:hover { - background-color: var(--color-fill1-2, #f1f3f6); + background-color: var(--color-block-background-light, #f1f3f6); } } } diff --git a/packages/plugin-view-manager-pane/src/components/addFile/index.tsx b/packages/plugin-view-manager-pane/src/components/addFile/index.tsx index eb43343..614d891 100644 --- a/packages/plugin-view-manager-pane/src/components/addFile/index.tsx +++ b/packages/plugin-view-manager-pane/src/components/addFile/index.tsx @@ -1,14 +1,13 @@ import { Balloon } from '@alifd/next'; import * as React from 'react'; -import { observer } from "mobx-react" +import { observer } from 'mobx-react'; import { AddIcon } from '../../icon'; import { IOptions } from '../..'; import './index.scss'; +import { intl } from '../../locale'; -function AddFileComponent(props: { - options: IOptions; -}) { +function AddFileComponent(props: { options: IOptions }) { if (!props.options?.onAddPage && !props.options?.onAddComponent) { return null; } @@ -17,40 +16,40 @@ function AddFileComponent(props: { <> } + trigger={ + + + + } triggerType="click" - align='bl' - popupClassName='view-pane-popup' + align="bl" + popupClassName="view-pane-popup" closable={false} > - { - props.options.onAddPage ? ( -
{ - props.options.onAddPage(); - }} - className='view-pane-popup-item' - > - 新建页面 -
- ) : null - } + {props.options.onAddPage ? ( +
{ + props.options.onAddPage?.(); + }} + className="view-pane-popup-item" + > + {intl('view_manager.components.addFile.CreatePage')} +
+ ) : null} - { - props.options.onAddComponent ? ( -
{ - props.options.onAddComponent(); - }} - > - 新建组件 -
- ) : null - } + {props.options.onAddComponent ? ( +
{ + props.options.onAddComponent?.(); + }} + > + {intl('view_manager.components.addFile.CreateAComponent')} +
+ ) : null} - ) + ); } -export const AddFile = observer(AddFileComponent); \ No newline at end of file +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 index 35ee0a0..6f72a31 100644 --- a/packages/plugin-view-manager-pane/src/components/resourceTree/icon.tsx +++ b/packages/plugin-view-manager-pane/src/components/resourceTree/icon.tsx @@ -4,12 +4,12 @@ import { SVGIcon, IconProps } from '@alilc/lowcode-utils'; export const FileIcon = () => { return ( - - - - - - + + + + + + @@ -22,12 +22,12 @@ export const FileIcon = () => { export const OthersIcon = () => { return ( - - - - - - + + + + + + diff --git a/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss b/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss index fb754bd..be5801c 100644 --- a/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss +++ b/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss @@ -7,7 +7,7 @@ overflow: scroll; &-group { - fill: var(--color-data1-1, #5894ff); + fill: var(--color-brand, #5894ff); & > .resource-tree-group-item { padding-left: 14px; @@ -27,7 +27,7 @@ align-items: center; transition: color 200ms ease; margin-right: 4px; - color: var(--color-fill1-8, #5f697a); + color: var(--color-icon-hover, #5f697a); &.expanded > svg { transform: rotate(0) @@ -42,7 +42,7 @@ &-title { margin-left: 3px; - color: var(--color-fill1-8, #5f697a); + color: var(--color-text, #5f697a); font-weight: 500; font-size: 12px; } @@ -53,7 +53,7 @@ } &-items { - fill: var(--color-fill1-8, #5f697a); + fill: var(--color-text, #5f697a); } &-item { @@ -61,19 +61,19 @@ padding: 2px 0 2px 21px; font-size: 12px; font-weight: 500; - color: var(--color-fill1-8, #5f697a); + color: var(--color-text, #5f697a); &.resource-tree-group-item-pro-code { - color: var(--color-text1-1, #bcc5d1); + color: var(--color-text-disabled, #bcc5d1); pointer-events: none; } &.active { - background-color: var(--color-fill1-1, #f7f8fa); + background-color: var(--color-block-background-light, #f7f8fa); } &:hover { - background-color: var(--color-fill1-1, #f7f8fa); + background-color: var(--color-block-background-light, #f7f8fa); .resource-tree-group-item-behaviors { display: flex; @@ -86,7 +86,7 @@ &-modified { position: absolute; - background-color: var(--color-error-4, #e43823); + background-color: var(--color-function-error, #e43823); width: 5px; height: 5px; left: 11px; @@ -103,7 +103,7 @@ } &-code { - color: var(--color-text1-2, #8f9aa9); + color: var(--color-text-dark, #8f9aa9); margin-left: 6px; display: none; max-width: 70px; diff --git a/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx b/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx index 8ca4beb..9c36e79 100644 --- a/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx +++ b/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx @@ -1,17 +1,23 @@ import { workspace } from '@alilc/lowcode-engine'; -import { IPublicModelPluginContext, IPublicModelResource } from '@alilc/lowcode-types'; +import { + IPublicModelPluginContext, + IPublicModelResource, +} from '@alilc/lowcode-types'; import { Search, Overlay } 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'; export function ResourcePaneContent(props: IPluginOptions) { const { workspace } = props.pluginContext; - const [ resourceList, setResourceList ] = useState(workspace.resourceList); + const [resourceList, setResourceList] = useState( + workspace.resourceList + ); workspace.onResourceListChange(() => { setResourceList(workspace.resourceList); - }) + }); return ( - ) + ); } -function ResourceListTree(props: { - resourceList: IPublicModelResource[]; -} & Required) { - const [ category, setCategory ] = useState<{ +function ResourceListTree( + props: { + resourceList: IPublicModelResource[]; + } & Required +) { + const [category, setCategory] = useState<{ [key: string]: IPublicModelResource[]; }>({}); - const [ filterValue, setFilterValue ] = useState(); - const [ activeId, setActiveId ] = useState(props.pluginContext.workspace.window?.resource.id); + const [filterValue, setFilterValue] = useState(); + const [activeId, setActiveId] = useState( + props.pluginContext.workspace.window?.resource.id + ); useEffect(() => { let category = {}; - props.resourceList.forEach(d => { + props.resourceList.forEach((d) => { category[d.category] = category[d.category] || []; category[d.category].push(d); }); @@ -52,15 +62,17 @@ function ResourceListTree(props: {
-
- { - Array.from(Object.entries(category)).map(([categoryName, resourceArr]) => { +
+ {Array.from(Object.entries(category)).map( + ([categoryName, resourceArr]) => { return ( - ) - }) - } + ); + } + )}
- ) + ); } -function ResourceGroup(props: { - activeId: string; - categoryName: string; - resourceArr: IPublicModelResource[]; - filterValue: string; -} & Required) { - const [expanded, setExpanded] = useState(props.defaultExpandAll || props.defaultExpandedCategoryKeys?.includes(props.categoryName)); +function ResourceGroup( + props: { + activeId: string; + categoryName: string; + resourceArr: IPublicModelResource[]; + filterValue: string; + } & Required +) { + const [expanded, setExpanded] = useState( + props.defaultExpandAll || + props.defaultExpandedCategoryKeys?.includes(props.categoryName) + ); const [visible, setVisible] = useState(false); const ref = useRef(null); - 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()))); + 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; @@ -101,22 +123,20 @@ function ResourceGroup(props: { if (!props.categoryName || props.categoryName === 'undefined') { return (
- { - resourceArr.map(d => ( - - )) - } + {resourceArr.map((d) => ( + + ))}
- ) + ); } return ( @@ -126,7 +146,7 @@ function ResourceGroup(props: { onContextMenu={(e) => { e.preventDefault(); e.stopPropagation(); - setVisible(!visible) + setVisible(!visible); }} ref={ref} > @@ -141,7 +161,7 @@ function ResourceGroup(props: {
-
{ props.categoryName }
+
{props.categoryName}
{ - if (props.categoryName === '页面') { + if ( + props.categoryName === + intl('view_manager.components.resourceTree.Page') + ) { props.options.onAddPage(); } else { props.options.onAddComponent(); } }} - className='view-pane-popup-item' + className="view-pane-popup-item" > - 新建{ props.categoryName === '页面' ? '页面' : '组件' } + {intl('view_manager.components.resourceTree.Create')} + + {props.categoryName === + intl('view_manager.components.resourceTree.Page') + ? intl('view_manager.components.resourceTree.Page') + : intl('view_manager.components.resourceTree.Component')}
- { - expanded &&
- { - resourceArr - .map(d => ( - - )) - } + {expanded && ( +
+ {resourceArr.map((d) => ( + + ))}
- } + )}
- ) + ); } function ResourceItem(props: { @@ -216,40 +241,58 @@ function ResourceItem(props: { return (
{ e.preventDefault(); e.stopPropagation(); setShowBehaviors(!showBehaviors); }} > - { - props.resource.options.modified ?
: null - } + {props.resource.options.modified ? ( +
+ ) : null} +
{ props.pluginContext.workspace.openEditorWindow(props.resource); props.options.handleClose(true); }} - className='resource-tree-group-item-children' + className="resource-tree-group-item-children" > - { - (props.children && props.children.length || null) &&
{ - setExpanded(!expanded); - e.stopPropagation(); - e.preventDefault(); - }} - > - -
- } -
{ PropsIcon && }
-
{props.resource.options?.label || props.resource.title}{props.resource.options.isProCodePage ? '（源码）' : ''}
-
{props.resource.options?.slug || props.resource.options?.componentName || ''}
+ {((props.children && props.children.length) || null) && ( +
{ + setExpanded(!expanded); + e.stopPropagation(); + e.preventDefault(); + }} + > + +
+ )} + +
+ {PropsIcon && } +
+
+ {props.resource.options?.label || props.resource.title} + {props.resource.options.isProCodePage + ? intl('view_manager.components.resourceTree.SourceCode') + : ''} +
+
+ {props.resource.options?.slug || + props.resource.options?.componentName || + ''} +
- { Behaviors && (props.resource.config as any)?.disableBehaviors !== true ? ( + {Behaviors && + (props.resource.config as any)?.disableBehaviors !== true ? ( - ) : null } + ) : null}
- { - expanded && props.children && props.children.map((child) => ( + {expanded && + props.children && + props.children.map((child) => ( - )) - } + ))}
- ) + ); } interface IPluginOptions { diff --git a/packages/plugin-view-manager-pane/src/icon.tsx b/packages/plugin-view-manager-pane/src/icon.tsx index 1b029cd..ad0398e 100644 --- a/packages/plugin-view-manager-pane/src/icon.tsx +++ b/packages/plugin-view-manager-pane/src/icon.tsx @@ -1,24 +1,39 @@ import * as React from 'react'; import { SVGIcon, IconProps } from '@alilc/lowcode-utils'; +import { intl } from './locale'; -export default function Icon() { +export default function Icon(props: { + showIconText: boolean; +}) { return (
- - - - - - - - - + + + + + + + + +
- 视图 + { + props.showIconText ? {intl('view_manager.src.icon.View')} : null + }
); @@ -34,36 +49,56 @@ export function IconArrowRight(props: IconProps) { export const AddIcon = () => { return ( - - - - - - - - - + + + + + + + + + - ) -} + ); +}; export const CloseIcon = () => { return ( - - - - - - - - - + + + + + + + + + - ) -} + ); +}; IconArrowRight.displayName = 'IconArrowRight'; diff --git a/packages/plugin-view-manager-pane/src/index.scss b/packages/plugin-view-manager-pane/src/index.scss index 4e35a9e..ac0132f 100644 --- a/packages/plugin-view-manager-pane/src/index.scss +++ b/packages/plugin-view-manager-pane/src/index.scss @@ -1,6 +1,6 @@ .workspace-view-pane { font-size: 14px; - background-color: rgba(0, 0, 0, 0.3); + background-color: var(--color-layer-mask-background, rgba(0, 0, 0, 0.3)); position: fixed; left: var(--top-area-height); top: 42px; @@ -10,16 +10,19 @@ &-content { width: 300px; padding: 11px; - background: #fff; + background: var(--color-pane-background, #fff); height: 100%; position: relative; } &-icon { - height: 60px !important; text-align: center; - margin-bottom: 10px; font-size: 14px; + + &.show-icon-text { + height: 60px !important; + margin-bottom: 10px; + } } &-top { @@ -31,11 +34,12 @@ &-title { font-weight: 500; - + color: var(--color-title); } &-top-icon { margin-left: 14px; cursor: pointer; + color: var(--color-icon-normal) } } diff --git a/packages/plugin-view-manager-pane/src/index.tsx b/packages/plugin-view-manager-pane/src/index.tsx index 8df071e..64b9815 100644 --- a/packages/plugin-view-manager-pane/src/index.tsx +++ b/packages/plugin-view-manager-pane/src/index.tsx @@ -1,13 +1,17 @@ import * as React from 'react'; -import { IPublicModelPluginContext, IPublicModelResource } from '@alilc/lowcode-types'; +import { + IPublicModelPluginContext, + IPublicModelResource, +} 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) => {}, + init?: (ctx: IPublicModelPluginContext) => {}; - onAddPage?: () => {}, + onAddPage?: () => {}; onDeletePage?: (resource: IPublicModelResource) => {}; @@ -24,21 +28,27 @@ export interface IOptions { onDeleteComponent?: (resource: IPublicModelResource) => {}; handleClose?: (force?: boolean) => void; + + showIconText?: boolean; } -const ViewManagerPane = (ctx: IPublicModelPluginContext, options: IOptions = {}) => { +const ViewManagerPane = ( + ctx: IPublicModelPluginContext, + options: IOptions = {} +) => { return { // 插件的初始化函数，在引擎初始化之后会立刻调用 async init() { + const showIconText = options.showIconText ?? true; // 往引擎增加面板 ctx.skeleton.add({ area: 'leftArea', name: 'ViewManagerPane', type: 'PanelDock', props: { - icon: , - description: '视图管理', - className: 'workspace-view-pane-icon', + icon: , + description: intl('view_manager.src.ViewManagement'), + className: `workspace-view-pane-icon ${showIconText ? 'show-icon-text' : null }`, }, panelProps: { hideTitleBar: true, @@ -53,7 +63,7 @@ const ViewManagerPane = (ctx: IPublicModelPluginContext, options: IOptions = {}) ...options, }, pluginContext: ctx, - } + }, }); }, }; @@ -68,49 +78,65 @@ ViewManagerPane.meta = { lowcodeEngine: '^1.0.0', // 插件需要配合 ^1.0.0 的引擎才可运行 }, preferenceDeclaration: { - title: '视图管理面板插件参数定义', - properties: [{ - key: 'init', - type: 'function', - description: '', - }, { - key: 'onAddPage', - type: 'function', - description: '', - }, { - key: 'onDeletePage', - type: 'function', - description: '', - }, { - key: 'onEditPage', - type: 'function', - description: '', - }, { - key: 'onCopyPage', - type: 'function', - description: '', - }, { - key: 'onAddComponent', - type: 'function', - description: '', - }, { - key: 'onEditComponent', - type: 'function', - description: '', - }, { - key: 'onCopyComponent', - type: 'function', - description: '', - }, { - key: 'onDeleteComponent', - type: 'function', - description: '', - }, { - key: 'handleClose', - type: 'function', - description: '', - }], + title: intl('view_manager.src.ViewManagementPanelPlugIn'), + properties: [ + { + key: 'init', + type: 'function', + description: '', + }, + { + key: 'onAddPage', + type: 'function', + description: '', + }, + { + key: 'onDeletePage', + type: 'function', + description: '', + }, + { + key: 'onEditPage', + type: 'function', + description: '', + }, + { + key: 'onCopyPage', + type: 'function', + description: '', + }, + { + key: 'onAddComponent', + type: 'function', + description: '', + }, + { + key: 'onEditComponent', + type: 'function', + description: '', + }, + { + key: 'onCopyComponent', + type: 'function', + description: '', + }, + { + key: 'onDeleteComponent', + type: 'function', + description: '', + }, + { + key: 'handleClose', + type: 'function', + description: '', + }, + { + key: 'showIconText', + type: 'boolean', + 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..fc5a4c7 --- /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 a component", + "view_manager.components.resourceTree.SearchPagesAndComponents": "Search pages and components", + "view_manager.components.resourceTree.Page": "Page", + "view_manager.components.resourceTree.Create": "Create", + "view_manager.components.resourceTree.Component": "Component", + "view_manager.components.resourceTree.SourceCode": "(Source code)", + "view_manager.src.icon.View": "View", + "view_manager.src.ViewManagement": "View management", + "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..b938ca4 --- /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.Create": "新建", + "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 index 2ee08e7..cee3082 100644 --- a/packages/plugin-view-manager-pane/src/pane.tsx +++ b/packages/plugin-view-manager-pane/src/pane.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import { IPublicModelPluginContext } from "@alilc/lowcode-types"; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; import { ResourcePaneContent } from './components/resourceTree'; import { AddFile } from './components/addFile'; import { CloseIcon } from './icon'; import { Behaviors } from './components/addFile/behaviors'; import { IOptions } from '.'; - +import { intl } from './locale'; export function Pane(props: { pluginContext: IPublicModelPluginContext; @@ -13,24 +13,35 @@ export function Pane(props: { }) { React.useEffect(() => { props.options?.init?.(props.pluginContext); - }, []) + }, []); return ( -
{ - props.options.handleClose?.(); - }}> -
{ - e.stopPropagation(); - }}> +
{ + props.options.handleClose?.(); + }} + > +
{ + e.stopPropagation(); + }} + >
- 视图 + + {intl('view_manager.src.pane.View')} +
- { - props.options.handleClose?.(); - }} className="workspace-view-pane-top-icon"> + { + props.options.handleClose?.(); + }} + className="workspace-view-pane-top-icon" + >
@@ -39,11 +50,11 @@ export function Pane(props: { defaultExpandAll={true} pluginContext={props.pluginContext} behaviors={(behaviorsProps: any) => { - return + return ; }} options={props.options} />
- ) -} \ No newline at end of file + ); +} From eb6c4955b0d07bc5a2390764911e52e6cd1e2f78 Mon Sep 17 00:00:00 2001 From: liujuping Date: Sat, 30 Sep 2023 16:57:08 +0800 Subject: [PATCH 32/83] feat: add i18n to lowcode-plugin-resource-tabs --- packages/plugin-resource-tabs/package.json | 2 +- packages/plugin-resource-tabs/src/icon.tsx | 34 ++-- packages/plugin-resource-tabs/src/index.scss | 2 +- packages/plugin-resource-tabs/src/index.tsx | 176 +++++++++++------- .../src/locale/en-US.json | 8 + .../plugin-resource-tabs/src/locale/index.ts | 14 ++ .../src/locale/zh-CN.json | 8 + 7 files changed, 153 insertions(+), 91 deletions(-) create mode 100644 packages/plugin-resource-tabs/src/locale/en-US.json create mode 100644 packages/plugin-resource-tabs/src/locale/index.ts create mode 100644 packages/plugin-resource-tabs/src/locale/zh-CN.json diff --git a/packages/plugin-resource-tabs/package.json b/packages/plugin-resource-tabs/package.json index 7d84569..dbe8dd0 100644 --- a/packages/plugin-resource-tabs/package.json +++ b/packages/plugin-resource-tabs/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-resource-tabs", - "version": "1.0.1", + "version": "1.0.2", "description": "alibaba lowcode resource tabs plugin", "files": [ "es", diff --git a/packages/plugin-resource-tabs/src/icon.tsx b/packages/plugin-resource-tabs/src/icon.tsx index ea331e0..24bc693 100644 --- a/packages/plugin-resource-tabs/src/icon.tsx +++ b/packages/plugin-resource-tabs/src/icon.tsx @@ -3,12 +3,12 @@ import React from "react" export const LockIcon = () => { return ( - - - - - - + + + + + + @@ -20,11 +20,11 @@ export const LockIcon = () => { export const CloseIcon = () => { return ( - - - - - + + + + + @@ -35,12 +35,12 @@ export const CloseIcon = () => { export const WarnIcon = () => { return ( - - - - - - + + + + + + diff --git a/packages/plugin-resource-tabs/src/index.scss b/packages/plugin-resource-tabs/src/index.scss index e3d70bc..07ca645 100644 --- a/packages/plugin-resource-tabs/src/index.scss +++ b/packages/plugin-resource-tabs/src/index.scss @@ -24,7 +24,7 @@ width: 5px; height: 5px; border-radius: 100%; - background-color: var(--color-brand1-6, #006aff); + background-color: var(--color-brand, #006aff); margin: 0 auto; } diff --git a/packages/plugin-resource-tabs/src/index.tsx b/packages/plugin-resource-tabs/src/index.tsx index 1545141..011613c 100644 --- a/packages/plugin-resource-tabs/src/index.tsx +++ b/packages/plugin-resource-tabs/src/index.tsx @@ -1,9 +1,15 @@ import { Tab, Dialog } from '@alifd/next'; -import { IPublicModelPluginContext, IPublicModelResource, IPublicModelWindow, IPublicTypePlugin } from '@alilc/lowcode-types'; +import { + IPublicModelPluginContext, + IPublicModelResource, + IPublicModelWindow, + 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: { icon: any; @@ -53,52 +59,50 @@ function CustomTabItem(props: { const ResourceIcon = props.icon; return (
-
- { ResourceIcon ? : null } +
+ {ResourceIcon ? : null}
-
{ title }
-
+
{title}
+
{ e.stopPropagation(); if (changed) { Dialog.show({ v2: true, - title: "警告", - content: "当前窗口有还未保存的改动，是否要舍弃变更", + title: intl('resource_tabs.src.Warning'), + content: intl('resource_tabs.src.TheCurrentWindowHasUnsaved'), onOk: () => {}, onCancel: () => { props.onClose(); }, cancelProps: { - children: '舍弃变更' + children: intl('resource_tabs.src.DiscardChanges'), }, okProps: { - children: '继续编辑', - } + children: intl('resource_tabs.src.ContinueEditing'), + }, }); return; } props.onClose(); }} - className='resource-tab-item-close-icon' + className="resource-tab-item-close-icon" >
-
- { - changed && !warned ? () : null - } - { - locked ? () : null - } - { - warned ? () : null - } +
+ {changed && !warned ? ( + + ) : null} + + {locked ? : null} + + {warned ? : null}
- ) + ); } interface ITabItem { @@ -126,22 +130,32 @@ function Content(props: { windows = props.onSort(workspace.windows); } - return windows.map(d => { + return windows.map((d) => { return { id: d.resource?.id || d.resource?.options.id, - windowId: d.id - } - }) + windowId: d.id, + }; + }); }, []); const [tabs, setTabs] = useState(getTabs()); - const [activeTitle, setActiveTitle] = useState(workspace.window?.resource?.id || workspace.window?.resource?.options?.id); + const [activeTitle, setActiveTitle] = useState( + workspace.window?.resource?.id || workspace.window?.resource?.options?.id + ); const saveTabsToLocal = useCallback(() => { - localStorage.setItem('___lowcode_plugin_resource_tabs___' + props.appKey, JSON.stringify(getTabs())); - localStorage.setItem('___lowcode_plugin_resource_tabs_active_title___' + props.appKey, JSON.stringify({ - id: workspace.window?.resource.id || workspace.window?.resource?.options.id, - })); + localStorage.setItem( + '___lowcode_plugin_resource_tabs___' + props.appKey, + JSON.stringify(getTabs()) + ); + localStorage.setItem( + '___lowcode_plugin_resource_tabs_active_title___' + props.appKey, + JSON.stringify({ + id: + workspace.window?.resource.id || + workspace.window?.resource?.options.id, + }) + ); }, []); const initEvent = useCallback<() => void>(() => { @@ -150,7 +164,9 @@ function Content(props: { saveTabsToLocal(); }); workspace.onChangeActiveWindow(() => { - setActiveTitle(workspace.window?.resource.id || workspace.window?.resource?.options.id); + setActiveTitle( + workspace.window?.resource.id || workspace.window?.resource?.options.id + ); saveTabsToLocal(); }); }, []); @@ -158,11 +174,11 @@ function Content(props: { useEffect(() => { const initResourceListMap = () => { const resourceListMap = {}; - workspace.resourceList.forEach(d => { + workspace.resourceList.forEach((d) => { resourceListMap[d.id || d.options.id] = d; }); setResourceListMap(resourceListMap); - } + }; if (workspace.resourceList) { initResourceListMap(); @@ -176,14 +192,22 @@ function Content(props: { if (!Object.keys(resourceListMap).length || tabs.length) { return; } - const value: ITabItem[] = JSON.parse(localStorage.getItem('___lowcode_plugin_resource_tabs___' + props.appKey)); + const value: ITabItem[] = JSON.parse( + localStorage.getItem( + '___lowcode_plugin_resource_tabs___' + props.appKey + ) + ); const activeValue: { id: string; - } = JSON.parse(localStorage.getItem('___lowcode_plugin_resource_tabs_active_title___' + props.appKey)); + } = JSON.parse( + localStorage.getItem( + '___lowcode_plugin_resource_tabs_active_title___' + props.appKey + ) + ); if (value && value.length) { - value.forEach(d => { - const resource = resourceListMap[d.id] + value.forEach((d) => { + const resource = resourceListMap[d.id]; resource && workspace.openEditorWindow(resource, true); }); @@ -194,9 +218,11 @@ function Content(props: { if (activeValue) { const resource = resourceListMap[activeValue.id]; - resource && workspace.openEditorWindow(resource); + if (resource) { + workspace.openEditorWindow(resource); + } } - } catch(e) { + } catch (e) { console.error(e); } }, [resourceListMap]); @@ -213,13 +239,16 @@ function Content(props: { contentStyle={{ height: 0, }} - tabRender={(key, props: { - key: string; - title: string; - icon: any; - onClose: () => void; - value: string; - }) => ( + tabRender={( + key, + props: { + key: string; + title: string; + icon: any; + onClose: () => void; + value: string; + } + ) => ( { setActiveTitle(name); - const item = tabs.filter(d => String(d.id) === String(name))?.[0]; + const item = tabs.filter((d) => String(d.id) === String(name))?.[0]; const resource = resourceListMap[item.id]; workspace.openEditorWindow(resource); }} > - {tabs.map(item => { + {tabs.map((item) => { const resource = resourceListMap[item.id]; if (!resource) { return null; @@ -253,21 +282,22 @@ function Content(props: { (workspace as any).removeEditorWindow(resource); }} /> - ) + ); })} - ) + ); } -const resourceTabs: IPublicTypePlugin = function (ctx: IPublicModelPluginContext, options: { - appKey?: string; - onSort?: (windows: IPublicModelWindow[]) => IPublicModelWindow[]; - shape?: string; - tabClassName?: string; -}) { - const { - skeleton, - } = ctx; +const resourceTabs: IPublicTypePlugin = function ( + ctx: IPublicModelPluginContext, + options: { + appKey?: string; + onSort?: (windows: IPublicModelWindow[]) => IPublicModelWindow[]; + shape?: string; + tabClassName?: string; + } +) { + const { skeleton } = ctx; return { async init() { skeleton.add({ @@ -285,23 +315,25 @@ const resourceTabs: IPublicTypePlugin = function (ctx: IPublicModelPluginContext appKey: options?.appKey, onSort: options?.onSort, shape: options?.shape, - tabClassName: options?.tabClassName + tabClassName: options?.tabClassName, }, }); - } - } -} + }, + }; +}; resourceTabs.pluginName = 'resourceTabs'; resourceTabs.meta = { preferenceDeclaration: { - title: '应用标签栏插件参数定义', + title: intl('resource_tabs.src.ApplicationTagColumnPlugIn'), properties: [ { key: 'appKey', type: 'string', - description: '唯一标识，用于缓存应用 Tab', + description: intl( + 'resource_tabs.src.UniqueIdentifierForCachingApplication' + ), }, { key: 'onSort', @@ -311,15 +343,15 @@ resourceTabs.meta = { { key: 'shape', type: 'string', - description: 'Tab shape' + description: 'Tab shape', }, { key: 'tabClassName', type: 'string', description: 'Tab className', - } - ] - } -} + }, + ], + }, +}; -export default resourceTabs; \ No newline at end of file +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" +} From 04cc3571ba37591ff28189514c311d7ff06d62da Mon Sep 17 00:00:00 2001 From: liujuping Date: Sat, 7 Oct 2023 17:28:59 +0800 Subject: [PATCH 33/83] fix: fix props.showIconText in plugin-view-manager-pane --- packages/plugin-view-manager-pane/package.json | 2 +- packages/plugin-view-manager-pane/src/icon.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/plugin-view-manager-pane/package.json b/packages/plugin-view-manager-pane/package.json index 2c3a944..83edbea 100644 --- a/packages/plugin-view-manager-pane/package.json +++ b/packages/plugin-view-manager-pane/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-view-manager-pane", - "version": "1.0.1", + "version": "1.0.2", "description": "alibaba lowcode editor undo redo plugin", "files": [ "es", diff --git a/packages/plugin-view-manager-pane/src/icon.tsx b/packages/plugin-view-manager-pane/src/icon.tsx index ad0398e..8998017 100644 --- a/packages/plugin-view-manager-pane/src/icon.tsx +++ b/packages/plugin-view-manager-pane/src/icon.tsx @@ -9,8 +9,8 @@ export default function Icon(props: {
Date: Mon, 16 Oct 2023 19:44:48 +0800 Subject: [PATCH 34/83] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/plugin-multiple-editor/README.md | 63 +++++++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 packages/plugin-multiple-editor/README.md diff --git a/packages/plugin-multiple-editor/README.md b/packages/plugin-multiple-editor/README.md new file mode 100644 index 0000000..02ad03b --- /dev/null +++ b/packages/plugin-multiple-editor/README.md @@ -0,0 +1,63 @@ +# 多文件编辑器 + +借助此插件可在低码引擎上使用任意层级的文件树进行代码的组织 + +## Demo + +```ts +import multipleFileCodeEditorFactory from '@alipay/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 }); +``` From f6d81bdb50d5b7b55e98a90c0cef109207a72fc0 Mon Sep 17 00:00:00 2001 From: carrot Date: Mon, 16 Oct 2023 11:53:24 +0000 Subject: [PATCH 35/83] feat: add readme --- packages/plugin-multiple-editor/README.md | 63 +++++++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 packages/plugin-multiple-editor/README.md diff --git a/packages/plugin-multiple-editor/README.md b/packages/plugin-multiple-editor/README.md new file mode 100644 index 0000000..02ad03b --- /dev/null +++ b/packages/plugin-multiple-editor/README.md @@ -0,0 +1,63 @@ +# 多文件编辑器 + +借助此插件可在低码引擎上使用任意层级的文件树进行代码的组织 + +## Demo + +```ts +import multipleFileCodeEditorFactory from '@alipay/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 }); +``` From f1b51fcf85d001609e4fe376ccf1fce77b52944f Mon Sep 17 00:00:00 2001 From: carrot Date: Mon, 16 Oct 2023 11:53:24 +0000 Subject: [PATCH 36/83] feat: add readme --- packages/plugin-multiple-editor/README.md | 63 +++++++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 packages/plugin-multiple-editor/README.md diff --git a/packages/plugin-multiple-editor/README.md b/packages/plugin-multiple-editor/README.md new file mode 100644 index 0000000..02ad03b --- /dev/null +++ b/packages/plugin-multiple-editor/README.md @@ -0,0 +1,63 @@ +# 多文件编辑器 + +借助此插件可在低码引擎上使用任意层级的文件树进行代码的组织 + +## Demo + +```ts +import multipleFileCodeEditorFactory from '@alipay/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 }); +``` From 0896618fabe64acb34ad9f9aa8c1f0d714ddda38 Mon Sep 17 00:00:00 2001 From: yushengyu Date: Mon, 16 Oct 2023 20:46:04 +0800 Subject: [PATCH 37/83] docs(plugin-multiple-editor): update readme.md --- packages/plugin-multiple-editor/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-multiple-editor/README.md b/packages/plugin-multiple-editor/README.md index 02ad03b..3bc74da 100644 --- a/packages/plugin-multiple-editor/README.md +++ b/packages/plugin-multiple-editor/README.md @@ -5,7 +5,7 @@ ## Demo ```ts -import multipleFileCodeEditorFactory from '@alipay/lowcode-plugin-multiple-editor'; +import multipleFileCodeEditorFactory from '@alilc/lowcode-plugin-multiple-editor'; import { PrettierPlugin } from '@alilc/lowcode-plugin-multiple-editor/es/plugins/prettier-plugin'; From 9e22f4afa6522e716f58b1ae4fda60bc9139d8ec Mon Sep 17 00:00:00 2001 From: liujuping Date: Tue, 10 Oct 2023 17:11:23 +0800 Subject: [PATCH 38/83] feat: update lowcode-plugin-view-manager-pane i18n text --- .../plugin-view-manager-pane/package.json | 2 +- .../src/components/resourceTree/index.scss | 3 +- .../src/components/resourceTree/index.tsx | 69 ++++++++++--------- .../plugin-view-manager-pane/src/index.scss | 2 +- .../src/locale/en-US.json | 12 ++-- .../src/locale/zh-CN.json | 2 +- 6 files changed, 47 insertions(+), 43 deletions(-) diff --git a/packages/plugin-view-manager-pane/package.json b/packages/plugin-view-manager-pane/package.json index 83edbea..9a8ce81 100644 --- a/packages/plugin-view-manager-pane/package.json +++ b/packages/plugin-view-manager-pane/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-view-manager-pane", - "version": "1.0.2", + "version": "1.0.3", "description": "alibaba lowcode editor undo redo plugin", "files": [ "es", diff --git a/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss b/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss index be5801c..e2b935b 100644 --- a/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss +++ b/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss @@ -50,6 +50,7 @@ &-icon { position: relative; top: 1px; + color: var(--color-brand); } &-items { @@ -103,7 +104,7 @@ } &-code { - color: var(--color-text-dark, #8f9aa9); + color: var(--color-text-disabled, #8f9aa9); margin-left: 6px; display: none; max-width: 70px; diff --git a/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx b/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx index 9c36e79..3d93b59 100644 --- a/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx +++ b/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx @@ -162,41 +162,44 @@ function ResourceGroup(
{props.categoryName}
- { - setVisible(false); - }} - safeNode={ref?.current} - // @ts-ignore - placement="br" - className="view-pane-popup" - > -
-
{ - if ( - props.categoryName === - intl('view_manager.components.resourceTree.Page') - ) { - props.options.onAddPage(); - } else { - props.options.onAddComponent(); - } + { + [intl('view_manager.components.resourceTree.Page'), intl('view_manager.components.resourceTree.Component')].includes(props.categoryName) ? ( + { + setVisible(false); }} - className="view-pane-popup-item" + safeNode={ref?.current} + // @ts-ignore + placement="br" + className="view-pane-popup" > - {intl('view_manager.components.resourceTree.Create')} - - {props.categoryName === - intl('view_manager.components.resourceTree.Page') - ? intl('view_manager.components.resourceTree.Page') - : intl('view_manager.components.resourceTree.Component')} -
-
- +
+
{ + if ( + props.categoryName === + intl('view_manager.components.resourceTree.Page') + ) { + props.options.onAddPage(); + } else { + props.options.onAddComponent(); + } + }} + className="view-pane-popup-item" + > + {intl('view_manager.components.resourceTree.CreateItem', { + categoryName: props.categoryName === intl('view_manager.components.resourceTree.Page') + ? intl('view_manager.components.resourceTree.Page') + : intl('view_manager.components.resourceTree.Component'), + })} +
+
+ + ) : null + }
{expanded && (
diff --git a/packages/plugin-view-manager-pane/src/index.scss b/packages/plugin-view-manager-pane/src/index.scss index ac0132f..a20a9e4 100644 --- a/packages/plugin-view-manager-pane/src/index.scss +++ b/packages/plugin-view-manager-pane/src/index.scss @@ -40,6 +40,6 @@ &-top-icon { margin-left: 14px; cursor: pointer; - color: var(--color-icon-normal) + color: var(--color-title); } } diff --git a/packages/plugin-view-manager-pane/src/locale/en-US.json b/packages/plugin-view-manager-pane/src/locale/en-US.json index fc5a4c7..723c80e 100644 --- a/packages/plugin-view-manager-pane/src/locale/en-US.json +++ b/packages/plugin-view-manager-pane/src/locale/en-US.json @@ -2,15 +2,15 @@ "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 a component", + "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.Create": "Create", - "view_manager.components.resourceTree.Component": "Component", + "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 management", + "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/zh-CN.json b/packages/plugin-view-manager-pane/src/locale/zh-CN.json index b938ca4..fd8924f 100644 --- a/packages/plugin-view-manager-pane/src/locale/zh-CN.json +++ b/packages/plugin-view-manager-pane/src/locale/zh-CN.json @@ -6,7 +6,7 @@ "view_manager.components.addFile.CreateAComponent": "新建组件", "view_manager.components.resourceTree.SearchPagesAndComponents": "搜索页面、组件", "view_manager.components.resourceTree.Page": "页面", - "view_manager.components.resourceTree.Create": "新建", + "view_manager.components.resourceTree.CreateItem": "新建{categoryName}", "view_manager.components.resourceTree.Component": "组件", "view_manager.components.resourceTree.SourceCode": "（源码）", "view_manager.src.icon.View": "视图", From 76f2fb68e8b6f470fa131640130ed66e2e02b924 Mon Sep 17 00:00:00 2001 From: NanYun-rs <19201026398@163.com> Date: Wed, 18 Oct 2023 16:08:45 +0800 Subject: [PATCH 39/83] fix(plugin-multiple-editor): use skeleton api --- packages/plugin-multiple-editor/src/Service.ts | 8 ++++---- packages/plugin-multiple-editor/src/index.tsx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/plugin-multiple-editor/src/Service.ts b/packages/plugin-multiple-editor/src/Service.ts index 24f4d05..2ceb81c 100644 --- a/packages/plugin-multiple-editor/src/Service.ts +++ b/packages/plugin-multiple-editor/src/Service.ts @@ -1,6 +1,6 @@ import { EditorController } from './Controller'; import { EditorHook } from './EditorHook'; -import type { Event } from '@alilc/lowcode-shell'; +import type { Skeleton } from '@alilc/lowcode-shell'; export enum PluginHooks { onActive = 'onActive', @@ -24,7 +24,7 @@ export class Service extends EditorHook { public onSelectFileChange = this.hookFactory(PluginHooks.onSelectFileChange); - constructor(public controller: EditorController, private editor: Event) { + constructor(public controller: EditorController, private skeleton: Skeleton) { super(); } @@ -41,12 +41,12 @@ export class Service extends EditorHook { } private setupHooks() { - this.editor.on('skeleton.panel-dock.unactive', (pluginName) => { + this.skeleton.onShowPanel((pluginName) => { if (pluginName === 'codeEditor') { this.triggerHook(PluginHooks.onDeActive); } }); - this.editor.on('skeleton.panel-dock.active', (pluginName) => { + this.skeleton.onHidePanel((pluginName) => { if (pluginName === 'codeEditor') { this.triggerHook(PluginHooks.onActive); } diff --git a/packages/plugin-multiple-editor/src/index.tsx b/packages/plugin-multiple-editor/src/index.tsx index 117870b..6b7b7dc 100644 --- a/packages/plugin-multiple-editor/src/index.tsx +++ b/packages/plugin-multiple-editor/src/index.tsx @@ -62,7 +62,7 @@ const pluginCodeEditor = ( schemaDock && schemaDock.disable(); project.onSimulatorRendererReady(() => { schemaDock.enable(); - const service = new Service(editorController, editor); + const service = new Service(editorController, ctx.skeleton); service.init({ plugins: options.plugins }); editorController.init(project, editor, service); }); From 60e50769747404d6dfdb3732db34f843e8bec84b Mon Sep 17 00:00:00 2001 From: arleyGuoLei <34805850@qq.com> Date: Thu, 26 Oct 2023 17:25:08 +0800 Subject: [PATCH 40/83] fix: remove plugin-code-editor ErrorBoundary css-module --- .../src/components/ErrorBoundary/ErrorBoundary.less | 5 +---- .../src/components/ErrorBoundary/ErrorBoundary.tsx | 4 ++-- 2 files changed, 3 insertions(+), 6 deletions(-) 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 || '未知原因'}

-
+
From a0ad0224b48607f867891b7bfb6ddf78c6753aad Mon Sep 17 00:00:00 2001 From: JackLian Date: Fri, 27 Oct 2023 11:05:43 +0800 Subject: [PATCH 41/83] chore(plugin-code-editor): publish 1.0.9 --- packages/plugin-code-editor/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-code-editor/package.json b/packages/plugin-code-editor/package.json index 5b03f02..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.8", + "version": "1.0.9", "description": "CodeEditor", "files": [ "es", From c53b88625a7d1440eccb0fe07e022e58d9bf62a3 Mon Sep 17 00:00:00 2001 From: liujuping Date: Sat, 16 Dec 2023 10:45:42 +0800 Subject: [PATCH 42/83] chore: add publish actions --- .github/workflows/publish beta npm.yml | 41 +++++++++ .github/workflows/publish npm.yml | 50 +++++++++++ packages/plugin-test/build.json | 19 ++++ packages/plugin-test/package.json | 44 ++++++++++ packages/plugin-test/src/index.tsx | 115 +++++++++++++++++++++++++ packages/plugin-test/tsconfig.json | 9 ++ 6 files changed, 278 insertions(+) create mode 100644 .github/workflows/publish beta npm.yml create mode 100644 .github/workflows/publish npm.yml create mode 100644 packages/plugin-test/build.json create mode 100644 packages/plugin-test/package.json create mode 100644 packages/plugin-test/src/index.tsx create mode 100644 packages/plugin-test/tsconfig.json diff --git a/.github/workflows/publish beta npm.yml b/.github/workflows/publish beta npm.yml new file mode 100644 index 0000000..b051410 --- /dev/null +++ b/.github/workflows/publish beta npm.yml @@ -0,0 +1,41 @@ +name: Publish Beta NPM Packages +on: push + 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: Install Dependencies and Publish + run: | + git config --local user.email "action@github.com" + git config --local user.name "GitHub Action" + cd packages + cd ${{ github.event.inputs.packagePath }} + npm install + # 假设您使用 npm 来修改版本和发布 + npm run build + npm version ${{ github.event.inputs.betaVersion }} + echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc + + npm publish + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} # 确保在您的 GitHub 仓库的 Secrets 中设置了 NPM_TOKEN diff --git a/.github/workflows/publish npm.yml b/.github/workflows/publish npm.yml new file mode 100644 index 0000000..a1b8b8d --- /dev/null +++ b/.github/workflows/publish npm.yml @@ -0,0 +1,50 @@ +name: Publish NPM Packages +on: push + 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: Install Dependencies and Publish + run: | + git config --local user.email "action@github.com" + git config --local user.name "GitHub Action" + cd packages + cd ${{ github.event.inputs.packagePath }} + npm install + # 假设您使用 npm 来修改版本和发布 + npm run build + npm version patch + + echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc + npm publish + + echo "::set-output name=PACKAGE_NAME::$(node -p "require('./package.json').name")" + echo "::set-output name=PACKAGE_VERSION::$(node -p "require('./package.json').version")" + + git tag -a "${{ steps.package_info.outputs.PACKAGE_NAME }}@${{ steps.package_info.outputs.PACKAGE_VERSION }}" -m "Release ${{ steps.package_info.outputs.PACKAGE_NAME }} version ${{ steps.package_info.outputs.PACKAGE_VERSION }}" + git push origin "${{ steps.package_info.outputs.PACKAGE_NAME }}@${{ steps.package_info.outputs.PACKAGE_VERSION }}" + + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} # 确保在您的 GitHub 仓库的 Secrets 中设置了 NPM_TOKEN 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..6054c2f --- /dev/null +++ b/packages/plugin-test/package.json @@ -0,0 +1,44 @@ +{ + "name": "@alilc/lowcode-plugin-test", + "version": "1.0.0", + "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", + "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", + "@types/react": "^16.9.13", + "@types/react-dom": "^16.9.4", + "build-plugin-fusion": "^0.1.22", + "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-undo-redo" + } +} 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/" + ] +} From 8047c8142edc5d1ec9f0723e99ce2a8a1f3984c5 Mon Sep 17 00:00:00 2001 From: liujuping Date: Sat, 16 Dec 2023 10:50:48 +0800 Subject: [PATCH 43/83] chore: add publish actions --- .github/workflows/publish beta npm.yml | 2 +- .github/workflows/publish npm.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/publish beta npm.yml b/.github/workflows/publish beta npm.yml index b051410..4d49277 100644 --- a/.github/workflows/publish beta npm.yml +++ b/.github/workflows/publish beta npm.yml @@ -1,5 +1,5 @@ name: Publish Beta NPM Packages -on: push +on: workflow_dispatch: inputs: packagePath: diff --git a/.github/workflows/publish npm.yml b/.github/workflows/publish npm.yml index a1b8b8d..9b2cda5 100644 --- a/.github/workflows/publish npm.yml +++ b/.github/workflows/publish npm.yml @@ -1,5 +1,5 @@ name: Publish NPM Packages -on: push +on: workflow_dispatch: inputs: packagePath: From 5d2b165bc6a029fce93107df2a2fd938a08a7c8f Mon Sep 17 00:00:00 2001 From: liujuping Date: Sat, 16 Dec 2023 10:53:37 +0800 Subject: [PATCH 44/83] chore: add publish actions --- .github/workflows/publish beta npm.yml | 1 + .github/workflows/publish npm.yml | 1 + 2 files changed, 2 insertions(+) diff --git a/.github/workflows/publish beta npm.yml b/.github/workflows/publish beta npm.yml index 4d49277..457802a 100644 --- a/.github/workflows/publish beta npm.yml +++ b/.github/workflows/publish beta npm.yml @@ -28,6 +28,7 @@ jobs: run: | git config --local user.email "action@github.com" git config --local user.name "GitHub Action" + npm install cd packages cd ${{ github.event.inputs.packagePath }} npm install diff --git a/.github/workflows/publish npm.yml b/.github/workflows/publish npm.yml index 9b2cda5..6d878cd 100644 --- a/.github/workflows/publish npm.yml +++ b/.github/workflows/publish npm.yml @@ -30,6 +30,7 @@ jobs: run: | git config --local user.email "action@github.com" git config --local user.name "GitHub Action" + npm install cd packages cd ${{ github.event.inputs.packagePath }} npm install From 7c95361c5d5af576bbf4945efa22896f0258b8c4 Mon Sep 17 00:00:00 2001 From: liujuping Date: Sat, 16 Dec 2023 11:01:41 +0800 Subject: [PATCH 45/83] chore: add publish actions --- .github/workflows/publish beta npm.yml | 28 +++++++++++++++++--------- .github/workflows/publish npm.yml | 23 ++++++++++++++------- 2 files changed, 35 insertions(+), 16 deletions(-) diff --git a/.github/workflows/publish beta npm.yml b/.github/workflows/publish beta npm.yml index 457802a..fdef1de 100644 --- a/.github/workflows/publish beta npm.yml +++ b/.github/workflows/publish beta npm.yml @@ -24,19 +24,29 @@ jobs: with: node-version: '16' # 或者您希望的任何版本 - - name: Install Dependencies and Publish + - name: Configure Git run: | git config --local user.email "action@github.com" git config --local user.name "GitHub Action" - npm install - cd packages - cd ${{ github.event.inputs.packagePath }} - npm install - # 假设您使用 npm 来修改版本和发布 - npm run build - npm version ${{ github.event.inputs.betaVersion }} - echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc + - name: Install Root Dependencies + run: npm install + + - name: Change to Package Directory + run: cd packages/${{ github.event.inputs.packagePath }} + + - name: Install Package Dependencies + run: npm install + + - name: Build Package + run: npm run build + + - name: Update Package Version + run: npm version ${{ github.event.inputs.betaVersion }} + + - name: Publish Package + run: | + echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc npm publish env: NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} # 确保在您的 GitHub 仓库的 Secrets 中设置了 NPM_TOKEN diff --git a/.github/workflows/publish npm.yml b/.github/workflows/publish npm.yml index 6d878cd..9d557dd 100644 --- a/.github/workflows/publish npm.yml +++ b/.github/workflows/publish npm.yml @@ -26,16 +26,25 @@ jobs: with: node-version: '16' # 或者您希望的任何版本 - - name: Install Dependencies and Publish + - name: Configure Git run: | git config --local user.email "action@github.com" git config --local user.name "GitHub Action" - npm install - cd packages - cd ${{ github.event.inputs.packagePath }} - npm install - # 假设您使用 npm 来修改版本和发布 - npm run build + + - name: Install Root Dependencies + run: npm install + + - name: Change to Package Directory + run: cd packages/${{ github.event.inputs.packagePath }} + + - name: Install Package Dependencies + run: npm install + + - name: Build Package + run: npm run build + + - name: Publish Package + run: | npm version patch echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc From 12b90a9d7b3000a03d59caa240c1adef5f61c4e5 Mon Sep 17 00:00:00 2001 From: liujuping Date: Sat, 16 Dec 2023 11:06:02 +0800 Subject: [PATCH 46/83] chore: add publish actions --- .github/workflows/publish beta npm.yml | 3 --- .github/workflows/publish npm.yml | 3 --- package.json | 5 +++-- 3 files changed, 3 insertions(+), 8 deletions(-) diff --git a/.github/workflows/publish beta npm.yml b/.github/workflows/publish beta npm.yml index fdef1de..56ac01f 100644 --- a/.github/workflows/publish beta npm.yml +++ b/.github/workflows/publish beta npm.yml @@ -29,9 +29,6 @@ jobs: git config --local user.email "action@github.com" git config --local user.name "GitHub Action" - - name: Install Root Dependencies - run: npm install - - name: Change to Package Directory run: cd packages/${{ github.event.inputs.packagePath }} diff --git a/.github/workflows/publish npm.yml b/.github/workflows/publish npm.yml index 9d557dd..bd33d90 100644 --- a/.github/workflows/publish npm.yml +++ b/.github/workflows/publish npm.yml @@ -31,9 +31,6 @@ jobs: git config --local user.email "action@github.com" git config --local user.name "GitHub Action" - - name: Install Root Dependencies - run: npm install - - name: Change to Package Directory run: cd packages/${{ github.event.inputs.packagePath }} diff --git a/package.json b/package.json index 8fe9b05..761e9e0 100644 --- a/package.json +++ b/package.json @@ -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 From 5f77d6fc44b11691a59c937a1bbcab37842a188f Mon Sep 17 00:00:00 2001 From: liujuping Date: Sat, 16 Dec 2023 11:14:15 +0800 Subject: [PATCH 47/83] chore: update plugin-multiple-editor devDependencies react version to 16.8.1 --- packages/plugin-multiple-editor/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-multiple-editor/package.json b/packages/plugin-multiple-editor/package.json index 1b5c99f..289f34c 100644 --- a/packages/plugin-multiple-editor/package.json +++ b/packages/plugin-multiple-editor/package.json @@ -98,7 +98,7 @@ "postcss-normalize": "^10.0.1", "postcss-preset-env": "^7.0.1", "prompts": "^2.4.2", - "react": "*", + "react": "^16.8.1", "react-app-polyfill": "^3.0.0", "react-dev-utils": "^12.0.0", "react-dom": "*", From 07cdd7d6a83381a627e574e84bdc1b42c6c82b90 Mon Sep 17 00:00:00 2001 From: liujuping Date: Sat, 16 Dec 2023 11:14:15 +0800 Subject: [PATCH 48/83] chore: add publish actions --- .github/workflows/publish beta npm.yml | 26 +++++++------------------- .github/workflows/publish npm.yml | 14 +++++++++----- packages/plugin-test/package.json | 12 +++++++----- 3 files changed, 23 insertions(+), 29 deletions(-) diff --git a/.github/workflows/publish beta npm.yml b/.github/workflows/publish beta npm.yml index 56ac01f..ff4108b 100644 --- a/.github/workflows/publish beta npm.yml +++ b/.github/workflows/publish beta npm.yml @@ -24,26 +24,14 @@ jobs: with: node-version: '16' # 或者您希望的任何版本 - - name: Configure Git + - name: Change to Package Directory run: | git config --local user.email "action@github.com" git config --local user.name "GitHub Action" - - - name: Change to Package Directory - run: cd packages/${{ github.event.inputs.packagePath }} - - - name: Install Package Dependencies - run: npm install - - - name: Build Package - run: npm run build - - - name: Update Package Version - run: npm version ${{ github.event.inputs.betaVersion }} - - - name: Publish Package - run: | echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc - npm publish - env: - NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} # 确保在您的 GitHub 仓库的 Secrets 中设置了 NPM_TOKEN + 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 index bd33d90..60f9a27 100644 --- a/.github/workflows/publish npm.yml +++ b/.github/workflows/publish npm.yml @@ -35,14 +35,21 @@ jobs: run: cd packages/${{ github.event.inputs.packagePath }} - name: Install Package Dependencies - run: npm install + run: npm install --legacy-peer-deps - name: Build Package run: npm run build - 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 + cd packages/${{ github.event.inputs.packagePath }} + npm install --legacy-peer-deps npm version patch + npm run build echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc npm publish @@ -51,7 +58,4 @@ jobs: echo "::set-output name=PACKAGE_VERSION::$(node -p "require('./package.json').version")" git tag -a "${{ steps.package_info.outputs.PACKAGE_NAME }}@${{ steps.package_info.outputs.PACKAGE_VERSION }}" -m "Release ${{ steps.package_info.outputs.PACKAGE_NAME }} version ${{ steps.package_info.outputs.PACKAGE_VERSION }}" - git push origin "${{ steps.package_info.outputs.PACKAGE_NAME }}@${{ steps.package_info.outputs.PACKAGE_VERSION }}" - - env: - NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} # 确保在您的 GitHub 仓库的 Secrets 中设置了 NPM_TOKEN + git push origin "${{ steps.package_info.outputs.PACKAGE_NAME }}@${{ steps.package_info.outputs.PACKAGE_VERSION }}" \ No newline at end of file diff --git a/packages/plugin-test/package.json b/packages/plugin-test/package.json index 6054c2f..650c04a 100644 --- a/packages/plugin-test/package.json +++ b/packages/plugin-test/package.json @@ -19,9 +19,7 @@ ], "dependencies": { "@alilc/lowcode-utils": "^1.0.0", - "@alilc/lowcode-types": "^1.1.9", - "react": "^16.8.1", - "react-dom": "^16.8.1" + "@alilc/lowcode-types": "^1.1.9" }, "devDependencies": { "@alib/build-scripts": "^0.1.3", @@ -30,7 +28,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" + "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/", @@ -39,6 +41,6 @@ "repository": { "type": "git", "url": "https://github.com/alibaba/lowcode-plugins.git", - "directory": "packages/plugin-undo-redo" + "directory": "packages/plugin-test" } } From 6c44b3a31425f2ce5c487657e3fca884948bec94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E8=8F=8A=E8=90=8D=28=E7=B5=AE=E9=BB=8E=29?= Date: Mon, 18 Dec 2023 17:03:23 +0800 Subject: [PATCH 49/83] feat: update workspace plugins(tabs & resource-tree) (#92) * feat: update workspace plugins(tabs & resource-tree) * feat: update workspace plugins(tabs & resource-tree) --- packages/plugin-resource-tabs/package.json | 1 + packages/plugin-resource-tabs/src/icon.tsx | 11 +- packages/plugin-resource-tabs/src/index.scss | 5 +- .../plugin-view-manager-pane/package.json | 2 + .../src/components/addFile/index.scss | 8 + .../src/components/addFile/index.tsx | 2 +- .../src/components/resourceTree/icon.tsx | 2 - .../src/components/resourceTree/index.scss | 246 +++++++++--------- .../src/components/resourceTree/index.tsx | 179 ++++++++----- .../plugin-view-manager-pane/src/icon.tsx | 78 ++---- .../plugin-view-manager-pane/src/index.scss | 27 +- .../plugin-view-manager-pane/src/index.tsx | 12 +- .../src/locale/zh-CN.json | 2 +- .../plugin-view-manager-pane/src/pane.tsx | 24 -- 14 files changed, 291 insertions(+), 308 deletions(-) diff --git a/packages/plugin-resource-tabs/package.json b/packages/plugin-resource-tabs/package.json index dbe8dd0..f107fee 100644 --- a/packages/plugin-resource-tabs/package.json +++ b/packages/plugin-resource-tabs/package.json @@ -30,6 +30,7 @@ "@types/react": "^16.9.13", "@types/react-dom": "^16.9.4", "build-plugin-fusion": "^0.1.22", + "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "build-plugin-moment-locales": "^0.1.0" }, "publishConfig": { diff --git a/packages/plugin-resource-tabs/src/icon.tsx b/packages/plugin-resource-tabs/src/icon.tsx index 24bc693..b6df8aa 100644 --- a/packages/plugin-resource-tabs/src/icon.tsx +++ b/packages/plugin-resource-tabs/src/icon.tsx @@ -19,12 +19,11 @@ export const LockIcon = () => { export const CloseIcon = () => { return ( - - - - - - + + + + + diff --git a/packages/plugin-resource-tabs/src/index.scss b/packages/plugin-resource-tabs/src/index.scss index 07ca645..08964cc 100644 --- a/packages/plugin-resource-tabs/src/index.scss +++ b/packages/plugin-resource-tabs/src/index.scss @@ -14,9 +14,9 @@ } &-resource-icon { - position: relative; - top: 2px; margin-right: 2px; + display: flex; + align-items: center; } &-changed-icon { @@ -33,6 +33,7 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + font-weight: 500; } &-tips { diff --git a/packages/plugin-view-manager-pane/package.json b/packages/plugin-view-manager-pane/package.json index 9a8ce81..5a41fde 100644 --- a/packages/plugin-view-manager-pane/package.json +++ b/packages/plugin-view-manager-pane/package.json @@ -27,9 +27,11 @@ "@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": { diff --git a/packages/plugin-view-manager-pane/src/components/addFile/index.scss b/packages/plugin-view-manager-pane/src/components/addFile/index.scss index e57f916..0f3f1e2 100644 --- a/packages/plugin-view-manager-pane/src/components/addFile/index.scss +++ b/packages/plugin-view-manager-pane/src/components/addFile/index.scss @@ -20,3 +20,11 @@ } } } + +.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 index 614d891..b66e4e2 100644 --- a/packages/plugin-view-manager-pane/src/components/addFile/index.tsx +++ b/packages/plugin-view-manager-pane/src/components/addFile/index.tsx @@ -17,7 +17,7 @@ function AddFileComponent(props: { options: IOptions }) { + } diff --git a/packages/plugin-view-manager-pane/src/components/resourceTree/icon.tsx b/packages/plugin-view-manager-pane/src/components/resourceTree/icon.tsx index 6f72a31..35b9d38 100644 --- a/packages/plugin-view-manager-pane/src/components/resourceTree/icon.tsx +++ b/packages/plugin-view-manager-pane/src/components/resourceTree/icon.tsx @@ -36,8 +36,6 @@ export const OthersIcon = () => { ) } - - export function IconArrowRight(props: IconProps) { return ( diff --git a/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss b/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss index e2b935b..009c22b 100644 --- a/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss +++ b/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss @@ -1,150 +1,162 @@ .resource-tree { position: absolute; - left: 11px; - right: 11px; + left: 0; + right: 0; bottom: 0; - top: 90px; - overflow: scroll; + top: 48px; + overflow-y: scroll; + + &-children { + padding-left: 24px; + } &-group { fill: var(--color-brand, #5894ff); + padding-left: 12px; + } - & > .resource-tree-group-item { - padding-left: 14px; - } - - &-wrap { - display: flex; - align-items: center; - height: 30px; - } + &-filter { + display: flex; + margin-bottom: 13px; + align-items: center; + } - &-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); - - &.expanded > svg { - transform: rotate(0) - } + &-group-wrap { + display: flex; + align-items: center; + height: 30px; + } - & > svg { - transform: rotate(-90deg); - transform-origin: center; - transition: transform 100ms ease; - } + &-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) } - &-title { - margin-left: 3px; - color: var(--color-text, #5f697a); - font-weight: 500; - font-size: 12px; + & > svg { + transform: rotate(-90deg); + transform-origin: center; + transition: transform 100ms ease; } + } - &-icon { - position: relative; - top: 1px; - color: var(--color-brand); - } + &-group-title { + margin-left: 5px; + color: var(--color-title, #5f697a); + font-size: 12px; + } - &-items { - fill: var(--color-text, #5f697a); - } + &-group-icon { + position: relative; + top: 1px; + color: var(--color-brand); + } - &-item { - position: relative; - padding: 2px 0 2px 21px; - font-size: 12px; - font-weight: 500; - color: var(--color-text, #5f697a); + &-group-items { + fill: var(--color-text, #5f697a); + padding-left: 28px; + } - &.resource-tree-group-item-pro-code { - color: var(--color-text-disabled, #bcc5d1); - pointer-events: none; - } + &-group-node { + position: relative; + padding: 2px 0 2px 0; + font-size: 12px; + color: var(--color-title, #5f697a); - &.active { - background-color: var(--color-block-background-light, #f7f8fa); - } - &:hover { - background-color: var(--color-block-background-light, #f7f8fa); + &.resource-tree-group-item-pro-code { + color: var(--color-text-disabled, #bcc5d1); + pointer-events: none; + } - .resource-tree-group-item-behaviors { - display: flex; - } + &.active .resource-tree-title { + background-color: var(--color-block-background-light, #f7f8fa); + } + } - .resource-tree-group-item-code { - display: block; - } - } + &-group-item-modified { + background-color: var(--color-function-error, #e43823); + width: 5px; + height: 5px; + border-radius: 50%; + position: absolute; + left: -11px; + } - &-modified { - position: absolute; - background-color: var(--color-function-error, #e43823); - width: 5px; - height: 5px; - left: 11px; - border-radius: 50%; - top: calc(50% - 3px); - } + &-group-item-modified-wrap { + display: flex; + width: 10px; + height: 24px; + align-items: center; + cursor: pointer; + width: 0px; + position: relative; + } - &-title { - max-width: 140px; - word-break: break-all; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } + &-group-title-label { + max-width: calc(100% - 44px); + word-break: break-all; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } - &-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-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; + } - &-icon { - height: 17px; - width: 16px; - margin-right: 2px; - position: relative; - top: 1px; - } + &-group-item-icon { + height: auto; + width: 12px; + margin-right: 4px; + display: flex; + align-items: center; - &-behaviors { - position: absolute; - right: 0; - display: none; + svg { + width: 100%; + } + } - &-trigger { - height: 24px; - padding: 5px 8px; - } - } + &-group-item-behaviors { + position: absolute; + right: 0; + display: none; - &-children { - height: 24px; - display: flex; - align-items: center; - cursor: pointer; - position: relative; - } + &-trigger { + height: 24px; + padding: 5px 8px; } } - &-filter { + &-title { + height: 24px; display: flex; - margin-bottom: 13px; + 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 index 3d93b59..c83e419 100644 --- a/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx +++ b/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx @@ -3,19 +3,20 @@ import { IPublicModelPluginContext, IPublicModelResource, } from '@alilc/lowcode-types'; -import { Search, Overlay } from '@alifd/next'; +import { Search, Overlay, 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'; export function ResourcePaneContent(props: IPluginOptions) { - const { workspace } = props.pluginContext; - const [resourceList, setResourceList] = useState( - workspace.resourceList + const { workspace } = props.pluginContext || {}; + const [resourceList, setResourceList] = useState( + workspace?.resourceList ); - workspace.onResourceListChange(() => { + workspace?.onResourceListChange(() => { setResourceList(workspace.resourceList); }); return ( @@ -32,21 +33,23 @@ export function ResourcePaneContent(props: IPluginOptions) { function ResourceListTree( props: { - resourceList: IPublicModelResource[]; - } & Required + resourceList?: IPublicModelResource[]; + } & IPluginOptions ) { const [category, setCategory] = useState<{ [key: string]: IPublicModelResource[]; }>({}); const [filterValue, setFilterValue] = useState(); const [activeId, setActiveId] = useState( - props.pluginContext.workspace.window?.resource.id + props.pluginContext?.workspace.window?.resource?.id + '' ); useEffect(() => { - let category = {}; - props.resourceList.forEach((d) => { - category[d.category] = category[d.category] || []; - category[d.category].push(d); + let category: { + [key: string]: any; + } = {}; + props.resourceList?.forEach((d) => { + category[d.category!] = category[d.category!] || []; + category[d.category!].push(d); }); setCategory(category); }, [props.resourceList]); @@ -54,7 +57,7 @@ function ResourceListTree( setFilterValue(key); }, []); workspace.onChangeActiveWindow(() => { - setActiveId(workspace.window?.title); + setActiveId(workspace.window?.resource?.id + ''); }); return ( <> @@ -69,6 +72,7 @@ function ResourceListTree( value={filterValue} onChange={handleSearchChange} /> +
{Array.from(Object.entries(category)).map( @@ -84,6 +88,7 @@ function ResourceListTree( pluginContext={props.pluginContext} behaviors={props.behaviors} options={props.options} + depth={0} /> ); } @@ -95,11 +100,12 @@ function ResourceListTree( function ResourceGroup( props: { - activeId: string; + activeId?: string; categoryName: string; resourceArr: IPublicModelResource[]; - filterValue: string; - } & Required + filterValue?: string; + depth: number; + } & IPluginOptions ) { const [expanded, setExpanded] = useState( props.defaultExpandAll || @@ -112,7 +118,7 @@ function ResourceGroup( (d) => !props.filterValue || [d.options.title, d.options.slug, d.options.componentName].some( - (d) => d && d.toLowerCase().includes(props.filterValue.toLowerCase()) + (d) => d && d.toLowerCase().includes(props.filterValue?.toLowerCase()) ) ); @@ -122,7 +128,10 @@ function ResourceGroup( if (!props.categoryName || props.categoryName === 'undefined') { return ( -
+
{resourceArr.map((d) => ( ))}
@@ -140,7 +150,10 @@ function ResourceGroup( } return ( -
+
{ @@ -151,7 +164,7 @@ function ResourceGroup( ref={ref} >
{ setExpanded(!expanded); }} @@ -183,9 +196,9 @@ function ResourceGroup( props.categoryName === intl('view_manager.components.resourceTree.Page') ) { - props.options.onAddPage(); + props.options.onAddPage?.(); } else { - props.options.onAddComponent(); + props.options.onAddComponent?.(); } }} className="view-pane-popup-item" @@ -202,7 +215,7 @@ function ResourceGroup( }
{expanded && ( -
+
{resourceArr.map((d) => ( ))}
@@ -222,53 +236,70 @@ function ResourceGroup( } function ResourceItem(props: { - resource: IPublicModelResource; - icon: any; - children: IPublicModelResource[]; - activeId: string; - behaviors: any; - options: IOptions; - pluginContext: IPublicModelPluginContext; + 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 [showBehaviors, setShowBehaviors] = useState(false); const PropsIcon = props.icon; const Behaviors = props.behaviors; - const display = (props.resource.config as any)?.display ?? true; + 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); + return (
{ e.preventDefault(); e.stopPropagation(); setShowBehaviors(!showBehaviors); }} + data-depth={props.depth} > - {props.resource.options.modified ? ( -
- ) : null} -
{ - props.pluginContext.workspace.openEditorWindow(props.resource); - props.options.handleClose(true); + props.resource && props.pluginContext?.workspace.openEditorWindow(props.resource); }} - className="resource-tree-group-item-children" + className="resource-tree-title" + style={style} > - {((props.children && props.children.length) || null) && ( + {props.resource?.options.modified ? ( +
} + triggerType="hover" + align='bl' + title="" + > + {props.resource.options.modifiedTips} + + ) : null} + + {((children && children.length) || null) && (
{ setExpanded(!expanded); e.stopPropagation(); @@ -282,24 +313,30 @@ function ResourceItem(props: {
{PropsIcon && }
-
- {props.resource.options?.label || props.resource.title} - {props.resource.options.isProCodePage +
+ {props.resource?.options?.label || props.resource?.title} + {props.resource?.options.isProCodePage ? intl('view_manager.components.resourceTree.SourceCode') : ''} + + { + props.resource?.options?.slug || + props.resource?.options?.componentName ? ( + + ({ props.resource.options?.slug || props.resource.options?.componentName }) + + ) : null + }
-
- {props.resource.options?.slug || - props.resource.options?.componentName || - ''} -
+ +
{Behaviors && - (props.resource.config as any)?.disableBehaviors !== true ? ( + (props.resource?.config as any)?.disableBehaviors !== true ? ( { + onVisibleChange={(visible: boolean) => { setShowBehaviors(visible); }} safeNode={ref?.current} @@ -307,20 +344,28 @@ function ResourceItem(props: { ) : null}
- {expanded && - props.children && - props.children.map((child) => ( - - ))} + + { + expanded && children?.length ? ( +
+ { + props.children?.map((child) => ( + + )) + } +
+ ) : null + }
); } diff --git a/packages/plugin-view-manager-pane/src/icon.tsx b/packages/plugin-view-manager-pane/src/icon.tsx index 8998017..f287eae 100644 --- a/packages/plugin-view-manager-pane/src/icon.tsx +++ b/packages/plugin-view-manager-pane/src/icon.tsx @@ -9,25 +9,20 @@ export default function Icon(props: {
- - - - - - - + + + + + + + -
@@ -49,54 +44,15 @@ export function IconArrowRight(props: IconProps) { export const AddIcon = () => { return ( - - - - - - - - - - - - - ); -}; - -export const CloseIcon = () => { - return ( - - - - - - - + + + + + + + - - ); }; diff --git a/packages/plugin-view-manager-pane/src/index.scss b/packages/plugin-view-manager-pane/src/index.scss index a20a9e4..268ea12 100644 --- a/packages/plugin-view-manager-pane/src/index.scss +++ b/packages/plugin-view-manager-pane/src/index.scss @@ -1,14 +1,9 @@ .workspace-view-pane { font-size: 14px; - background-color: var(--color-layer-mask-background, rgba(0, 0, 0, 0.3)); - position: fixed; - left: var(--top-area-height); - top: 42px; - bottom: 0; - right: 0; + position: relative; + height: 100%; &-content { - width: 300px; padding: 11px; background: var(--color-pane-background, #fff); height: 100%; @@ -24,22 +19,4 @@ margin-bottom: 10px; } } - - &-top { - margin-bottom: 11px; - font-size: 14px; - display: flex; - justify-content: space-between; - } - - &-title { - font-weight: 500; - color: var(--color-title); - } - - &-top-icon { - margin-left: 14px; - cursor: pointer; - color: var(--color-title); - } } diff --git a/packages/plugin-view-manager-pane/src/index.tsx b/packages/plugin-view-manager-pane/src/index.tsx index 64b9815..c0c6308 100644 --- a/packages/plugin-view-manager-pane/src/index.tsx +++ b/packages/plugin-view-manager-pane/src/index.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { IPublicModelPluginContext, IPublicModelResource, + IPublicTypeSkeletonConfig, } from '@alilc/lowcode-types'; import Icon from './icon'; import { Pane } from './pane'; @@ -30,6 +31,8 @@ export interface IOptions { handleClose?: (force?: boolean) => void; showIconText?: boolean; + + skeletonConfig?: IPublicTypeSkeletonConfig; } const ViewManagerPane = ( @@ -44,14 +47,12 @@ const ViewManagerPane = ( ctx.skeleton.add({ area: 'leftArea', name: 'ViewManagerPane', - type: 'PanelDock', props: { icon: , description: intl('view_manager.src.ViewManagement'), className: `workspace-view-pane-icon ${showIconText ? 'show-icon-text' : null }`, }, panelProps: { - hideTitleBar: true, width: '200px', }, content: Pane, @@ -64,6 +65,8 @@ const ViewManagerPane = ( }, pluginContext: ctx, }, + ...(options.skeletonConfig || {}), + type: options.skeletonConfig?.type || 'PanelDock', }); }, }; @@ -134,6 +137,11 @@ ViewManagerPane.meta = { key: 'showIconText', type: 'boolean', description: '', + }, + { + key: 'skeletonConfig', + type: 'object', + description: '', } ], }, diff --git a/packages/plugin-view-manager-pane/src/locale/zh-CN.json b/packages/plugin-view-manager-pane/src/locale/zh-CN.json index fd8924f..d972638 100644 --- a/packages/plugin-view-manager-pane/src/locale/zh-CN.json +++ b/packages/plugin-view-manager-pane/src/locale/zh-CN.json @@ -10,7 +10,7 @@ "view_manager.components.resourceTree.Component": "组件", "view_manager.components.resourceTree.SourceCode": "（源码）", "view_manager.src.icon.View": "视图", - "view_manager.src.ViewManagement": "视图管理", + "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 index cee3082..4ba6c5c 100644 --- a/packages/plugin-view-manager-pane/src/pane.tsx +++ b/packages/plugin-view-manager-pane/src/pane.tsx @@ -1,11 +1,8 @@ import * as React from 'react'; import { IPublicModelPluginContext } from '@alilc/lowcode-types'; import { ResourcePaneContent } from './components/resourceTree'; -import { AddFile } from './components/addFile'; -import { CloseIcon } from './icon'; import { Behaviors } from './components/addFile/behaviors'; import { IOptions } from '.'; -import { intl } from './locale'; export function Pane(props: { pluginContext: IPublicModelPluginContext; @@ -18,9 +15,6 @@ export function Pane(props: { return (
{ - props.options.handleClose?.(); - }} >
-
- - {intl('view_manager.src.pane.View')} - -
- - - - { - props.options.handleClose?.(); - }} - className="workspace-view-pane-top-icon" - > - - -
-
Date: Mon, 18 Dec 2023 17:31:01 +0800 Subject: [PATCH 50/83] chore: add publish actions --- .github/workflows/publish npm.yml | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/.github/workflows/publish npm.yml b/.github/workflows/publish npm.yml index 60f9a27..77542e0 100644 --- a/.github/workflows/publish npm.yml +++ b/.github/workflows/publish npm.yml @@ -26,20 +26,6 @@ jobs: with: node-version: '16' # 或者您希望的任何版本 - - name: Configure Git - run: | - git config --local user.email "action@github.com" - git config --local user.name "GitHub Action" - - - name: Change to Package Directory - run: cd packages/${{ github.event.inputs.packagePath }} - - - name: Install Package Dependencies - run: npm install --legacy-peer-deps - - - name: Build Package - run: npm run build - - name: Publish Package run: | git config --local user.email "action@github.com" From 7f2b77fdc73419fc30902d35a592d568d33c6f62 Mon Sep 17 00:00:00 2001 From: liujuping Date: Mon, 18 Dec 2023 18:17:52 +0800 Subject: [PATCH 51/83] chore: update publish actions --- .github/workflows/publish npm.yml | 8 ++++---- packages/plugin-resource-tabs/package.json | 2 +- packages/plugin-view-manager-pane/package.json | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/.github/workflows/publish npm.yml b/.github/workflows/publish npm.yml index 77542e0..7b686d9 100644 --- a/.github/workflows/publish npm.yml +++ b/.github/workflows/publish npm.yml @@ -40,8 +40,8 @@ jobs: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc npm publish - echo "::set-output name=PACKAGE_NAME::$(node -p "require('./package.json').name")" - echo "::set-output name=PACKAGE_VERSION::$(node -p "require('./package.json').version")" + echo "PACKAGE_NAME=$(node -p "require('./package.json').name")" >> $GITHUB_ENV + echo "PACKAGE_VERSION=$(node -p "require('./package.json').version")" >> $GITHUB_ENV - git tag -a "${{ steps.package_info.outputs.PACKAGE_NAME }}@${{ steps.package_info.outputs.PACKAGE_VERSION }}" -m "Release ${{ steps.package_info.outputs.PACKAGE_NAME }} version ${{ steps.package_info.outputs.PACKAGE_VERSION }}" - git push origin "${{ steps.package_info.outputs.PACKAGE_NAME }}@${{ steps.package_info.outputs.PACKAGE_VERSION }}" \ No newline at end of file + 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/packages/plugin-resource-tabs/package.json b/packages/plugin-resource-tabs/package.json index f107fee..5fdea66 100644 --- a/packages/plugin-resource-tabs/package.json +++ b/packages/plugin-resource-tabs/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-resource-tabs", - "version": "1.0.2", + "version": "1.0.3", "description": "alibaba lowcode resource tabs plugin", "files": [ "es", diff --git a/packages/plugin-view-manager-pane/package.json b/packages/plugin-view-manager-pane/package.json index 5a41fde..12fc34f 100644 --- a/packages/plugin-view-manager-pane/package.json +++ b/packages/plugin-view-manager-pane/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-view-manager-pane", - "version": "1.0.3", + "version": "1.0.4", "description": "alibaba lowcode editor undo redo plugin", "files": [ "es", From 9deb22a98bf75c8ee6bfe21b4147bd1bf07ee3bc Mon Sep 17 00:00:00 2001 From: liujuping Date: Mon, 18 Dec 2023 19:22:59 +0800 Subject: [PATCH 52/83] chore: update publish actions, add commit --- .github/workflows/publish npm.yml | 3 +++ packages/plugin-test/package.json | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/.github/workflows/publish npm.yml b/.github/workflows/publish npm.yml index 7b686d9..668e0f9 100644 --- a/.github/workflows/publish npm.yml +++ b/.github/workflows/publish npm.yml @@ -43,5 +43,8 @@ jobs: 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/packages/plugin-test/package.json b/packages/plugin-test/package.json index 650c04a..6c630e6 100644 --- a/packages/plugin-test/package.json +++ b/packages/plugin-test/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-test", - "version": "1.0.0", + "version": "1.0.1", "description": "alibaba lowcode editor test plugin", "files": [ "es", From 4a0370468829f228c5f202bd192eeb1599bae2ca Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Mon, 18 Dec 2023 11:26:54 +0000 Subject: [PATCH 53/83] Bump version to --- packages/plugin-test/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-test/package.json b/packages/plugin-test/package.json index 6c630e6..09d5504 100644 --- a/packages/plugin-test/package.json +++ b/packages/plugin-test/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-test", - "version": "1.0.1", + "version": "1.0.2", "description": "alibaba lowcode editor test plugin", "files": [ "es", From 42943b5ed848a2a5bb9afeb658bab7d2c9befb03 Mon Sep 17 00:00:00 2001 From: SuSunSam <339341037@qq.com> Date: Tue, 19 Dec 2023 15:09:20 +0800 Subject: [PATCH 54/83] feat: add renderAddFileComponent Option --- .../plugin-view-manager-pane/src/components/addFile/index.tsx | 4 ++++ packages/plugin-view-manager-pane/src/index.tsx | 2 ++ 2 files changed, 6 insertions(+) diff --git a/packages/plugin-view-manager-pane/src/components/addFile/index.tsx b/packages/plugin-view-manager-pane/src/components/addFile/index.tsx index b66e4e2..fe5be11 100644 --- a/packages/plugin-view-manager-pane/src/components/addFile/index.tsx +++ b/packages/plugin-view-manager-pane/src/components/addFile/index.tsx @@ -8,6 +8,10 @@ import './index.scss'; import { intl } from '../../locale'; function AddFileComponent(props: { options: IOptions }) { + if (props.options?.renderAddFileComponent && typeof props.options.renderAddFileComponent === 'function') { + return props.options.renderAddFileComponent(); + } + if (!props.options?.onAddPage && !props.options?.onAddComponent) { return null; } diff --git a/packages/plugin-view-manager-pane/src/index.tsx b/packages/plugin-view-manager-pane/src/index.tsx index c0c6308..f834eca 100644 --- a/packages/plugin-view-manager-pane/src/index.tsx +++ b/packages/plugin-view-manager-pane/src/index.tsx @@ -12,6 +12,8 @@ import { intl } from './locale'; export interface IOptions { init?: (ctx: IPublicModelPluginContext) => {}; + renderAddFileComponent?: () => React.JSX.Element; + onAddPage?: () => {}; onDeletePage?: (resource: IPublicModelResource) => {}; From d3453831604ebfb10eae56c231e9d35988924a5b Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Tue, 19 Dec 2023 07:22:54 +0000 Subject: [PATCH 55/83] Bump version to --- packages/plugin-view-manager-pane/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-view-manager-pane/package.json b/packages/plugin-view-manager-pane/package.json index 12fc34f..6cd3df9 100644 --- a/packages/plugin-view-manager-pane/package.json +++ b/packages/plugin-view-manager-pane/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-view-manager-pane", - "version": "1.0.4", + "version": "1.0.5", "description": "alibaba lowcode editor undo redo plugin", "files": [ "es", From 62dec4216dffa3622c6e2fbf0c28a8f77726607c Mon Sep 17 00:00:00 2001 From: liujuping Date: Fri, 22 Dec 2023 17:16:16 +0800 Subject: [PATCH 56/83] feat(plugin-view-manager-pane): replace Overlay + div with Balloon + Menu --- .../src/components/addFile/behaviors.tsx | 105 +++++++++--------- .../src/components/addFile/index.scss | 12 -- .../src/components/addFile/index.tsx | 54 ++++----- .../src/components/resourceTree/index.tsx | 19 ++-- 4 files changed, 92 insertions(+), 98 deletions(-) diff --git a/packages/plugin-view-manager-pane/src/components/addFile/behaviors.tsx b/packages/plugin-view-manager-pane/src/components/addFile/behaviors.tsx index c421f9c..497c349 100644 --- a/packages/plugin-view-manager-pane/src/components/addFile/behaviors.tsx +++ b/packages/plugin-view-manager-pane/src/components/addFile/behaviors.tsx @@ -1,10 +1,13 @@ import React from 'react'; -import { Balloon } from '@alifd/next'; +import { Overlay, Menu } from '@alifd/next'; import { IPublicModelResource } from '@alilc/lowcode-types'; import { OthersIcon } from '../resourceTree/icon'; import { IOptions } from '../..'; import { intl } from '../../locale'; +const { Item } = Menu; +const { Popup } = Overlay; + export function Behaviors(props: { resource: IPublicModelResource; options: IOptions; @@ -29,7 +32,7 @@ export function Behaviors(props: { } return ( - - {behaviors.map((d) => { - let text, handleLowcodeClick, handlePageClick; - switch (d) { - case 'edit': - text = intl( - 'view_manager.components.addFile.behaviors.DescriptionSettings', - { description: description } - ); - handleLowcodeClick = props.options?.onEditComponent; - handlePageClick = props.options?.onEditPage; - break; - case 'copy': - text = intl( - 'view_manager.components.addFile.behaviors.CopyDescription', - { description: description } - ); - handleLowcodeClick = props.options?.onCopyComponent; - handlePageClick = props.options?.onCopyPage; - break; - case 'delete': - text = intl( - 'view_manager.components.addFile.behaviors.DeleteDescription', - { description: description } - ); - handleLowcodeClick = props.options?.onDeleteComponent; - handlePageClick = props.options?.onDeletePage; - break; - } + + {behaviors.map((d) => { + let text, handleLowcodeClick: any, handlePageClick: any; + switch (d) { + case 'edit': + text = intl( + 'view_manager.components.addFile.behaviors.DescriptionSettings', + { description: description } + ); + handleLowcodeClick = props.options?.onEditComponent; + handlePageClick = props.options?.onEditPage; + break; + case 'copy': + text = intl( + 'view_manager.components.addFile.behaviors.CopyDescription', + { description: description } + ); + handleLowcodeClick = props.options?.onCopyComponent; + handlePageClick = props.options?.onCopyPage; + break; + case 'delete': + text = intl( + 'view_manager.components.addFile.behaviors.DeleteDescription', + { description: description } + ); + handleLowcodeClick = props.options?.onDeleteComponent; + handlePageClick = props.options?.onDeletePage; + break; + } - return ( -
{ - e.stopPropagation(); - e.preventDefault(); - props.onVisibleChange(false); - if (name === 'lowcode') { - handleLowcodeClick(props.resource); - } else { - handlePageClick(props.resource); - } - }} - className="view-pane-popup-item" - > - {text} -
- ); - })} - + return ( + { + e.stopPropagation(); + e.preventDefault(); + props.onVisibleChange(false); + if (name === 'lowcode') { + handleLowcodeClick?.(props.resource); + } else { + handlePageClick?.(props.resource); + } + }} + > + {text} + + ); + })} + + ); } diff --git a/packages/plugin-view-manager-pane/src/components/addFile/index.scss b/packages/plugin-view-manager-pane/src/components/addFile/index.scss index 0f3f1e2..e6621c3 100644 --- a/packages/plugin-view-manager-pane/src/components/addFile/index.scss +++ b/packages/plugin-view-manager-pane/src/components/addFile/index.scss @@ -7,18 +7,6 @@ &::after { display: none; } - - .view-pane-popup-item { - height: 28px; - line-height: 28px; - padding: 0 12px; - color: var(--color-text); - cursor: pointer; - - &:hover { - background-color: var(--color-block-background-light, #f1f3f6); - } - } } .add-file-icon-wrap { diff --git a/packages/plugin-view-manager-pane/src/components/addFile/index.tsx b/packages/plugin-view-manager-pane/src/components/addFile/index.tsx index fe5be11..685050a 100644 --- a/packages/plugin-view-manager-pane/src/components/addFile/index.tsx +++ b/packages/plugin-view-manager-pane/src/components/addFile/index.tsx @@ -1,4 +1,4 @@ -import { Balloon } from '@alifd/next'; +import { Overlay, Menu } from '@alifd/next'; import * as React from 'react'; import { observer } from 'mobx-react'; import { AddIcon } from '../../icon'; @@ -7,18 +7,21 @@ import { IOptions } from '../..'; import './index.scss'; import { intl } from '../../locale'; +const { Popup } = Overlay; +const { Item } = Menu; + function AddFileComponent(props: { options: IOptions }) { if (props.options?.renderAddFileComponent && typeof props.options.renderAddFileComponent === 'function') { return props.options.renderAddFileComponent(); } - + if (!props.options?.onAddPage && !props.options?.onAddComponent) { return null; } return ( <> - @@ -27,31 +30,30 @@ function AddFileComponent(props: { options: IOptions }) { } triggerType="click" align="bl" - popupClassName="view-pane-popup" - closable={false} + className="view-pane-popup" > - {props.options.onAddPage ? ( -
{ - props.options.onAddPage?.(); - }} - className="view-pane-popup-item" - > - {intl('view_manager.components.addFile.CreatePage')} -
- ) : null} + + {props.options.onAddPage ? ( + { + props.options.onAddPage?.(); + }} + > + {intl('view_manager.components.addFile.CreatePage')} + + ) : null} - {props.options.onAddComponent ? ( -
{ - props.options.onAddComponent?.(); - }} - > - {intl('view_manager.components.addFile.CreateAComponent')} -
- ) : null} - + {props.options.onAddComponent ? ( + { + props.options.onAddComponent?.(); + }} + > + {intl('view_manager.components.addFile.CreateAComponent')} + + ) : null} + + ); } diff --git a/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx b/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx index c83e419..4302e76 100644 --- a/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx +++ b/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx @@ -3,7 +3,7 @@ import { IPublicModelPluginContext, IPublicModelResource, } from '@alilc/lowcode-types'; -import { Search, Overlay, Balloon } from '@alifd/next'; +import { Search, Overlay, Balloon, Menu } from '@alifd/next'; import React, { useCallback, useState, useEffect, useRef } from 'react'; import { FileIcon, IconArrowRight } from './icon'; import './index.scss'; @@ -11,6 +11,9 @@ import { IOptions } from '../..'; import { intl } from '../../locale'; import { AddFile } from '../addFile'; +const { Popup } = Overlay; +const { Item } = Menu; + export function ResourcePaneContent(props: IPluginOptions) { const { workspace } = props.pluginContext || {}; const [resourceList, setResourceList] = useState( @@ -177,7 +180,7 @@ function ResourceGroup(
{props.categoryName}
{ [intl('view_manager.components.resourceTree.Page'), intl('view_manager.components.resourceTree.Component')].includes(props.categoryName) ? ( - -
-
+ { if ( props.categoryName === @@ -201,16 +203,15 @@ function ResourceGroup( props.options.onAddComponent?.(); } }} - className="view-pane-popup-item" > {intl('view_manager.components.resourceTree.CreateItem', { categoryName: props.categoryName === intl('view_manager.components.resourceTree.Page') ? intl('view_manager.components.resourceTree.Page') : intl('view_manager.components.resourceTree.Component'), })} -
-
- + + + ) : null }
From 63886c6952bb422a040cfb80291842400daba94b Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Fri, 22 Dec 2023 09:39:21 +0000 Subject: [PATCH 57/83] Bump version to --- packages/plugin-view-manager-pane/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-view-manager-pane/package.json b/packages/plugin-view-manager-pane/package.json index 6cd3df9..0700867 100644 --- a/packages/plugin-view-manager-pane/package.json +++ b/packages/plugin-view-manager-pane/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-view-manager-pane", - "version": "1.0.5", + "version": "1.0.6", "description": "alibaba lowcode editor undo redo plugin", "files": [ "es", From 50f3fe05fe7e9250a9ab742d99ee3fdcd05c2fd4 Mon Sep 17 00:00:00 2001 From: liujuping Date: Tue, 2 Jan 2024 15:46:34 +0800 Subject: [PATCH 58/83] chore: update ILowCodePluginContext to IPublicModelPluginContext --- packages/plugin-block/src/index.tsx | 4 +-- packages/plugin-code-editor/src/index.tsx | 5 ++-- packages/plugin-datasource-pane/src/index.tsx | 4 +-- packages/plugin-manual/src/index.tsx | 4 +-- .../scenario-switcher/index.tsx | 6 ++-- .../scenarios/basic-antd/plugin.tsx | 18 +++++------ .../plugin.tsx | 18 +++++------ .../scenarios/basic-fusion/plugin.tsx | 18 +++++------ .../dev-config/scenarios/next-pro/plugin.tsx | 18 +++++------ .../node-extended-actions/plugin.tsx | 30 ++++++++----------- packages/plugin-undo-redo/src/index.tsx | 6 ++-- packages/plugin-zh-en/src/index.tsx | 6 ++-- 12 files changed, 62 insertions(+), 75 deletions(-) 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/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-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-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/src/dev-config/sample-plugins/scenario-switcher/index.tsx b/packages/plugin-multiple-editor/src/dev-config/sample-plugins/scenario-switcher/index.tsx index 28bd634..916ba2e 100644 --- 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 @@ -1,9 +1,7 @@ import React from 'react'; -import { - ILowCodePluginContext, -} from '@alilc/lowcode-engine'; import { Select } from '@alifd/next'; import scenarios from '../../universal/scenarios.json'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; const { Option } = Select; const getCurrentScenarioName = () => { @@ -25,7 +23,7 @@ function Switcher(props: any) { ) } -export const scenarioSwitcher = (ctx: ILowCodePluginContext) => { +export const scenarioSwitcher = (ctx: IPublicModelPluginContext) => { return { name: 'scenarioSwitcher', async init() { 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 index c812a4d..a564038 100644 --- 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 @@ -1,10 +1,7 @@ import React from 'react'; import { - ILowCodePluginContext, plugins, - skeleton, project, - setters, } from '@alilc/lowcode-engine'; import AliLowCodeEngineExt from '@alilc/lowcode-engine-ext'; import { Button } from '@alifd/next'; @@ -34,6 +31,7 @@ import { } from '../../universal/utils'; import assets from './assets.json'; import schema from './schema.json'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; export default async function registerPlugins() { // await plugins.register(ManualPlugin); @@ -47,7 +45,7 @@ export default async function registerPlugins() { (SimulatorResizer as any).pluginName = 'SimulatorResizer'; plugins.register(SimulatorResizer); - const editorInit = (ctx: ILowCodePluginContext) => { + const editorInit = (ctx: IPublicModelPluginContext) => { return { name: 'editor-init', async init() { @@ -73,7 +71,7 @@ export default async function registerPlugins() { editorInit.pluginName = 'editorInit'; await plugins.register(editorInit); - const builtinPluginRegistry = (ctx: ILowCodePluginContext) => { + const builtinPluginRegistry = (ctx: IPublicModelPluginContext) => { return { name: 'builtin-plugin-registry', async init() { @@ -117,7 +115,7 @@ export default async function registerPlugins() { await plugins.register(builtinPluginRegistry); // 设置内置 setter 和事件绑定、插件绑定面板 - const setterRegistry = (ctx: ILowCodePluginContext) => { + const setterRegistry = (ctx: IPublicModelPluginContext) => { const { setterMap, pluginMap } = AliLowCodeEngineExt; return { name: 'ext-setters-registry', @@ -155,7 +153,7 @@ export default async function registerPlugins() { // 注册中英文切换 await plugins.register(ZhEnPlugin); - const loadAssetsSample = (ctx: ILowCodePluginContext) => { + const loadAssetsSample = (ctx: IPublicModelPluginContext) => { return { name: 'loadAssetsSample', async init() { @@ -180,7 +178,7 @@ export default async function registerPlugins() { await plugins.register(loadAssetsSample); // 注册保存面板 - const saveSample = (ctx: ILowCodePluginContext) => { + const saveSample = (ctx: IPublicModelPluginContext) => { return { name: 'saveSample', async init() { @@ -228,7 +226,7 @@ export default async function registerPlugins() { CodeGenPlugin.pluginName = 'CodeGenPlugin'; await plugins.register(CodeGenPlugin); - const previewSample = (ctx: ILowCodePluginContext) => { + const previewSample = (ctx: IPublicModelPluginContext) => { return { name: 'previewSample', async init() { @@ -252,7 +250,7 @@ export default async function registerPlugins() { previewSample.pluginName = 'previewSample'; await plugins.register(previewSample); - const customSetter = (ctx: ILowCodePluginContext) => { + const customSetter = (ctx: IPublicModelPluginContext) => { return { name: '___registerCustomSetter___', async init() { 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 index 14e78be..d500cb3 100644 --- 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 @@ -1,10 +1,7 @@ import React from 'react'; import { - ILowCodePluginContext, plugins, - skeleton, project, - setters, } from '@alilc/lowcode-engine'; import AliLowCodeEngineExt from '@alilc/lowcode-engine-ext'; import { Button } from '@alifd/next'; @@ -34,6 +31,7 @@ import { } from '../../universal/utils'; import assets from './assets.json'; import schema from './schema.json'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; export default async function registerPlugins() { await plugins.register(ManualPlugin); @@ -47,7 +45,7 @@ export default async function registerPlugins() { (SimulatorResizer as any).pluginName = 'SimulatorResizer'; plugins.register(SimulatorResizer); - const editorInit = (ctx: ILowCodePluginContext) => { + const editorInit = (ctx: IPublicModelPluginContext) => { return { name: 'editor-init', async init() { @@ -73,7 +71,7 @@ export default async function registerPlugins() { editorInit.pluginName = 'editorInit'; await plugins.register(editorInit); - const builtinPluginRegistry = (ctx: ILowCodePluginContext) => { + const builtinPluginRegistry = (ctx: IPublicModelPluginContext) => { return { name: 'builtin-plugin-registry', async init() { @@ -117,7 +115,7 @@ export default async function registerPlugins() { await plugins.register(builtinPluginRegistry); // 设置内置 setter 和事件绑定、插件绑定面板 - const setterRegistry = (ctx: ILowCodePluginContext) => { + const setterRegistry = (ctx: IPublicModelPluginContext) => { const { setterMap, pluginMap } = AliLowCodeEngineExt; return { name: 'ext-setters-registry', @@ -155,7 +153,7 @@ export default async function registerPlugins() { // 注册中英文切换 await plugins.register(ZhEnPlugin); - const loadAssetsSample = (ctx: ILowCodePluginContext) => { + const loadAssetsSample = (ctx: IPublicModelPluginContext) => { return { name: 'loadAssetsSample', async init() { @@ -180,7 +178,7 @@ export default async function registerPlugins() { await plugins.register(loadAssetsSample); // 注册保存面板 - const saveSample = (ctx: ILowCodePluginContext) => { + const saveSample = (ctx: IPublicModelPluginContext) => { return { name: 'saveSample', async init() { @@ -232,7 +230,7 @@ export default async function registerPlugins() { // CodeEditor.pluginName = 'CodeEditor'; // await plugins.register(CodeEditor); - const previewSample = (ctx: ILowCodePluginContext) => { + const previewSample = (ctx: IPublicModelPluginContext) => { return { name: 'previewSample', async init() { @@ -259,7 +257,7 @@ export default async function registerPlugins() { previewSample.pluginName = 'previewSample'; await plugins.register(previewSample); - const customSetter = (ctx: ILowCodePluginContext) => { + const customSetter = (ctx: IPublicModelPluginContext) => { return { name: '___registerCustomSetter___', async init() { 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 index a05fb96..d8f3b65 100644 --- 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 @@ -1,10 +1,7 @@ import React from 'react'; import { - ILowCodePluginContext, plugins, - skeleton, project, - setters, } from '@alilc/lowcode-engine'; import AliLowCodeEngineExt from '@alilc/lowcode-engine-ext'; import { Button } from '@alifd/next'; @@ -34,6 +31,7 @@ import { } from '../../universal/utils'; import assets from './assets.json'; import schema from './schema.json'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; export default async function registerPlugins() { await plugins.register(ManualPlugin); @@ -47,7 +45,7 @@ export default async function registerPlugins() { (SimulatorResizer as any).pluginName = 'SimulatorResizer'; plugins.register(SimulatorResizer); - const editorInit = (ctx: ILowCodePluginContext) => { + const editorInit = (ctx: IPublicModelPluginContext) => { return { name: 'editor-init', async init() { @@ -73,7 +71,7 @@ export default async function registerPlugins() { editorInit.pluginName = 'editorInit'; await plugins.register(editorInit); - const builtinPluginRegistry = (ctx: ILowCodePluginContext) => { + const builtinPluginRegistry = (ctx: IPublicModelPluginContext) => { return { name: 'builtin-plugin-registry', async init() { @@ -117,7 +115,7 @@ export default async function registerPlugins() { await plugins.register(builtinPluginRegistry); // 设置内置 setter 和事件绑定、插件绑定面板 - const setterRegistry = (ctx: ILowCodePluginContext) => { + const setterRegistry = (ctx: IPublicModelPluginContext) => { const { setterMap, pluginMap } = AliLowCodeEngineExt; return { name: 'ext-setters-registry', @@ -155,7 +153,7 @@ export default async function registerPlugins() { // 注册中英文切换 await plugins.register(ZhEnPlugin); - const loadAssetsSample = (ctx: ILowCodePluginContext) => { + const loadAssetsSample = (ctx: IPublicModelPluginContext) => { return { name: 'loadAssetsSample', async init() { @@ -180,7 +178,7 @@ export default async function registerPlugins() { await plugins.register(loadAssetsSample); // 注册保存面板 - const saveSample = (ctx: ILowCodePluginContext) => { + const saveSample = (ctx: IPublicModelPluginContext) => { return { name: 'saveSample', async init() { @@ -232,7 +230,7 @@ export default async function registerPlugins() { CodeGenPlugin.pluginName = 'CodeGenPlugin'; await plugins.register(CodeGenPlugin); - const previewSample = (ctx: ILowCodePluginContext) => { + const previewSample = (ctx: IPublicModelPluginContext) => { return { name: 'previewSample', async init() { @@ -256,7 +254,7 @@ export default async function registerPlugins() { previewSample.pluginName = 'previewSample'; await plugins.register(previewSample); - const customSetter = (ctx: ILowCodePluginContext) => { + const customSetter = (ctx: IPublicModelPluginContext) => { return { name: '___registerCustomSetter___', async init() { 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 index 1691a9e..a30ea02 100644 --- 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 @@ -1,10 +1,7 @@ import React from 'react'; import { - ILowCodePluginContext, plugins, - skeleton, project, - setters, } from '@alilc/lowcode-engine'; import AliLowCodeEngineExt from '@alilc/lowcode-engine-ext'; import { Button } from '@alifd/next'; @@ -36,6 +33,7 @@ import { } from '../../universal/utils'; import assets from './assets.json'; import schema from './schema.json'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; export default async function registerPlugins() { await plugins.register(ManualPlugin); @@ -53,7 +51,7 @@ export default async function registerPlugins() { (SimulatorResizer as any).pluginName = 'SimulatorResizer'; plugins.register(SimulatorResizer); - const editorInit = (ctx: ILowCodePluginContext) => { + const editorInit = (ctx: IPublicModelPluginContext) => { return { name: 'editor-init', async init() { @@ -79,7 +77,7 @@ export default async function registerPlugins() { editorInit.pluginName = 'editorInit'; await plugins.register(editorInit); - const builtinPluginRegistry = (ctx: ILowCodePluginContext) => { + const builtinPluginRegistry = (ctx: IPublicModelPluginContext) => { return { name: 'builtin-plugin-registry', async init() { @@ -123,7 +121,7 @@ export default async function registerPlugins() { await plugins.register(builtinPluginRegistry); // 设置内置 setter 和事件绑定、插件绑定面板 - const setterRegistry = (ctx: ILowCodePluginContext) => { + const setterRegistry = (ctx: IPublicModelPluginContext) => { const { setterMap, pluginMap } = AliLowCodeEngineExt; return { name: 'ext-setters-registry', @@ -161,7 +159,7 @@ export default async function registerPlugins() { // 注册中英文切换 await plugins.register(ZhEnPlugin); - const loadAssetsSample = (ctx: ILowCodePluginContext) => { + const loadAssetsSample = (ctx: IPublicModelPluginContext) => { return { name: 'loadAssetsSample', async init() { @@ -186,7 +184,7 @@ export default async function registerPlugins() { await plugins.register(loadAssetsSample); // 注册保存面板 - const saveSample = (ctx: ILowCodePluginContext) => { + const saveSample = (ctx: IPublicModelPluginContext) => { return { name: 'saveSample', async init() { @@ -230,7 +228,7 @@ export default async function registerPlugins() { // CodeEditor.pluginName = 'CodeEditor'; // await plugins.register(CodeEditor); - const previewSample = (ctx: ILowCodePluginContext) => { + const previewSample = (ctx: IPublicModelPluginContext) => { return { name: 'previewSample', async init() { @@ -254,7 +252,7 @@ export default async function registerPlugins() { previewSample.pluginName = 'previewSample'; await plugins.register(previewSample); - const customSetter = (ctx: ILowCodePluginContext) => { + const customSetter = (ctx: IPublicModelPluginContext) => { return { name: '___registerCustomSetter___', async init() { 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 index 6c229f6..2dd8e88 100644 --- 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 @@ -1,11 +1,6 @@ import React from 'react'; import { - ILowCodePluginContext, plugins, - skeleton, - project, - setters, - Node, } from '@alilc/lowcode-engine'; import AliLowCodeEngineExt from '@alilc/lowcode-engine-ext'; import { Icon, Message, Button } from '@alifd/next'; @@ -35,9 +30,10 @@ import { } from '../../universal/utils'; import assets from './assets.json'; import schema from './schema.json'; +import { IPublicModelPluginContext, IPublicModelNode } from '@alilc/lowcode-types'; export default async function registerPlugins() { - const addHelloAction = (ctx: ILowCodePluginContext) => { + const addHelloAction = (ctx: IPublicModelPluginContext) => { return { async init() { const { addBuiltinComponentAction } = ctx.material; @@ -46,12 +42,12 @@ export default async function registerPlugins() { content: { icon: , title: 'hello', - action(node: Node) { + action(node: IPublicModelNode) { Message.show('Welcome to Low-Code engine'); }, }, - condition: (node: Node) => { - return node.componentMeta.componentName === 'NextTable'; + condition: (node: IPublicModelNode) => { + return node.componentMeta?.componentName === 'NextTable'; }, }); }, @@ -60,7 +56,7 @@ export default async function registerPlugins() { addHelloAction.pluginName = 'addHelloAction'; await plugins.register(addHelloAction); - const removeCopyAction = (ctx: ILowCodePluginContext) => { + const removeCopyAction = (ctx: IPublicModelPluginContext) => { return { async init() { const { removeBuiltinComponentAction } = ctx.material; @@ -82,7 +78,7 @@ export default async function registerPlugins() { (SimulatorResizer as any).pluginName = 'SimulatorResizer'; plugins.register(SimulatorResizer); - const editorInit = (ctx: ILowCodePluginContext) => { + const editorInit = (ctx: IPublicModelPluginContext) => { return { name: 'editor-init', async init() { @@ -108,7 +104,7 @@ export default async function registerPlugins() { editorInit.pluginName = 'editorInit'; await plugins.register(editorInit); - const builtinPluginRegistry = (ctx: ILowCodePluginContext) => { + const builtinPluginRegistry = (ctx: IPublicModelPluginContext) => { return { name: 'builtin-plugin-registry', async init() { @@ -152,7 +148,7 @@ export default async function registerPlugins() { await plugins.register(builtinPluginRegistry); // 设置内置 setter 和事件绑定、插件绑定面板 - const setterRegistry = (ctx: ILowCodePluginContext) => { + const setterRegistry = (ctx: IPublicModelPluginContext) => { const { setterMap, pluginMap } = AliLowCodeEngineExt; return { name: 'ext-setters-registry', @@ -190,7 +186,7 @@ export default async function registerPlugins() { // 注册中英文切换 await plugins.register(ZhEnPlugin); - const loadAssetsSample = (ctx: ILowCodePluginContext) => { + const loadAssetsSample = (ctx: IPublicModelPluginContext) => { return { name: 'loadAssetsSample', async init() { @@ -215,7 +211,7 @@ export default async function registerPlugins() { await plugins.register(loadAssetsSample); // 注册保存面板 - const saveSample = (ctx: ILowCodePluginContext) => { + const saveSample = (ctx: IPublicModelPluginContext) => { return { name: 'saveSample', async init() { @@ -263,7 +259,7 @@ export default async function registerPlugins() { // CodeEditor.pluginName = 'CodeEditor'; // await plugins.register(CodeEditor); - const previewSample = (ctx: ILowCodePluginContext) => { + const previewSample = (ctx: IPublicModelPluginContext) => { return { name: 'previewSample', async init() { @@ -290,7 +286,7 @@ export default async function registerPlugins() { previewSample.pluginName = 'previewSample'; await plugins.register(previewSample); - const customSetter = (ctx: ILowCodePluginContext) => { + const customSetter = (ctx: IPublicModelPluginContext) => { return { name: '___registerCustomSetter___', async init() { diff --git a/packages/plugin-undo-redo/src/index.tsx b/packages/plugin-undo-redo/src/index.tsx index e9c1efb..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, IPublicTypeDisposable } from '@alilc/lowcode-types'; +import { PluginProps, IPublicTypeDisposable, IPublicModelPluginContext } from '@alilc/lowcode-types'; import './index.scss'; @@ -89,7 +89,7 @@ class UndoRedo extends PureComponent { } } -const plugin = (ctx: ILowCodePluginContext) => { +const plugin = (ctx: IPublicModelPluginContext) => { return { // 插件名，注册环境下唯一 name: 'PluginUndoRedo', 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', From 9075f9f428b3b5d510fc4d115a3e793c91f7ae54 Mon Sep 17 00:00:00 2001 From: liujuping Date: Mon, 8 Jan 2024 10:51:44 +0800 Subject: [PATCH 59/83] =?UTF-8?q?feat(plugin-view-manager-pane):=20add=20d?= =?UTF-8?q?isabled=E3=80=81tips=20configs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/resourceTree/index.scss | 13 ++++---- .../src/components/resourceTree/index.tsx | 32 +++++++++++++++---- 2 files changed, 33 insertions(+), 12 deletions(-) diff --git a/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss b/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss index 009c22b..b6962ec 100644 --- a/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss +++ b/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss @@ -72,12 +72,6 @@ font-size: 12px; color: var(--color-title, #5f697a); - - &.resource-tree-group-item-pro-code { - color: var(--color-text-disabled, #bcc5d1); - pointer-events: none; - } - &.active .resource-tree-title { background-color: var(--color-block-background-light, #f7f8fa); } @@ -144,6 +138,13 @@ } } + &-group-disabled { + .resource-tree-title { + opacity: 0.4; + cursor: not-allowed; + } + } + &-title { height: 24px; 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 index 4302e76..a7a6cb7 100644 --- a/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx +++ b/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx @@ -263,13 +263,17 @@ function ResourceItem(props: { } const children = props.children?.filter(d => d.config?.display !== false); + const { + disabled, + tips, + } = props.resource?.config || {}; - return ( + const context = (
{ @@ -281,6 +285,9 @@ function ResourceItem(props: { >
{ + if (disabled) { + return; + } props.resource && props.pluginContext?.workspace.openEditorWindow(props.resource); }} className="resource-tree-title" @@ -316,9 +323,6 @@ function ResourceItem(props: {
{props.resource?.options?.label || props.resource?.title} - {props.resource?.options.isProCodePage - ? intl('view_manager.components.resourceTree.SourceCode') - : ''} { props.resource?.options?.slug || @@ -369,6 +373,22 @@ function ResourceItem(props: { }
); + + if (tips) { + return ( + + {tips} + + ); + } + + return context; } interface IPluginOptions { From b5665c658a418d2b3c114385d576cfa377c2214b Mon Sep 17 00:00:00 2001 From: liujuping Date: Mon, 8 Jan 2024 18:43:50 +0800 Subject: [PATCH 60/83] chore: update CODEOWNERS --- .github/CODEOWNERS | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) 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 From 53125b8e2f3b5340720f54f82401ae839cee1ec7 Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Tue, 9 Jan 2024 02:42:39 +0000 Subject: [PATCH 61/83] Bump version to --- packages/plugin-view-manager-pane/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-view-manager-pane/package.json b/packages/plugin-view-manager-pane/package.json index 0700867..7dd1555 100644 --- a/packages/plugin-view-manager-pane/package.json +++ b/packages/plugin-view-manager-pane/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-view-manager-pane", - "version": "1.0.6", + "version": "1.0.7", "description": "alibaba lowcode editor undo redo plugin", "files": [ "es", From 0c8961fcafe86b62055414a29a1ca6ead75b7e71 Mon Sep 17 00:00:00 2001 From: liujuping Date: Mon, 15 Jan 2024 14:28:04 +0800 Subject: [PATCH 62/83] feat(plugin-resource-tabs): add context menus --- packages/plugin-resource-tabs/package.json | 7 +- packages/plugin-resource-tabs/src/index.tsx | 292 +++++++++++--------- 2 files changed, 162 insertions(+), 137 deletions(-) diff --git a/packages/plugin-resource-tabs/package.json b/packages/plugin-resource-tabs/package.json index 5fdea66..1d0830f 100644 --- a/packages/plugin-resource-tabs/package.json +++ b/packages/plugin-resource-tabs/package.json @@ -18,7 +18,7 @@ "editor" ], "dependencies": { - "@alilc/lowcode-types": "^1.0.0", + "@alilc/lowcode-types": "^1.3.0", "@alilc/lowcode-utils": "^1.0.0", "react": "^16.8.1", "react-dom": "^16.8.1" @@ -27,11 +27,12 @@ "@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", - "@babel/plugin-proposal-private-property-in-object": "^7.21.11", - "build-plugin-moment-locales": "^0.1.0" + "build-plugin-moment-locales": "^0.1.0", + "webpack": "^5.89.0" }, "publishConfig": { "registry": "https://registry.npmjs.org/", diff --git a/packages/plugin-resource-tabs/src/index.tsx b/packages/plugin-resource-tabs/src/index.tsx index 011613c..4444fea 100644 --- a/packages/plugin-resource-tabs/src/index.tsx +++ b/packages/plugin-resource-tabs/src/index.tsx @@ -3,6 +3,7 @@ import { IPublicModelPluginContext, IPublicModelResource, IPublicModelWindow, + IPublicTypeContextMenuAction, IPublicTypePlugin, } from '@alilc/lowcode-types'; import React from 'react'; @@ -12,19 +13,22 @@ import { CloseIcon, LockIcon, WarnIcon } from './icon'; import { intl } from './locale'; function CustomTabItem(props: { - icon: any; - title: string; - onClose: () => void; key: string; - ctx: IPublicModelPluginContext; - id: string; -}) { - const { id: propsId } = props; - const { event } = props.ctx; + 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(props.title); + const [title, setTitle] = useState(resource.title); + const onClose = useCallback(() => { + props.pluginContext.workspace.removeEditorWindow(resource); + }, []); useEffect(() => { event.on('common:windowChanged', (id, changed) => { if (propsId === id) { @@ -56,52 +60,52 @@ function CustomTabItem(props: { } }); }, []); - const ResourceIcon = props.icon; + 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: () => { - props.onClose(); - }, - cancelProps: { - children: intl('resource_tabs.src.DiscardChanges'), - }, - okProps: { - children: intl('resource_tabs.src.ContinueEditing'), - }, - }); - return; - } - props.onClose(); - }} - className="resource-tab-item-close-icon" - > - + +
+
+ {ResourceIcon ? : null}
-
- {changed && !warned ? ( - - ) : 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} + {locked ? : null} - {warned ? : null} + {warned ? : null} +
-
+ ); } @@ -111,14 +115,17 @@ interface ITabItem { } function Content(props: { - ctx: IPublicModelPluginContext; - appKey?: string; - onSort?: (windows: IPublicModelWindow[]) => IPublicModelWindow[]; - shape?: 'pure' | 'wrapped' | 'text' | 'capsule'; - tabClassName?: string; + pluginContext: IPublicModelPluginContext; + options: IOptions; }) { - const { ctx } = props; - const { workspace } = ctx; + const { pluginContext, options } = props; + const { + onSort, + appKey, + shape, + tabClassName, + } = options; + const { workspace } = pluginContext; const [resourceListMap, setResourceListMap] = useState<{ [key: string]: IPublicModelResource; @@ -126,8 +133,8 @@ function Content(props: { const getTabs = useCallback((): ITabItem[] => { let windows = workspace.windows; - if (props.onSort) { - windows = props.onSort(workspace.windows); + if (onSort) { + windows = onSort(workspace.windows); } return windows.map((d) => { @@ -145,14 +152,14 @@ function Content(props: { const saveTabsToLocal = useCallback(() => { localStorage.setItem( - '___lowcode_plugin_resource_tabs___' + props.appKey, + '___lowcode_plugin_resource_tabs___' + appKey, JSON.stringify(getTabs()) ); localStorage.setItem( - '___lowcode_plugin_resource_tabs_active_title___' + props.appKey, + '___lowcode_plugin_resource_tabs_active_title___' + appKey, JSON.stringify({ id: - workspace.window?.resource.id || + workspace.window?.resource?.id || workspace.window?.resource?.options.id, }) ); @@ -165,7 +172,7 @@ function Content(props: { }); workspace.onChangeActiveWindow(() => { setActiveTitle( - workspace.window?.resource.id || workspace.window?.resource?.options.id + workspace.window?.resource?.id || workspace.window?.resource?.options.id ); saveTabsToLocal(); }); @@ -173,7 +180,9 @@ function Content(props: { useEffect(() => { const initResourceListMap = () => { - const resourceListMap = {}; + const resourceListMap: { + [key: string]: IPublicModelResource; + } = {}; workspace.resourceList.forEach((d) => { resourceListMap[d.id || d.options.id] = d; }); @@ -194,15 +203,15 @@ function Content(props: { } const value: ITabItem[] = JSON.parse( localStorage.getItem( - '___lowcode_plugin_resource_tabs___' + props.appKey - ) + '___lowcode_plugin_resource_tabs___' + appKey + ) || 'null' ); const activeValue: { id: string; } = JSON.parse( localStorage.getItem( - '___lowcode_plugin_resource_tabs_active_title___' + props.appKey - ) + '___lowcode_plugin_resource_tabs_active_title___' + appKey + ) || 'null' ); if (value && value.length) { @@ -227,75 +236,80 @@ function Content(props: { } }, [resourceListMap]); + const ContextMenu = pluginContext?.commonUI?.ContextMenu || React.Fragment; return ( - void; - value: string; - } - ) => ( - - )} - 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; - } + +
+ ( + + )} + 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 ( - { - (workspace as any).removeEditorWindow(resource); - }} - /> - ); - })} - + 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: { - appKey?: string; - onSort?: (windows: IPublicModelWindow[]) => IPublicModelWindow[]; - shape?: string; - tabClassName?: string; - } + options: IOptions, ) { const { skeleton } = ctx; return { @@ -311,11 +325,8 @@ const resourceTabs: IPublicTypePlugin = function ( index: -1, content: Content, contentProps: { - ctx, - appKey: options?.appKey, - onSort: options?.onSort, - shape: options?.shape, - tabClassName: options?.tabClassName, + pluginContext: ctx, + options, }, }); }, @@ -350,8 +361,21 @@ resourceTabs.meta = { 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; From 492ce9844c5f8fd5d152019d1ce5f4276b19507d Mon Sep 17 00:00:00 2001 From: Zhenfei Date: Mon, 15 Jan 2024 14:36:33 +0800 Subject: [PATCH 63/83] =?UTF-8?q?feat:=20resourceTree=E8=8E=B7=E5=8F=96res?= =?UTF-8?q?ourceList=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89=E8=BF=87?= =?UTF-8?q?=E6=BB=A4=20(#98)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/resourceTree/index.tsx | 12 ++++++++++-- packages/plugin-view-manager-pane/src/index.tsx | 7 +++++++ 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx b/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx index a7a6cb7..2b0112f 100644 --- a/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx +++ b/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx @@ -14,13 +14,21 @@ import { AddFile } from '../addFile'; const { Popup } = Overlay; const { Item } = Menu; +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( - workspace?.resourceList + filterResourceList(workspace?.resourceList, props?.options?.filterResourceList) ); workspace?.onResourceListChange(() => { - setResourceList(workspace.resourceList); + setResourceList(filterResourceList(workspace?.resourceList, props?.options?.filterResourceList)); }); return ( void; + filterResourceList?: () => {}; + showIconText?: boolean; skeletonConfig?: IPublicTypeSkeletonConfig; @@ -135,6 +137,11 @@ ViewManagerPane.meta = { type: 'function', description: '', }, + { + key: 'filterResourceList', + type: 'function', + description: '', + }, { key: 'showIconText', type: 'boolean', From fd49aaf3a7368a03c82fa437254f48cf7fbf8b3d Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Mon, 15 Jan 2024 06:39:32 +0000 Subject: [PATCH 64/83] Bump version to --- packages/plugin-view-manager-pane/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-view-manager-pane/package.json b/packages/plugin-view-manager-pane/package.json index 7dd1555..a63790f 100644 --- a/packages/plugin-view-manager-pane/package.json +++ b/packages/plugin-view-manager-pane/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-view-manager-pane", - "version": "1.0.7", + "version": "1.0.8", "description": "alibaba lowcode editor undo redo plugin", "files": [ "es", From db8d8a9e1f63c196be47cc65973242f9d6a98eb1 Mon Sep 17 00:00:00 2001 From: liujuping Date: Mon, 15 Jan 2024 14:45:59 +0800 Subject: [PATCH 65/83] chore: update publish npm.yml --- .github/workflows/publish npm.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/publish npm.yml b/.github/workflows/publish npm.yml index 668e0f9..10fe201 100644 --- a/.github/workflows/publish npm.yml +++ b/.github/workflows/publish npm.yml @@ -34,7 +34,7 @@ jobs: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc cd packages/${{ github.event.inputs.packagePath }} npm install --legacy-peer-deps - npm version patch + npm version ${{ github.event.inputs.versionType }} npm run build echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc From 07df40a661e11b0a18f7b1f418f38239f083e2ad Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Mon, 15 Jan 2024 06:55:03 +0000 Subject: [PATCH 66/83] Bump version to --- packages/plugin-resource-tabs/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-resource-tabs/package.json b/packages/plugin-resource-tabs/package.json index 1d0830f..5d1f8a7 100644 --- a/packages/plugin-resource-tabs/package.json +++ b/packages/plugin-resource-tabs/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-resource-tabs", - "version": "1.0.3", + "version": "2.0.0", "description": "alibaba lowcode resource tabs plugin", "files": [ "es", From 23ecb23576962696d2e60b503e9d0b15908bf439 Mon Sep 17 00:00:00 2001 From: liujuping Date: Mon, 15 Jan 2024 15:06:49 +0800 Subject: [PATCH 67/83] chore: add delete npm.yml --- .github/workflows/delete npm.yml | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 .github/workflows/delete npm.yml diff --git a/.github/workflows/delete npm.yml b/.github/workflows/delete npm.yml new file mode 100644 index 0000000..b363ecd --- /dev/null +++ b/.github/workflows/delete npm.yml @@ -0,0 +1,30 @@ +name: Delete 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: Delete Package Version + run: | + npm unpublish ${{ github.event.inputs.version }} + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} From 3bce521eb0af98e68114d00a00492b06204f9cac Mon Sep 17 00:00:00 2001 From: liujuping Date: Mon, 15 Jan 2024 15:12:23 +0800 Subject: [PATCH 68/83] chore: add delete npm.yml --- .github/workflows/deprecate npm.yml | 30 +++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 .github/workflows/deprecate npm.yml diff --git a/.github/workflows/deprecate npm.yml b/.github/workflows/deprecate npm.yml new file mode 100644 index 0000000..390e171 --- /dev/null +++ b/.github/workflows/deprecate npm.yml @@ -0,0 +1,30 @@ +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: | + npm deprecate ${{ github.event.inputs.version }} "This version is deprecated. Please consider upgrading to a newer version." + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} From 66146e6a576bd29af650328e39c42affcf3ca1d4 Mon Sep 17 00:00:00 2001 From: liujuping Date: Mon, 15 Jan 2024 15:18:25 +0800 Subject: [PATCH 69/83] chore: add delete npm.yml --- .github/workflows/delete npm.yml | 30 ------------------------------ 1 file changed, 30 deletions(-) delete mode 100644 .github/workflows/delete npm.yml diff --git a/.github/workflows/delete npm.yml b/.github/workflows/delete npm.yml deleted file mode 100644 index b363ecd..0000000 --- a/.github/workflows/delete npm.yml +++ /dev/null @@ -1,30 +0,0 @@ -name: Delete 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: Delete Package Version - run: | - npm unpublish ${{ github.event.inputs.version }} - env: - NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} From 291e0a59d67851de39754977f009d368c1874809 Mon Sep 17 00:00:00 2001 From: liujuping Date: Mon, 15 Jan 2024 15:19:40 +0800 Subject: [PATCH 70/83] chore: add delete npm.yml --- .github/workflows/deprecate npm.yml | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/.github/workflows/deprecate npm.yml b/.github/workflows/deprecate npm.yml index 390e171..ea096ec 100644 --- a/.github/workflows/deprecate npm.yml +++ b/.github/workflows/deprecate npm.yml @@ -25,6 +25,8 @@ jobs: - 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." - env: - NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} From 23002d888b9b9112f25fc6b33ccecd329c083398 Mon Sep 17 00:00:00 2001 From: liujuping Date: Mon, 15 Jan 2024 14:41:12 +0800 Subject: [PATCH 71/83] feat(view-manager): add context menus --- .../plugin-view-manager-pane/package.json | 2 +- .../src/components/addFile/behaviors.tsx | 102 +------ .../src/components/addFile/index.tsx | 57 +--- .../src/components/resourceTree/index.scss | 5 + .../src/components/resourceTree/index.tsx | 268 ++++++++---------- .../plugin-view-manager-pane/src/index.tsx | 71 ++--- .../plugin-view-manager-pane/src/pane.tsx | 34 ++- 7 files changed, 193 insertions(+), 346 deletions(-) diff --git a/packages/plugin-view-manager-pane/package.json b/packages/plugin-view-manager-pane/package.json index a63790f..7047ce6 100644 --- a/packages/plugin-view-manager-pane/package.json +++ b/packages/plugin-view-manager-pane/package.json @@ -18,7 +18,7 @@ "editor" ], "dependencies": { - "@alilc/lowcode-types": "^1.0.0", + "@alilc/lowcode-types": "^1.3.0", "@alilc/lowcode-utils": "^1.0.0", "react": "^16.8.1", "react-dom": "^16.8.1" diff --git a/packages/plugin-view-manager-pane/src/components/addFile/behaviors.tsx b/packages/plugin-view-manager-pane/src/components/addFile/behaviors.tsx index 497c349..a1bda9c 100644 --- a/packages/plugin-view-manager-pane/src/components/addFile/behaviors.tsx +++ b/packages/plugin-view-manager-pane/src/components/addFile/behaviors.tsx @@ -1,105 +1,31 @@ import React from 'react'; -import { Overlay, Menu } from '@alifd/next'; -import { IPublicModelResource } from '@alilc/lowcode-types'; +import { IPublicModelPluginContext, IPublicModelResource } from '@alilc/lowcode-types'; import { OthersIcon } from '../resourceTree/icon'; import { IOptions } from '../..'; -import { intl } from '../../locale'; - -const { Item } = Menu; -const { Popup } = Overlay; export function Behaviors(props: { + pluginContext: IPublicModelPluginContext; resource: IPublicModelResource; options: IOptions; - showBehaviors: boolean; - onVisibleChange: any; safeNode: any; }) { - const { description, name } = props.resource; - let behaviors = []; - if (name === 'lowcode') { - props.options?.onEditComponent && behaviors.push('edit'); - props.options?.onCopyComponent && behaviors.push('copy'); - props.options?.onDeleteComponent && behaviors.push('delete'); - } else if (name === 'page') { - props.options?.onEditPage && behaviors.push('edit'); - props.options?.onCopyPage && behaviors.push('copy'); - props.options?.onDeletePage && behaviors.push('delete'); - } + 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 (!behaviors.length) { + if (!menus.length) { return null; } return ( - { - e.stopPropagation(); - e.preventDefault(); - }} - > - -
- } - triggerType="click" - align="bl" - className="view-pane-popup" - visible={props.showBehaviors} - safeNode={props.safeNode} - onVisibleChange={props.onVisibleChange} +
{ + e.stopPropagation(); + e.preventDefault(); + ContextMenu.create(menus, e); + }} > - - {behaviors.map((d) => { - let text, handleLowcodeClick: any, handlePageClick: any; - switch (d) { - case 'edit': - text = intl( - 'view_manager.components.addFile.behaviors.DescriptionSettings', - { description: description } - ); - handleLowcodeClick = props.options?.onEditComponent; - handlePageClick = props.options?.onEditPage; - break; - case 'copy': - text = intl( - 'view_manager.components.addFile.behaviors.CopyDescription', - { description: description } - ); - handleLowcodeClick = props.options?.onCopyComponent; - handlePageClick = props.options?.onCopyPage; - break; - case 'delete': - text = intl( - 'view_manager.components.addFile.behaviors.DeleteDescription', - { description: description } - ); - handleLowcodeClick = props.options?.onDeleteComponent; - handlePageClick = props.options?.onDeletePage; - break; - } - - return ( - { - e.stopPropagation(); - e.preventDefault(); - props.onVisibleChange(false); - if (name === 'lowcode') { - handleLowcodeClick?.(props.resource); - } else { - handlePageClick?.(props.resource); - } - }} - > - {text} - - ); - })} - - + +
); } diff --git a/packages/plugin-view-manager-pane/src/components/addFile/index.tsx b/packages/plugin-view-manager-pane/src/components/addFile/index.tsx index 685050a..165e664 100644 --- a/packages/plugin-view-manager-pane/src/components/addFile/index.tsx +++ b/packages/plugin-view-manager-pane/src/components/addFile/index.tsx @@ -1,61 +1,30 @@ -import { Overlay, Menu } from '@alifd/next'; 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'; -import { intl } from '../../locale'; - -const { Popup } = Overlay; -const { Item } = Menu; -function AddFileComponent(props: { options: IOptions }) { +function AddFileComponent(props: { options: IOptions, pluginContext: IPublicModelPluginContext }) { if (props.options?.renderAddFileComponent && typeof props.options.renderAddFileComponent === 'function') { return props.options.renderAddFileComponent(); } - if (!props.options?.onAddPage && !props.options?.onAddComponent) { + const menus = props.options?.contextMenuActions?.(props.pluginContext); + + if (!menus || !menus.length) { return null; } - return ( - <> - - - - } - triggerType="click" - align="bl" - className="view-pane-popup" - > - - {props.options.onAddPage ? ( - { - props.options.onAddPage?.(); - }} - > - {intl('view_manager.components.addFile.CreatePage')} - - ) : null} + const ContextMenu = props.pluginContext?.commonUI?.ContextMenu || React.Fragment; - {props.options.onAddComponent ? ( - { - props.options.onAddComponent?.(); - }} - > - {intl('view_manager.components.addFile.CreateAComponent')} - - ) : null} - - - - ); + 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/index.scss b/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss index b6962ec..ad7da44 100644 --- a/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss +++ b/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss @@ -25,6 +25,11 @@ display: flex; align-items: center; height: 30px; + cursor: pointer; + + &:hover { + background-color: var(--color-block-background-light, #f7f8fa); + } } &-expand { diff --git a/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx b/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx index 2b0112f..218454a 100644 --- a/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx +++ b/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx @@ -3,7 +3,7 @@ import { IPublicModelPluginContext, IPublicModelResource, } from '@alilc/lowcode-types'; -import { Search, Overlay, Balloon, Menu } from '@alifd/next'; +import { Search, Balloon } from '@alifd/next'; import React, { useCallback, useState, useEffect, useRef } from 'react'; import { FileIcon, IconArrowRight } from './icon'; import './index.scss'; @@ -11,9 +11,6 @@ import { IOptions } from '../..'; import { intl } from '../../locale'; import { AddFile } from '../addFile'; -const { Popup } = Overlay; -const { Item } = Menu; - function filterResourceList(resourceList: IPublicModelResource[] | undefined, handler?: Function) { if (typeof handler === 'function') { return handler(resourceList); @@ -83,7 +80,7 @@ function ResourceListTree( value={filterValue} onChange={handleSearchChange} /> - +
{Array.from(Object.entries(category)).map( @@ -122,9 +119,6 @@ function ResourceGroup( props.defaultExpandAll || props.defaultExpandedCategoryKeys?.includes(props.categoryName) ); - const [visible, setVisible] = useState(false); - const ref = useRef(null); - const resourceArr = props.resourceArr.filter( (d) => !props.filterValue || @@ -160,69 +154,40 @@ function ResourceGroup( ); } + const ContextMenu = props.pluginContext?.commonUI?.ContextMenu || React.Fragment; + const indent = props.depth * 28 + 12; + + const style = { + paddingLeft: indent, + marginLeft: -indent, + } + return (
-
{ - e.preventDefault(); - e.stopPropagation(); - setVisible(!visible); - }} - ref={ref} +
{ setExpanded(!expanded); }} > - -
-
- +
+ +
+
+ +
+
{props.categoryName}
-
{props.categoryName}
- { - [intl('view_manager.components.resourceTree.Page'), intl('view_manager.components.resourceTree.Component')].includes(props.categoryName) ? ( - { - setVisible(false); - }} - safeNode={ref?.current} - placement="br" - className="view-pane-popup" - > - - { - if ( - props.categoryName === - intl('view_manager.components.resourceTree.Page') - ) { - props.options.onAddPage?.(); - } else { - props.options.onAddComponent?.(); - } - }} - > - {intl('view_manager.components.resourceTree.CreateItem', { - categoryName: props.categoryName === intl('view_manager.components.resourceTree.Page') - ? intl('view_manager.components.resourceTree.Page') - : intl('view_manager.components.resourceTree.Component'), - })} - - - - ) : null - } -
+ {expanded && (
{resourceArr.map((d) => ( @@ -256,7 +221,6 @@ function ResourceItem(props: { }) { const [expanded, setExpanded] = useState(false); const ref = useRef(null); - const [showBehaviors, setShowBehaviors] = useState(false); const PropsIcon = props.icon; const Behaviors = props.behaviors; const display = (props.resource?.config as any)?.display ?? true; @@ -275,111 +239,105 @@ function ResourceItem(props: { disabled, tips, } = props.resource?.config || {}; + const ContextMenu = props.pluginContext?.commonUI?.ContextMenu || React.Fragment; const context = ( -
{ - e.preventDefault(); - e.stopPropagation(); - setShowBehaviors(!showBehaviors); - }} - data-depth={props.depth} - > +
{ - if (disabled) { - return; - } - props.resource && props.pluginContext?.workspace.openEditorWindow(props.resource); - }} - className="resource-tree-title" - style={style} + ref={ref} + className={`resource-tree-group-node ${ + disabled + ? 'resource-tree-group-disabled' + : '' + } ${props.activeId === props.resource?.options.id || props.activeId === props.resource?.id ? 'active' : ''}`} + data-depth={props.depth} > - {props.resource?.options.modified ? ( -
} - triggerType="hover" - align='bl' - title="" - > - {props.resource.options.modifiedTips} - - ) : null} +
{ + 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(); - }} - > - -
- )} + {((children && children.length) || null) && ( +
{ + setExpanded(!expanded); + e.stopPropagation(); + e.preventDefault(); + }} + > + +
+ )} -
- {PropsIcon && } -
-
- {props.resource?.options?.label || props.resource?.title} +
+ {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 - } -
+ { + 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 ? ( - { - setShowBehaviors(visible); - }} - safeNode={ref?.current} - /> - ) : null} +
+ {Behaviors && + (props.resource?.config as any)?.disableBehaviors !== true ? ( + + ) : null} +
-
- { - expanded && children?.length ? ( -
- { - props.children?.map((child) => ( - - )) - } -
- ) : null - } -
+ { + expanded && children?.length ? ( +
+ { + props.children?.map((child) => ( + + )) + } +
+ ) : null + } +
+ ); if (tips) { @@ -402,7 +360,7 @@ function ResourceItem(props: { interface IPluginOptions { defaultExpandedCategoryKeys?: string[]; defaultExpandAll?: boolean; - pluginContext?: IPublicModelPluginContext; + pluginContext: IPublicModelPluginContext; behaviors?: any; options: IOptions; } diff --git a/packages/plugin-view-manager-pane/src/index.tsx b/packages/plugin-view-manager-pane/src/index.tsx index 8895401..c1541f0 100644 --- a/packages/plugin-view-manager-pane/src/index.tsx +++ b/packages/plugin-view-manager-pane/src/index.tsx @@ -3,6 +3,7 @@ import { IPublicModelPluginContext, IPublicModelResource, IPublicTypeSkeletonConfig, + IPublicTypeContextMenuAction, } from '@alilc/lowcode-types'; import Icon from './icon'; import { Pane } from './pane'; @@ -14,22 +15,6 @@ export interface IOptions { renderAddFileComponent?: () => React.JSX.Element; - onAddPage?: () => {}; - - onDeletePage?: (resource: IPublicModelResource) => {}; - - onEditPage?: (resource: IPublicModelResource) => {}; - - onCopyPage?: (resource: IPublicModelResource) => {}; - - onAddComponent?: () => {}; - - onEditComponent?: (resource: IPublicModelResource) => {}; - - onCopyComponent?: (resource: IPublicModelResource) => {}; - - onDeleteComponent?: (resource: IPublicModelResource) => {}; - handleClose?: (force?: boolean) => void; filterResourceList?: () => {}; @@ -37,6 +22,21 @@ export interface IOptions { showIconText?: boolean; skeletonConfig?: IPublicTypeSkeletonConfig; + + /** + * 右键菜单项 + */ + contextMenuActions?: (ctx: IPublicModelPluginContext) => IPublicTypeContextMenuAction[]; + + /** + * 右键资源项，菜单项 + */ + resourceContextMenuActions?: (ctx: IPublicModelPluginContext, resource: IPublicModelResource) => IPublicTypeContextMenuAction[]; + + /** + * 右键资源组，菜单项 + */ + resourceGroupContextMenuActions?: (ctx: IPublicModelPluginContext, resources: IPublicModelResource[]) => IPublicTypeContextMenuAction[]; } const ViewManagerPane = ( @@ -82,7 +82,7 @@ ViewManagerPane.meta = { // 依赖的插件（插件名数组） dependencies: [], engines: { - lowcodeEngine: '^1.0.0', // 插件需要配合 ^1.0.0 的引擎才可运行 + lowcodeEngine: '^1.3.0', // 插件需要配合 ^1.0.0 的引擎才可运行 }, preferenceDeclaration: { title: intl('view_manager.src.ViewManagementPanelPlugIn'), @@ -93,49 +93,34 @@ ViewManagerPane.meta = { description: '', }, { - key: 'onAddPage', - type: 'function', - description: '', - }, - { - key: 'onDeletePage', - type: 'function', - description: '', - }, - { - key: 'onEditPage', - type: 'function', - description: '', - }, - { - key: 'onCopyPage', + key: 'handleClose', type: 'function', description: '', }, { - key: 'onAddComponent', - type: 'function', + key: 'showIconText', + type: 'boolean', description: '', }, { - key: 'onEditComponent', - type: 'function', + key: 'skeletonConfig', + type: 'object', description: '', }, { - key: 'onCopyComponent', + key: 'contextMenuActions', type: 'function', - description: '', + description: '右键菜单项', }, { - key: 'onDeleteComponent', + key: 'resourceContextMenuActions', type: 'function', - description: '', + description: '右键资源项，菜单项', }, { - key: 'handleClose', + key: 'resourceGroupContextMenuActions', type: 'function', - description: '', + description: '右键资源组，菜单项', }, { key: 'filterResourceList', diff --git a/packages/plugin-view-manager-pane/src/pane.tsx b/packages/plugin-view-manager-pane/src/pane.tsx index 4ba6c5c..05eca45 100644 --- a/packages/plugin-view-manager-pane/src/pane.tsx +++ b/packages/plugin-view-manager-pane/src/pane.tsx @@ -12,25 +12,29 @@ export function Pane(props: { props.options?.init?.(props.pluginContext); }, []); + const ContextMenu = props.pluginContext.commonUI?.ContextMenu || React.Fragment; + return ( -
+
{ - e.stopPropagation(); - }} + className="workspace-view-pane" > - { - return ; +
{ + e.stopPropagation(); }} - options={props.options} - /> + > + { + return ; + }} + options={props.options} + /> +
-
+ ); } From 95a06134fda55e67efdb4ce71ce4cda5d09f63c9 Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Mon, 15 Jan 2024 07:27:13 +0000 Subject: [PATCH 72/83] Bump version to --- packages/plugin-view-manager-pane/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-view-manager-pane/package.json b/packages/plugin-view-manager-pane/package.json index 7047ce6..a33709c 100644 --- a/packages/plugin-view-manager-pane/package.json +++ b/packages/plugin-view-manager-pane/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-view-manager-pane", - "version": "1.0.8", + "version": "2.0.0", "description": "alibaba lowcode editor undo redo plugin", "files": [ "es", From 9b09ec81329b667aa9f78a27b2b5118a62c56246 Mon Sep 17 00:00:00 2001 From: liujuping Date: Mon, 15 Jan 2024 17:02:54 +0800 Subject: [PATCH 73/83] feat(resource-tabs): fix resource tabs status error --- packages/plugin-resource-tabs/src/index.tsx | 112 +++++++++++--------- 1 file changed, 59 insertions(+), 53 deletions(-) diff --git a/packages/plugin-resource-tabs/src/index.tsx b/packages/plugin-resource-tabs/src/index.tsx index 4444fea..0b376be 100644 --- a/packages/plugin-resource-tabs/src/index.tsx +++ b/packages/plugin-resource-tabs/src/index.tsx @@ -13,7 +13,6 @@ import { CloseIcon, LockIcon, WarnIcon } from './icon'; import { intl } from './locale'; function CustomTabItem(props: { - key: string; pluginContext: IPublicModelPluginContext; options: IOptions; resource: IPublicModelResource; @@ -114,7 +113,7 @@ interface ITabItem { windowId: string; } -function Content(props: { +function TabsContent(props: { pluginContext: IPublicModelPluginContext; options: IOptions; }) { @@ -236,62 +235,69 @@ function Content(props: { } }, [resourceListMap]); - const ContextMenu = pluginContext?.commonUI?.ContextMenu || React.Fragment; 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; - } + ( + + )} + 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 ( - - ); - })} - -
- + 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[]; From 84a387b96abb4cb891b6172b2415a0df86101e01 Mon Sep 17 00:00:00 2001 From: liujuping Date: Mon, 15 Jan 2024 17:12:28 +0800 Subject: [PATCH 74/83] fix(view-manager): fix view manager tips error --- .../src/components/resourceTree/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx b/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx index 218454a..b3f9e95 100644 --- a/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx +++ b/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx @@ -344,7 +344,7 @@ function ResourceItem(props: { return ( { context }
} triggerType="hover" align='r' title="" From c6e40c77a004c58fbaf867df6b54694a66b97cd5 Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Mon, 15 Jan 2024 09:17:41 +0000 Subject: [PATCH 75/83] Bump version to --- packages/plugin-resource-tabs/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-resource-tabs/package.json b/packages/plugin-resource-tabs/package.json index 5d1f8a7..2e6571c 100644 --- a/packages/plugin-resource-tabs/package.json +++ b/packages/plugin-resource-tabs/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-resource-tabs", - "version": "2.0.0", + "version": "2.0.1", "description": "alibaba lowcode resource tabs plugin", "files": [ "es", From 432ba9d71aad6f7426f4983d71d7f7022d24e597 Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Mon, 15 Jan 2024 09:22:53 +0000 Subject: [PATCH 76/83] Bump version to --- packages/plugin-view-manager-pane/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-view-manager-pane/package.json b/packages/plugin-view-manager-pane/package.json index a33709c..5c7b92c 100644 --- a/packages/plugin-view-manager-pane/package.json +++ b/packages/plugin-view-manager-pane/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-view-manager-pane", - "version": "2.0.0", + "version": "2.0.1", "description": "alibaba lowcode editor undo redo plugin", "files": [ "es", From 134976287263e48bc7205376200f5ce80b8c06fd Mon Sep 17 00:00:00 2001 From: jingyu Date: Thu, 22 Feb 2024 17:58:25 +0800 Subject: [PATCH 77/83] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E5=A4=9A?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E7=BC=96=E8=BE=91=E5=99=A8=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/plugin-multiple-editor/README.md | 1 + packages/plugin-multiple-editor/package.json | 6 +- .../plugin-multiple-editor/src/Context.tsx | 34 +++- .../plugin-multiple-editor/src/Controller.ts | 126 +++++++++++---- .../plugin-multiple-editor/src/EditorHook.ts | 1 + .../src/MonacoSuggestions.ts | 67 ++++++++ .../src/MultipleFileEditor/Editor.tsx | 106 ++++++++----- .../src/MultipleFileEditor/index.less | 16 +- .../src/MultipleFileEditor/util.tsx | 16 +- .../plugin-multiple-editor/src/Service.ts | 42 ++++- .../FileTree/TreeNode/img/rename.png | Bin 0 -> 2170 bytes .../components/FileTree/TreeNode/index.less | 24 ++- .../components/FileTree/TreeNode/index.tsx | 75 ++++++--- .../src/components/FileTree/index.less | 10 +- .../src/components/FileTree/index.tsx | 77 ++++++++-- .../src/components/MonacoEditor/index.tsx | 35 +++-- .../src/components/Outline/img/class.png | Bin 0 -> 2229 bytes .../src/components/Outline/img/function.png | Bin 0 -> 3438 bytes .../src/components/Outline/img/props.png | Bin 0 -> 3458 bytes .../src/components/Outline/index.less | 93 +++++++++++ .../src/components/Outline/index.tsx | 145 ++++++++++++++++++ .../src/components/Outline/utils.ts | 59 +++++++ .../delete-hidden-transducer/index.ts | 2 +- .../scenario-switcher/index.tsx | 13 +- .../scenarios/basic-antd/plugin.tsx | 23 +-- .../plugin.tsx | 17 +- .../scenarios/basic-fusion/plugin.tsx | 21 +-- .../dev-config/scenarios/next-pro/plugin.tsx | 17 +- .../node-extended-actions/plugin.tsx | 29 ++-- .../src/dev-config/universal/plugin.tsx | 11 -- .../src/dev-config/universal/utils.ts | 5 +- .../plugin-multiple-editor/src/global.d.ts | 6 + .../plugin-multiple-editor/src/index.dev.tsx | 42 ++++- packages/plugin-multiple-editor/src/index.tsx | 14 +- .../src/plugins/prettier-plugin/index.tsx | 58 +++++++ .../src/plugins/prettier-plugin/prettier.png | Bin 0 -> 3377 bytes .../src/plugins/search-plugin/index.ts | 1 + .../src/plugins/search-plugin/search.ts | 3 + .../plugin-multiple-editor/src/types/index.ts | 4 +- .../plugin-multiple-editor/src/utils/code.ts | 7 +- .../src/utils/constants.ts | 2 + .../plugin-multiple-editor/src/utils/files.ts | 37 +++-- .../src/utils/get-methods.ts | 2 +- .../src/utils/ghostBabel.ts | 77 +++++++++- .../plugin-multiple-editor/src/utils/index.ts | 1 + .../src/utils/multipleFile/babel/compile.ts | 6 +- .../plugin-multiple-editor/src/utils/path.ts | 68 ++++++++ .../src/utils/script-loader.ts | 50 ++++++ .../src/utils/transformUMD.ts | 2 +- packages/plugin-multiple-editor/tsconfig.json | 117 +++----------- 50 files changed, 1222 insertions(+), 346 deletions(-) create mode 100644 packages/plugin-multiple-editor/src/MonacoSuggestions.ts create mode 100644 packages/plugin-multiple-editor/src/components/FileTree/TreeNode/img/rename.png create mode 100644 packages/plugin-multiple-editor/src/components/Outline/img/class.png create mode 100644 packages/plugin-multiple-editor/src/components/Outline/img/function.png create mode 100644 packages/plugin-multiple-editor/src/components/Outline/img/props.png create mode 100644 packages/plugin-multiple-editor/src/components/Outline/index.less create mode 100644 packages/plugin-multiple-editor/src/components/Outline/index.tsx create mode 100644 packages/plugin-multiple-editor/src/components/Outline/utils.ts create mode 100644 packages/plugin-multiple-editor/src/plugins/prettier-plugin/index.tsx create mode 100644 packages/plugin-multiple-editor/src/plugins/prettier-plugin/prettier.png create mode 100644 packages/plugin-multiple-editor/src/utils/path.ts create mode 100644 packages/plugin-multiple-editor/src/utils/script-loader.ts diff --git a/packages/plugin-multiple-editor/README.md b/packages/plugin-multiple-editor/README.md index c53fcf5..dab124a 100644 --- a/packages/plugin-multiple-editor/README.md +++ b/packages/plugin-multiple-editor/README.md @@ -58,6 +58,7 @@ await plugins.register(plugin); 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/package.json b/packages/plugin-multiple-editor/package.json index 289f34c..053834e 100644 --- a/packages/plugin-multiple-editor/package.json +++ b/packages/plugin-multiple-editor/package.json @@ -24,7 +24,8 @@ "release": "fast-publish" }, "dependencies": { - "@alilc/lowcode-types": "^1.0.3" + "@alilc/lowcode-types": "^1.0.3", + "@babel/types": "^7.16.0" }, "devDependencies": { "@alifd/next": "^1.25.29", @@ -122,6 +123,9 @@ "webpackbar": "^5.0.2", "workbox-webpack-plugin": "^6.4.1" }, + "resolutions": { + "@types/react": "^17.0.2" + }, "browserslist": { "production": [ ">0.2%", diff --git a/packages/plugin-multiple-editor/src/Context.tsx b/packages/plugin-multiple-editor/src/Context.tsx index 9346c35..b90b61b 100644 --- a/packages/plugin-multiple-editor/src/Context.tsx +++ b/packages/plugin-multiple-editor/src/Context.tsx @@ -21,7 +21,6 @@ import { sortDir, } from './utils/files'; import { editorController } from './Controller'; -import { getDefaultFileList } from './MultipleFileEditor/util'; export type CurrentFile = { file?: File; @@ -39,11 +38,13 @@ export interface EditorContextType { updateFileTreeByPath( path: string[], target: Dir | File, - operation: 'delete' | 'add' + 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 }[]; } @@ -86,7 +87,9 @@ export const EditorProvider: FC<{ () => editorController.getCodeTemp()?._sourceCodeMap.files || {}, [] ); - const initFileTree = fileMap ? fileMapToTree(fileMap) : new Dir('/'); + const initFileTree = fileMap + ? fileMapToTree(fileMap) + : new Dir('/', [], [], ''); const initState: StoreState = { declarations: '', extraLibs: [], @@ -103,7 +106,7 @@ export const EditorProvider: FC<{ if (typeof file === 'string') { const { fileTree } = state; const targetFile = getFileByPath(fileTree, file, path); - finalFile = targetFile || new File('index.js', ''); + finalFile = targetFile || new File('index.js', '', 'index.js'); } else { finalFile = file; } @@ -123,12 +126,14 @@ export const EditorProvider: FC<{ updateFileTree(tree: Dir) { dispatch({ type: 'update', payload: { fileTree: sortDir(tree) } }); }, - updateFileTreeByPath(path, target, operation) { + 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) }; // 新增文件时，选中当前文件 @@ -147,12 +152,27 @@ export const EditorProvider: FC<{ 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, selectFile, softSave, state] + [fileMap, mode, selectFile, softSave, state] ); useEffect(() => { const off = editorController.onSourceCodeChange((codeMap) => { - const fileTree = fileMapToTree(codeMap) || new Dir('/'); + const fileTree = fileMapToTree(codeMap) || new Dir('/', [], [], ''); dispatch({ type: 'update', payload: { fileTree } }); const targetFile = getFileByPath(fileTree, 'index.js', []); setTimeout(() => { diff --git a/packages/plugin-multiple-editor/src/Controller.ts b/packages/plugin-multiple-editor/src/Controller.ts index cce1d56..401838a 100644 --- a/packages/plugin-multiple-editor/src/Controller.ts +++ b/packages/plugin-multiple-editor/src/Controller.ts @@ -1,8 +1,10 @@ import type { Project, Event } from '@alilc/lowcode-shell'; -import { skeleton, common } from '@alilc/lowcode-engine'; +import { IPublicTypeProjectSchema } from '@alilc/lowcode-types'; +import { skeleton } from '@alilc/lowcode-engine'; import { beautifyCSS, compatGetSourceCodeMap, + fileMapToTree, getConstructorContent, getDefaultDeclaration, getInitFuncContent, @@ -10,7 +12,8 @@ import { treeToMap, } from './utils'; import { FunctionEventParams, Monaco, ObjectType } from './types'; -import type { editor } from 'monaco-editor'; +import { common } from '@alilc/lowcode-engine'; +import { editor } from 'monaco-editor'; import { addFunction, focusByFunctionName, @@ -21,13 +24,14 @@ import { EditorContextType } from './Context'; import { Message } from '@alifd/next'; import { getMethods } from './utils/get-methods'; import { EditorHook, HookKeys } from './EditorHook'; -import { Service } from './Service'; +import { PluginHooks, Service } from './Service'; +import { MonacoSuggestions } from './MonacoSuggestions'; export * from './EditorHook'; export interface EditorControllerState { declarationsMap: Record; - extraLibs: Array<{ path: string; content: string }>; + extraLibs: { path: string; content: string }[]; } export type HookHandleFn = (fn: T) => () => void; @@ -49,7 +53,9 @@ export class EditorController extends EditorHook { defaultFiles: ObjectType; - monaco?: Monaco; + useLess?: boolean; + + public monaco?: Monaco; private codeTemp?: CodeTemp; @@ -59,23 +65,30 @@ export class EditorController extends EditorHook { private state: EditorControllerState; - codeEditor?: editor.IStandaloneCodeEditor; + public codeEditor?: editor.IStandaloneCodeEditor; + + public codeEditorCtx?: EditorContextType; + + public service!: Service; - private codeEditorCtx?: EditorContextType; + private loadMonacoPromise?: Promise; - service!: Service; + private monacoSuggestions: MonacoSuggestions; - onImportSchema: HookHandleFn<(schema: any) => void | Promise> = - this.hookFactory(HookKeys.onImport); + public onImportSchema: HookHandleFn< + (schema: IPublicTypeProjectSchema) => void | Promise + > = this.hookFactory(HookKeys.onImport); - onSourceCodeChange: HookHandleFn<(code: any) => void> = this.hookFactory( - HookKeys.onSourceCodeChange - ); + public onSourceCodeChange: HookHandleFn<(code: any) => void> = + this.hookFactory(HookKeys.onSourceCodeChange); - onEditCodeChange: HookHandleFn< + 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 = { @@ -85,6 +98,21 @@ export class EditorController extends EditorHook { 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) { @@ -94,6 +122,7 @@ export class EditorController extends EditorHook { this.setupEventListeners(); this.initCodeTempBySchema(this.getSchema(true)); this.triggerHook(HookKeys.onImport, this.getSchema(true)); + this.initMonaco(); } initCodeEditor( @@ -102,6 +131,7 @@ export class EditorController extends EditorHook { ) { this.codeEditor = codeEditor; this.codeEditorCtx = ctx; + this.monacoSuggestions.init(); } setCodeTemp(code: any | ((old: CodeTemp) => CodeTemp)) { @@ -122,7 +152,7 @@ export class EditorController extends EditorHook { this.applyLibs(); } - addComponentDeclarations(list: Array<[string, string]> = []) { + addComponentDeclarations(list: [string, string][] = []) { for (const [key, dec] of list) { this.state.declarationsMap[key] = dec; } @@ -131,7 +161,7 @@ export class EditorController extends EditorHook { } private publishExtraLib() { - const libs: Array<{ path: string; content: string }> = []; + const libs: { path: string; content: string }[] = []; this.extraLibMap.forEach((content, path) => libs.push({ content, path })); this.state.extraLibs = libs; this.publish(); @@ -151,10 +181,7 @@ export class EditorController extends EditorHook { private async applyLibs() { if (!this.monaco) { - const { getMonaco } = await import( - '@alilc/lowcode-plugin-base-monaco-editor' - ); - this.monaco = await getMonaco(undefined) as any; + await this.initMonaco(); } const decStr = Object.keys(this.state.declarationsMap).reduce( (v, k) => `${v}\n${k}: ${this.state.declarationsMap[k]};\n`, @@ -173,7 +200,7 @@ export class EditorController extends EditorHook { }); } - getSchema(pure?: boolean): any { + getSchema(pure?: boolean): IPublicTypeProjectSchema { const schema = this.project.exportSchema( common.designerCabin.TransformStage.Save ); @@ -182,15 +209,21 @@ export class EditorController extends EditorHook { ? treeToMap(this.codeEditorCtx.fileTree) : this.codeTemp?._sourceCodeMap.files; // 获取最新的fileMap if (fileMap && !pure) { - if (!this.compileSourceCode(fileMap)) { - throw new Error('编译失败'); + try { + if (!this.compileSourceCode(fileMap)) { + // 下面会导致整个页面挂掉，先作为弱依赖，给个提示 + throw new Error('编译失败'); + } + Object.assign(schema.componentsTree[0], this.codeTemp); + } catch (error) { + console.error(error); + Message.error('源码编译失败，请返回修改'); } - Object.assign(schema.componentsTree[0], this.codeTemp); } return schema; } - importSchema(schema: any) { + importSchema(schema: IPublicTypeProjectSchema) { this.project.importSchema(schema); this.initCodeTempBySchema(schema); this.triggerHook(HookKeys.onImport, schema); @@ -217,15 +250,15 @@ export class EditorController extends EditorHook { }; } - initCodeTempBySchema(schema: any) { + public initCodeTempBySchema(schema: IPublicTypeProjectSchema) { const componentSchema = schema.componentsTree[0] || {}; - const { css, methods, state, lifeCycles } = componentSchema; + const { css, methods, state, lifeCycles } = componentSchema as any; const codeMap = (componentSchema as any)._sourceCodeMap; const defaultFileMap = { ...this.defaultFiles, - ...getDefaultFileList(schema), + ...getDefaultFileList(schema, this.useLess), }; - const compatMap = compatGetSourceCodeMap(codeMap); + const compatMap = compatGetSourceCodeMap(codeMap, defaultFileMap); this.codeTemp = { css, methods, @@ -233,7 +266,6 @@ export class EditorController extends EditorHook { lifeCycles, _sourceCodeMap: { ...compatMap, - files: defaultFileMap, }, }; } @@ -253,8 +285,8 @@ export class EditorController extends EditorHook { this.editor?.on('common:codeEditor.addFunction', (( params: FunctionEventParams ) => { + this.codeEditorCtx?.selectFile('index.js', []); setTimeout(() => { - this.codeEditorCtx?.selectFile('index.js', []); if (this.monaco && this.codeEditor) { addFunction(this.codeEditor, params, this.monaco); } @@ -306,7 +338,20 @@ export class EditorController extends EditorHook { pageNode.state = state; pageNode.methods = methods; pageNode.lifeCycles = lifeCycles; - pageNode.css = beautifyCSS(fileMap['index.css'] || '', {}); + 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() { }', @@ -341,10 +386,25 @@ export class EditorController extends EditorHook { return true; } - resetSaveStatus() { + 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); } diff --git a/packages/plugin-multiple-editor/src/EditorHook.ts b/packages/plugin-multiple-editor/src/EditorHook.ts index 0433d69..8fcf145 100644 --- a/packages/plugin-multiple-editor/src/EditorHook.ts +++ b/packages/plugin-multiple-editor/src/EditorHook.ts @@ -2,6 +2,7 @@ export enum HookKeys { onImport = 'onImport', onSourceCodeChange = 'onSourceCodeChange', onEditCodeChange = 'onEditCodeChange', + onMonacoLoaded = 'onMonacoLoaded', } export class EditorHook { 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 index ee1b2fc..cb1e374 100644 --- a/packages/plugin-multiple-editor/src/MultipleFileEditor/Editor.tsx +++ b/packages/plugin-multiple-editor/src/MultipleFileEditor/Editor.tsx @@ -1,20 +1,14 @@ 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, - useMemo, - useRef, - useState, -} from 'react'; +import React, { FC, useCallback, useEffect, useRef, useState } from 'react'; import './index.less'; import { HandleChangeFn } from '../components/FileTree/TreeNode'; import { languageMap } from '../utils/constants'; -import { getKeyByPath, parseKey, treeToMap } from 'utils/files'; +import { parseKey, treeToMap } from 'utils/files'; import { editorController, HookKeys } from '../Controller'; import { initEditorModel, useUnReactiveFn } from './util'; @@ -22,6 +16,10 @@ 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 { @@ -37,34 +35,30 @@ const Editor: FC = () => { 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 = useMemo( - () => [...path, file?.name].join('/'), - [file?.name, path] - ); + 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); - const curKey = getKeyByPath(path, file?.name || ''); editorController.triggerHook(HookKeys.onEditCodeChange, { - file: path - .join('/') - .concat('/') - .concat(file?.name || ''), + file: file?.fullPath, content: value, }); - if (!modifiedKeys.find((k) => k === curKey)) { - updateState({ modifiedKeys: [...modifiedKeys, curKey] }); + if (!modifiedKeys.find((k) => k === file?.fullPath)) { + updateState({ modifiedKeys: [...modifiedKeys, file?.fullPath as any] }); } }, - [file, modifiedKeys, path, updateState] + [file, modifiedKeys, updateState] ); const handleCompile = useCallback( @@ -87,7 +81,6 @@ const Editor: FC = () => { }, [fileTree] ); - const { handler: handleSave } = useUnReactiveFn(() => { if (handleCompile(true)) { // 全部保存, 标记清空 @@ -109,6 +102,10 @@ const Editor: FC = () => { monacoRef.current = monaco; initEditorModel(initialFileMap, monaco); editorController.initCodeEditor(codeEditor, editorContext); + editorController.service.triggerHook( + PluginHooks.onEditorMount, + codeEditor + ); }, [editorContext, initialFileMap] ); @@ -120,16 +117,12 @@ const Editor: FC = () => { }, [editorContext]); useEffect(() => { - const filepath = path - .join('/') - .concat('/') - .concat(file?.name || ''); editorController.service.triggerHook(PluginHooks.onSelectFileChange, { - filepath, + filepath: file?.fullPath, content: file?.content, }); editorController.triggerHook(HookKeys.onEditCodeChange, { - file: filepath, + file: file?.fullPath, content: file?.content, }); }, [file, path]); @@ -150,6 +143,27 @@ const Editor: FC = () => { 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 (
{ )} ref={containerRef as any} > - handleCompile()} - fullscreen={fullscreen} - onFullscreen={handleFullScreen} +
+ handleCompile()} + fullscreen={fullscreen} + onFullscreen={handleFullScreen} + actions={editorController.service.actionMap} + /> +
+ -
+

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

{file ? ( => { +export const getDefaultFileList = ( + rootSchema: any, + useLess?: boolean +): ObjectType => { const sourceCodeMap = rootSchema?.componentsTree?.[0]?._sourceCodeMap || {}; const { files } = compatGetSourceCodeMap(sourceCodeMap); // 兼容旧格式 if (files['index.js']) { @@ -28,7 +31,8 @@ export const getDefaultFileList = (rootSchema: any): ObjectType => { {} ) ), - 'index.css': rootSchema?.componentsTree?.[0]?.css || '', + [useLess ? 'index.less' : 'index.css']: + rootSchema?.componentsTree?.[0]?.css || '', ...files, }; @@ -101,9 +105,13 @@ export async function addFunction( if (!monacoEditor || !monaco) { return; } - const count = monacoEditor.getModel()?.getLineCount() ?? 0; - const range = new monaco.Range(count, 1, count, 1); + 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`; diff --git a/packages/plugin-multiple-editor/src/Service.ts b/packages/plugin-multiple-editor/src/Service.ts index 2ceb81c..79dd16c 100644 --- a/packages/plugin-multiple-editor/src/Service.ts +++ b/packages/plugin-multiple-editor/src/Service.ts @@ -1,11 +1,15 @@ -import { EditorController } from './Controller'; +import { ReactElement } from 'react'; +import { EditorController, HookHandleFn } from './Controller'; import { EditorHook } from './EditorHook'; -import type { Skeleton } from '@alilc/lowcode-shell'; +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 { @@ -16,6 +20,14 @@ 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); @@ -24,12 +36,19 @@ export class Service extends EditorHook { public onSelectFileChange = this.hookFactory(PluginHooks.onSelectFileChange); - constructor(public controller: EditorController, private skeleton: Skeleton) { + 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) { - // this.options = options; const { plugins } = options; if (plugins) { for (const plugin of plugins) { @@ -41,12 +60,12 @@ export class Service extends EditorHook { } private setupHooks() { - this.skeleton.onShowPanel((pluginName) => { + this.skeleton.onHidePanel((pluginName) => { if (pluginName === 'codeEditor') { this.triggerHook(PluginHooks.onDeActive); } }); - this.skeleton.onHidePanel((pluginName) => { + this.skeleton.onShowPanel((pluginName) => { if (pluginName === 'codeEditor') { this.triggerHook(PluginHooks.onActive); } @@ -56,4 +75,15 @@ export class Service extends EditorHook { 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/rename.png b/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/img/rename.png new file mode 100644 index 0000000000000000000000000000000000000000..7a82ae226993e8b64c9d91bce5bc275ae26abb9b GIT binary patch literal 2170 zcmcgu`&Scp7N3LxClIp}P(U2?8=|7sf;==tUKyYaD2IpDg+>I?fT$=ku?2aCQ6LCH z;tQ$58f}ZZzIeDrc@}~h1f*iO0xK?4n*`w#5dAA0tO`}*A1IrrRi&&>@E zBo-Q58AA}X(BIEzt6tLoA;d_}Z-(6})eDAnE8zv*dW5}#AjH|<2j7+yF;)^nVgj}y zVS75QLT#J(b>%PBRnxvbeLRudDIjj(K^4pIZ&d1L#`;Z|Xwv5Xg&R>>qm+p>eIx2O zWWZ7GKn7kza4I|lPbOTsjxgXgrp}%3xgvDA;Q9$vq_Dx?1uSR$56;YG_`FAfwhpm< z1m|PcdQtDvJzMP1F9=Sb>BWai+!oLMxm5IKp#lHNd}yj zWP_I(Nonunc3$q4GG>wk8b8x4@{d8td1IHnFLx}xjWz2tdh<4Er|L-dSs0JG;n!Cj zLOw$t{(ca~N9;z2i^@)G;p5=S)9;3A&yc{cBij1YNEHd_;qBK1_IEL4YkU+@?^1^$ zj^xh$9lc&0_}bm7D-ks(^~nC{k@lX=dZeXNUd4~x7QumY!^`TDd78bYb3sd|#joX0fyVj^ zI5+HCS~AcSt>a4mHaMQfBHe%-)E&4>xRY+JTzoogqBIm}Op=kVO7ZLgrPjt9Zf(## zw*Z8J5Z))N8sO?;*^6;2{NNF`kR4?sXZ&hJD4Q*9D9g;19tBvz1gd6y9>pSEyuDG| zYM*HOG1r_r(zqq~1XjZ1`PnvRwJG@kgITibT_!rj*bt{gcE1=2nav`F=)6glS3y6D zuCN?de?#+Rg@Ae0Ol*^bY@+0ioVYy9s~fR7?s{nhDd+L!mUr&BlgPkxF`tHLimQ+R z?dnR3&9rvWmy3$H>!n!hb>Nd!XL)e}#Ws5Gz!7fhKe~mh-f}3;n#>>klww5%Fyk%r zFr%=?1b4-^v2mU{`QX0sY!D-9HdgGh9C>*Rm1LsJ!WlyIRzuvJ^TcNFdEr=REjGa!)tkf*o6d% zk5=M}OL4UfKmLR$!a7cyEfs1 zp$7GVrhe@*`7pnk=CQA;?h3p;aI5}OqE^-^*2NxQ=Qh;w7o4q10{k4tor$ZqHSabd zyV)&FD`EcOEY0Wl`XUW*OjXtB%UKW><-aAS@Bv@$bSAV>+05D=mJPhBJH?(<0cJ+U zTIPaTY+|8vvTJbLy+OPVAww2$eSNjObDxL>(Epl9b3qDpHziZ~vKQ<0AY~q`OB(%_)22MqvNk*rYVFBQk!- z*cb%MA!?EFg|c4#U`m!O&O(5n>dw*YB@oqJ91`*;IOj}EyEHF}#Fb3_GXeR35$JQv HYZvtgRwSS% literal 0 HcmV?d00001 diff --git a/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/index.less b/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/index.less index fe1f70f..a93b105 100644 --- a/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/index.less +++ b/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/index.less @@ -1,5 +1,8 @@ .ilp-tree-node { width: 100%; + overflow-y: auto; + overflow-x: hidden; + height: calc(100% - 24px); line-height: 24px; font-size: 12px; color: #333; @@ -41,14 +44,14 @@ img { width: 14px; height: 14px; + position: relative; + display: block; } span { margin-left: 4px; } - &-icon { - position: absolute; - right: 8px; - top: calc(50% - 7px); + &-icon-delete { + margin-right: 2px; } } &-title { @@ -85,11 +88,18 @@ height: 6px; border-radius: 50%; } - &-icon { + &-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 { - display: block; + &:hover &-icon-wrap { + display: flex; } } } diff --git a/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/index.tsx b/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/index.tsx index 3f19078..8386112 100644 --- a/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/index.tsx +++ b/packages/plugin-multiple-editor/src/components/FileTree/TreeNode/index.tsx @@ -6,6 +6,7 @@ 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'; @@ -15,6 +16,12 @@ 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; @@ -25,6 +32,7 @@ export interface TreeNodeProps { onChange?: HandleChangeFn; onAdd?: HandleAddFn; onDelete?: HandleDeleteFn; + onRename?: HandleRenameFn; className?: string; } @@ -37,7 +45,7 @@ const helpPopupProps = { placementOffset: 4, }; -const defaultDir = new Dir('root'); +const defaultDir = new Dir('/', [], [], ''); const TreeNode: FC = ({ dir = defaultDir, @@ -48,6 +56,7 @@ const TreeNode: FC = ({ onChange, onDelete, onAdd, + onRename, modifiedKeys, disableAction, }) => { @@ -75,20 +84,39 @@ const TreeNode: FC = ({ ]; // 根目录不能删除 if (parentKey) { - baseActions.push({ - title: '删除目录', - action: () => { - path.pop(); - onDelete?.(path, dir); + baseActions.push( + { + title: '删除目录', + action: () => { + path.pop(); + onDelete?.(path, dir); + }, + id: 'delete', }, - id: 'delete', - }); + { + title: '修改目录名', + action: () => { + path.pop(); + onRename?.('dir', path, dir); + }, + id: 'rename', + } + ); } return baseActions; - }, [dir, onAdd, onDelete, parentKey]); + }, [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, @@ -176,6 +204,7 @@ const TreeNode: FC = ({ parentKey={getKey(parentKey, d.name)} onChange={onChange} onAdd={onAdd} + onRename={onRename} onDelete={onDelete} modifiedKeys={modifiedKeys} /> @@ -188,23 +217,29 @@ const TreeNode: FC = ({ style={{ paddingLeft: 8 * (level + 1) }} className={cls( 'ilp-tree-node-file', - selectedKey === key && 'ilp-tree-node-file-selected', - modifiedKeys?.find((k) => k === key) && + selectedKey === f.fullPath && 'ilp-tree-node-file-selected', + modifiedKeys?.find((k) => k === f.fullPath) && 'ilp-tree-node-file-modified' )} onClick={() => handleFileClick(f, key)} > file {f.name} - {f.ext !== 'css' && - !(f.name === 'index.js' && !parentKey) && - !actionDisabled && ( - handleDelete(e, f, key)} - /> + {!(f.name === 'index.js' && !parentKey) && !actionDisabled && ( +
+ handleDelete(e, f, key)} + /> + handleRename(e, f, key)} + /> +
)}
); diff --git a/packages/plugin-multiple-editor/src/components/FileTree/index.less b/packages/plugin-multiple-editor/src/components/FileTree/index.less index 65d9825..e4511a8 100644 --- a/packages/plugin-multiple-editor/src/components/FileTree/index.less +++ b/packages/plugin-multiple-editor/src/components/FileTree/index.less @@ -1,13 +1,21 @@ .ilp-file-bar { - width: 200px; + 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; diff --git a/packages/plugin-multiple-editor/src/components/FileTree/index.tsx b/packages/plugin-multiple-editor/src/components/FileTree/index.tsx index b3c51bd..979c8e7 100644 --- a/packages/plugin-multiple-editor/src/components/FileTree/index.tsx +++ b/packages/plugin-multiple-editor/src/components/FileTree/index.tsx @@ -1,18 +1,19 @@ 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, getKeyByPath } from '../../utils/files'; +import { Dir, File, getFileOrDirTarget } from '../../utils/files'; import TreeNode, { HandleAddFn, HandleChangeFn, HandleDeleteFn, + HandleRenameFn, } from './TreeNode'; import './index.less'; import { useEditorContext } from '../../Context'; -// import saveIcon from './img/save.svg'; 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; @@ -22,9 +23,10 @@ export interface FileTreeProps { onSave?: () => any; onFullscreen?: (enable: boolean) => void; fullscreen?: boolean; + actions?: PluginAction[]; } -const defaultDir = new Dir('/'); +const defaultDir = new Dir('/', [], [], ''); function validate( data: { type: string; path: any }, @@ -46,8 +48,13 @@ function validate( return '文件或文件夹已存在'; } } + if (data.type === 'file' && name.endsWith('.less') && name !== 'index.less') { + return 'less 文件仅支持创建 index.less'; + } if (data.type === 'file') { - return name && /\.(js)$/.test(name) ? undefined : '文件名必填且未js后缀'; + return name && /\.(js|less)$/.test(name) + ? undefined + : '文件名必填且未js后缀'; } } @@ -63,14 +70,33 @@ const FileTree: FC = ({ 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 }>({} as any).current; + 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: '' }); @@ -78,7 +104,6 @@ const FileTree: FC = ({ }, [tmp] ); - const handleClose = useCallback(() => { setVisible(false); }, []); @@ -87,7 +112,7 @@ const FileTree: FC = ({ setValue({ name: v }); }, []); - const handleAddFileToTree = useCallback( + const handleEditFileToTree = useCallback( async (e?: React.KeyboardEvent) => { if (e && !(e.key === 'Enter' || e?.keyCode === 13)) { return; @@ -95,8 +120,16 @@ const FileTree: FC = ({ const { name } = value; const validMsg = validate(tmp, name, fileTree); if (!validMsg) { - const target = tmp.type === 'file' ? new File(name, '') : new Dir(name); - updateFileTreeByPath(tmp.path, target, 'add'); + 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); @@ -116,6 +149,10 @@ const FileTree: FC = ({ }, [updateFileTreeByPath] ); + let title = tmp.type === 'file' ? '新建文件' : '新建文件夹'; + if (tmp.operation === 'rename') { + title = tmp.type === 'file' ? '重命名文件' : '重命名文件夹'; + } return (

@@ -133,6 +170,16 @@ const FileTree: FC = ({ title="编译代码" onClick={onSave} /> + {actions?.map((item) => ( + + {item.icon} + + ))}

@@ -143,20 +190,18 @@ const FileTree: FC = ({ onChange={onChange} onAdd={handleAdd} onDelete={handleDelete} + onRename={handleRename} modifiedKeys={modifiedKeys} - selectedKey={getKeyByPath( - currentFile.path, - currentFile.file?.name || '' - )} + selectedKey={currentFile.file?.fullPath} /> handleAddFileToTree()} + onOk={() => handleEditFileToTree()} >
= ({ autoFocus value={value.name} onChange={handleChange} - onKeyDown={(e) => handleAddFileToTree(e)} + onKeyDown={(e) => handleEditFileToTree(e)} />
diff --git a/packages/plugin-multiple-editor/src/components/MonacoEditor/index.tsx b/packages/plugin-multiple-editor/src/components/MonacoEditor/index.tsx index b514143..285079e 100644 --- a/packages/plugin-multiple-editor/src/components/MonacoEditor/index.tsx +++ b/packages/plugin-multiple-editor/src/components/MonacoEditor/index.tsx @@ -3,6 +3,7 @@ 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; @@ -33,6 +34,11 @@ class MonacoEditor extends PureComponent { componentWillUnmount() { window.removeEventListener('resize', this.handleResize); + editorController.onImportSchema(() => { + setTimeout(() => { + this.editor?.getModel()?.setValue(this.props.value || ''); + }, 500); + }); } componentDidUpdate(prevProps: MonacoEditorProps) { @@ -53,13 +59,6 @@ class MonacoEditor extends PureComponent { minimap: { enabled: this.props.isFullscreen }, }); } - // base editor 的bug，value 改变编辑器不会更新，暂时这么解决 - if ( - this.props.value !== prevProps.value && - this.props.filePath === prevProps.filePath - ) { - this.editor?.getModel()?.setValue(this.props.value || ''); - } } initMonaco = () => { @@ -76,13 +75,15 @@ class MonacoEditor extends PureComponent { // compiler options monaco.languages.typescript.javascriptDefaults.setCompilerOptions({ target: monaco.languages.typescript.ScriptTarget.ES2020, - module: monaco.languages.typescript.ModuleKind.ES2015, + 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); @@ -90,15 +91,21 @@ class MonacoEditor extends PureComponent { 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); - // console.log('Open definition for:', input); - // console.log( - // 'Corresponding model:', - // monaco.editor.getModel(input.resource) - // ); + // 定位到对应文件位置 + setTimeout(() => { + const position = { + lineNumber: selection.startLineNumber, + column: selection.startColumn, + }; + this.editor?.revealLineInCenter(position.lineNumber); + this.editor?.setPosition(position); + this.editor?.focus(); + }, 50); } - return result; // always return the base result + return result; }; window.addEventListener('resize', this.handleResize); }; 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 0000000000000000000000000000000000000000..a61249b24a2cda32ec95366207fffb209daa8ce3 GIT binary patch literal 2229 zcmdtkYcy0_902e$930X$L%Ad5c$H^0rf4ELj2Vyg6p}}cOzt8Rbt@X085UDsQ}Sv& z3SHHWlDwalGG!zsiAb6up@+vzk>(z2-H-Rn{d8OR!`}Zdd+ojU{_o#^?=w5LQJ1Q$ zPyqm7sjCZl7a9eN4N^q=QlGMXG+>VIqB;U)Pjtor0Aje35zmtWlX-_DwQaBpZ_NhH zdmdR7SV$UuGP>O^ci$ki4qM|ov?L4$*!>_jegMO^ zMZ+Wp10GOwfGI2uqlYOwogvue+@-zrWPsCJL%0rMKvVVg?a4R?9^QtsT%QFybLcq) zIY|B8!>a}$w%FyV1(5W_YMp=I~wWoBu#PKas}B;ww_2kl6$1hj-)|t!j;oYAP zzS17^QjnclTj0d|L6B{%k`%_?_!5&<=XoV|PHe_8iP-FIzT|e?eA%er{T?g#n6vYS z*kYTm9?=f9(%L{TNy*oFjgowWR8GSJ|Gt2{k|`-V1%hMRzi@J=nZx~_gRITdE4uWg zdes`6s;p<-nIA+iZzcD#6ggqdjeW6=9i0W>y=L5mf;vJzUj&X&7ItHwi+eXY@|?li z8sV|;MD25;f%facKh!Zus}D5~rfFYTjdQ@_)^oTm!gd^46^oGfkBA`yMJ{ZxZaNag z$&<0T>?jh4i!tCr!Ui3r6~K`}dO#{nV?hRT#I;l`!2!gvbFvJ%c=*4Z#!%ty0^EFW zXaTO4hy_bc>W)-0Jx|*eNXFKIiU$1Tp!4ngS3(Hp?%jWf?+zf5QAEBL zJ6M5ms&7al<5*1F?XB2cbFAK7h4wwS&p5xed?u9`8csrl+fqX#rk^Sjl|NS27s4O6 zYl)U2ya@34=YtP!EgsX$Cf||R@Wt)Bj$Wq9@NZ6}%vXgSUX(DC=B;^9N$S5~+H|^5 zc>9DQ^o$<@ckBB7lYwd_ng5R-Ctf`nC(`NE;5(xXg8ybPya4|iMhSC}M|AWm`!vQ& zJ5^+qTi!=AvwYfm0-`ZHwj8?9^7`s&H(H&}J}P9e!pe=8)V?)w6qh8*UmG|^YJ;Yj z;fxF|4%c$0JrCe;kNl*!``=j8F%^uxjgWCIC(CoCaj)He7b#AZr&DIzrlW5DL7ct& zVjndZF5F-UzAZ1Zamt>%6uA%a4Sn+Gm!{~?df&N|z9FXSn_ zCS`pAsZ*E9r+^WsD;R;sPwZ2qaekL9&7e<8wPn3C-tdt#FJ$%G?U5?Ynw_#`t;a}y zjA!$Vv8DpNx@g!cT^cvjVf6hs^L+SbX(e^-W7V}A4-9qlAIHyTT%>sX*zjQz+l$mzVGQAC)&Y=N07Pe0+I%<#bX4YGB=Z z-zTVys2e$t&=lemDD6?GfwT=oEp-R%{ih+MG}J&jeU%ex0KdX=6n!V{dV~jE07TWP zNNk51XuFuBstj`vgxtxc0?3pPF!(%r_pzEWhmXshy^EH?uuNA!VBuy`ZF&2 ZRqqzvZ4~xmCZYcjz}0yhxy*4t=PxN2o*V!G literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..a8981266a86852c1891f35de738d2258d3d88fa4 GIT binary patch literal 3438 zcmV-!4UzJRP)Px?C`m*?RCr$PolSNdxekR@UQ(QSw^!CLD~mI?yd+m2>WNOZVyQ^r0t8rBlg??A zAb5eVK-TYa;*SbYfx8MU)P@RBf%^&&5M~Dzc%T3QVR}#j0>T`i0x|_yL1enI*Fh8@ zAO{IFrzul_fXH-XuY)K+Kn@aUPE)1;0g>s(UI$TtfE*;yoTf|x0wU9my$+%P0XayZ zd#CyR`}e;~pO24^%YUDqo?fesx3{;?fA`wW)}DZ5izZlteHA_HTFykPwg|DdRh+_tNT%*`?i& z5D?#7bsueX^{5lhT15zmd&>F_7@&H5PWXI2r^~l=4*RB8?$M%DkE-IbEHBya-69~l z8F=V@r0S9Nv@Zc6Af5`O+pH51&-8E}>-qV4bslnexNQ3n0XU~Mm+;^Pio$3a=;{vJmqNnkZk)8p2dos-Ado0!I5!!ML?8E z7`1yqILg}^)7{BSK%!>2!mo&MWPMnQfG83%V%Lap6rD2eJ!*V;nm1ym3w(+SN7khk z0TCo&)Gkrs$h@>7AW^fu(=Wo&DOhK7F0ncVi`1NO*hhna*lTPuLR2`i?>TORMLX)IecFU*Nx;~3AD;V6Q!&BGZpcNcj z&+ErK*LAJmDck~c`FQ8LuD{AhJ+r;zN)jPf5Q%C7`gp)GU|QjaBp~5KbUG1^aX}&= z29i6yJM+Nw>t31ZNZ=Gs01{lz!SRBP6K+ z(ZF#jmyWOCpA`=6ys|-(1`sVAo`7hRXuAxEmQaYfMVr&3WmgJ75O8<_f=HmqXMj-i z%K}MwKu~a$q_f_nqmrli8aaWadyv~Bb>ul#Uqb_egu^-*M}eaxPV4ojmNQ1yacS`( z*TDKN2 z2+5x+nF4|i@{#V!^;%xtrUW7RuOeoE5RR5(_Wd@a04W|>9*By4^qDzJs7(Mt3t$~E zR5Bt1rS$1lyMM9P9GxRb?YD<5I3UOeh&+yFs7i+pkkqg02OD}{K#??vj~hNd2aoX*tm&<=`AVf<(5SppnxE&hcz51UoC=Cle8zn@A=VV zFOGV!ELmQVp`-oMD*2n4t+E*wbEy3Iq z(*uqxAnTqlkN%Dh#G|pU)vi1o_4!C`xg&R7*I)1N@0X_v_kP+0^q8;K$Eya=iiZY7 zm2_TkXqQ(W$+DO5lD}&c&|}_OAB!%?WmXtKyx`Do3_X%WlKicGv3i11ObQ_Bq(1qLZX2Ky@aX2 zg5ZE3w4fD4yARnOH9htuh$_-^L@kN=@$vEZ%_~F8t?4DO=I_ug<7nZq00aexg>P^` zP)BBuN`mxtuadNkWqnXUz=2-EAmOmk4-Uw+il}b{tkuL~(%VYalDMt=fqRhjB!Sg@ zL2y8qFg?07!~nYY_&gcYFmQJhR4`_MM3MyP)2P6Bz>-j+%cDfxtKi*9eC=RTL5gkU zkvZ#fOPU18DguN9Rz0M;+)HvRI4*lbDOoN3jtogzt4p5?M*)I_1LadDILrabSV_82Cu^HKL4x3O|rVp&~xus*wmOt=n6MAZZ7E8+MZEq6e&ZQRlOr#(<4)q`;C zsVe{b5I_jY*8w9OI9=pO{I};YKnTfAAeQCj?d|Py<6`TNm7`TDdAp&25R(4~j+G-` z<)|JF2ju9G5RSNTTn=9H;)Csp-VCG8#C$bNl&^#%HXNY&z;x*_w@Ai+I#voIvhw~rDyT*DBM}{c?~2P2VF_fPwGkL)YAu4s1GQ+XeAfxs@F`NRBo(V^2I}02U zw6yktfLJShW1nz13$7fFfG7p*=}tI$)QZuTfH=j0a5xDK9)^H`1^vn#;cyVyXb1vg zBy2THIE)20Hcvnd1tuJZ;yRfoAVxwH4kKZm%@Pm;!3l?fsDn%r5U}us11#uZa|8q! z0Kx$jGl(ey0ty7-00|k)3;_WIgm3^v3~GXaC<8+{lmZ6tPCyg^A{+|wl5`~?!axxY zp>WB%5fDMZ2!}wlq+JL|XW$4&r(nsOA0CjB@Y|P7FUwNi(*F5d*Y#I@0X5-Bp6vqn z4-1Ik)j{P0o1brO7ihhO?uX01<#8Q}#};$nWQZPIMAuhXG_X7$si_ zM?Pu}0SMv9mzYsJo*oe7$6lmCW95)4H@@H0fDn%H36|Z1X#pV|*;6xy|5F0OJx7e> zn!$_d06|{NlLnZ34ykhS`b`JO=%p3mh?nFVkEQ}7K=pV%pU*FvfUs{Y1*QUIboD5q zjruK;SZSBXo7n(aM@!Eo*60Xe$Dam}0L!b-$VC0z8#Z;0VQm^fA}p_J%CL&e0}lZ) zh$R6r5Ot7A0%9aQmsv)_I-8vdkl`EjZR`k$b0!-NM?kEEU6z-(x3}^XB7cb$m^(Lq#FtAY<3zzB3(&8 zold-I(K(T=hMNYEBGB{mbBI&D+<#c5tH0f;0Ew~>;quBqk*!9Y3XmXGgv%?dY#m^C zIzUEO5iYL=WU=9p1OzB9Z&Cz`8N}3dfD~OvRT1tzf@C$&jVS@S?nPX0J>k*{n3aJ{ zO$&(UbrCMD0%bJVm1zMfI(a}sIKUYh%-qy~SVKZMf@QOTJJSQQf#e_L?eN@l7-VBW zlZODL>W(LdyfkVyi`Y1k-0Kx}lS)kzfi7o2?yeeSru QyZ`_I07*qoM6N<$f;7D(F#rGn literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..97309a43a6410554786af3fa038b2f5fb6a5b1eb GIT binary patch literal 3458 zcmdT{S5VXY68JutdCkdHhh8)(GHE*O*fWeJc1BJ2FrT}%`K=xhY?j4(j65J(Uu z4#6_v@z|3i6^{roklxxwv&jea8Cr|)J|ytmN9-}rgoErJ{$jE)V34KFwL?)L?u>Sc zq7{G?gS19^mBIf!8LNQpoL=gDJF&1ep0i^%UW}>V7|6pkyOj^D{=f`PkH%=x)hvGv zxWZ7?Dwf!n>S`?rxOo3Me^s-BQVSd|e*PxMwW}18*vFV&+Gu_|@p_o0OY`VZ^`WGz z=56yM+m<%eEQL?3j~L!uX7C|+l>6{;pT7NdwtQeNsia8?jy6s#`C>CNUoHPmiT=w* z{g~JVJFEh31a{uw$+1y8&KYhp1~ZH=7)suZUL)b@(xtw&6b5m4#I3Q|jhNx6CA)d>)03Fe6I^k0!{u0;@77 zm~n?UCABmPm!MGvQm(1HN`(8o*J5}|7+r(O4Vu8E_gY#(i^LetViQO<`)I?Hj*WS& zZB;juBKHBsO*pZ0ZrNL=KT?E5Oy={k7lhgcI)}ubisOHcYv5jjL>8OaPO^;eHnP<_ zMxMmkr$Jwi3-rhY?qX;tUNX^70Bih%;Vyxc9+rmU1>oo$`t8SvxGsI*E*uyb0yIzZ zK=E(^|J^WdSe(_LuRp+AXRtsMb)rs(F20`&YYgMo=0@k-2CYh;KYs=8G)oOg^sSG@ z_~F%S-b+l6*BrwWztTiN~Ay%&)$K1I^9TlISm62j7f7*VYa=&5icpBf#Zo zsg)ON4{HaYMSMT{k9Jn<-IKdIa^IOyOFUSjQ3#9c;@$14qUojbhuuE^sdz3t1Ppp# zpA*Y-XiDiJ++A_4az0)We`8iFrTao)>beVhdcz%O(5|_F7V?(WtdHS!TQSEvO*bj?cR<`ZC z+~LARBgAf~1YU;bgAbK===>Gc>~eE=-;?OZaaD@OM}tf^j#^N|>s6~4>{w{Rv#HEy z4}{B4IIAjpBia{PJU*CokmhXXk8J0_9PzcM1eI@GI5F}&VtjLA0ez#T5gt!HeD46} z!3|!^JQ!~KjjVGHHt@8RJ>Echj>M0mx4x+ir?zMP_IvAt*6p+6&u$>az+tUeH;Wzx z?~XU7oevgNYuFDOBCoU+HxxoJv_>s=>I97_=(mtm)D6M0_!ffWnt5uO&92>!<#>hV z@c-f8>EW~qhn$MoS>L5{Da9&)DJFYs85>RK7eAq%g2CAb88aN3Tz!RxJzZum*~YCO z@X86x5aq?&VTe$EW9pG}+kEeZ;Qrya!h!ZyP4!y=IzY?BA) zJWcQGA=(@&&-O`v@&4(d6I!Vu2xQhz9+=Mi745UPif&G2 z8b73Q3MwxztINkJX}zucl;WPb@_C}i$BTyHD2f7Wh&KtJu*Q;7Mr)csDZ-4p%V!Xy zN=3;-NGvx7U`4gIYec*q4$1CgFc(8p%LeThm2YBNiEk^cqrTbAD5?25-__!USO#pj z$a{x> ztA3D{+z0mZ21FRKAUD;M()b5cRNX-F-fpc+$}|TOAjsApNNuO%mvh)X$-6 z_*`wDl)*i+nk0SmR~Dyh32YaSi>RKa7;TdxB*B$*|6>JJyf_dn;-9cHhUIJwH?e~! zKNa;zzn8HXgXL-h%3rz&X4)*_N#I!hc7-dfcnnOc+>+WkyD*$}(jtKI)uphqfjMf@)?m79A}UXMg2_e2*XSBRhbXZ)Au1Vd+G9o@lqo}^1w|fuRio;= zrGGG+I@l)tOuy%sUcCpcMOm-ig45DQbrkd|Oa0Gs8&jzdQ>lTSY+7Iw5hP)By*Jtvyen32od z!Cu{B`bA5fF$b;AR{B?CAmtjDh~wtWMViBt>;#Ic`=f^qc6K1$FP$RU8oquN-@J}u zO-0Z+(<4rLecX(6;AsE2C}ivY>%tY8g4v*;fW$2E=)~CuGxcIAr>p0ago{@T{nkga zt&a|L2($GQXHVa1Mf^FWR~ur#42d4o&G)7c)g)HeL4B56e|i|c1?$y|g( z=JJE9`fLpier`f#u+XdEphBlVk&i7f-nZ+$KFj2V+`CbuJTj$Cg6Hno8)-l|pMI^J zxFy2q)^bb0(#;&IMhwlrP3k-f!o?mYj-Ah*?co|7l#9I}+iSIXA;W@y@0+3gLv*F? z5_h?w5;2jwzDB|y?uDmF$FzZ)Kwb$hJ7*|k-gtY?_fMW zwDH%4n9CDUY#Y{mw*kZ&^6F|<#dau-!|oU%imB_FmM6q8$njOv+U_n#xc_9^g`nLt zFG{MO`<3#c7kD_g~;E_A;Mb2#}bW%3aNq+?%ICpIkn#Ic@Cm`wt7uA3y>x(dt?;*>l`V6tpUQ3fN+FdMy<=r)vcZK zZC*gG(shp$p6iif^`Y+^b#`GR(C;#+BR})W`MxXNy$7656;R{WLJi?5exa(ujMl=L zi{E2r^N<%Epnid4X8hHULPM7m0J$>d*ePs>H}jS3GrY(!Z%k9L!H=lD{^B)G2vVta z_uTQZGNrk-xz5d$^J-S3c3?Q zY5tl=^65Eo40nNjBDBHTpzHp$^`c^r{YImI(|TK;g7IhW(?{Z!DRzGw_jWnH8JUH7 z63Ug>I6n6UsYiFaa#4C-mkr+o9N}x7iOTIy)wgUlcO>R%`%1Y1p?LUn*ukv2;XVsv z)wD%ovKVB%K*$MmaHH4zcISO(cCT!|+I(pKVh2Gwp42sJi3B)Xf0d3rK=)h{=kVJB k$Y3gu>4yUU_wH>$7Q*Yu9G5A1_o)J8qcemugLAk31%1mFZvX%Q literal 0 HcmV?d00001 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 index 921cd03..faa1714 100644 --- 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 @@ -11,6 +11,6 @@ export const deleteHiddenTransducer = (ctx: any) => { }, IPublicEnumTransformStage.Save); }, }; -} +}; deleteHiddenTransducer.pluginName = 'deleteHiddenTransducer'; 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 index 916ba2e..7999e65 100644 --- 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 @@ -1,29 +1,28 @@ import React from 'react'; import { Select } from '@alifd/next'; import scenarios from '../../universal/scenarios.json'; -import { IPublicModelPluginContext } from '@alilc/lowcode-types'; const { Option } = Select; const getCurrentScenarioName = () => { // return 'index' - const list = location.href.split('/'); + const list = window.location.href.split('/'); return list[list.length - 1].replace('.html', ''); -} +}; function Switcher(props: any) { return () + ); } -export const scenarioSwitcher = (ctx: IPublicModelPluginContext) => { +export const scenarioSwitcher = (ctx: any) => { return { name: 'scenarioSwitcher', async init() { 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 index a564038..1abe147 100644 --- 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 @@ -1,7 +1,9 @@ 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'; @@ -31,7 +33,6 @@ import { } from '../../universal/utils'; import assets from './assets.json'; import schema from './schema.json'; -import { IPublicModelPluginContext } from '@alilc/lowcode-types'; export default async function registerPlugins() { // await plugins.register(ManualPlugin); @@ -45,7 +46,7 @@ export default async function registerPlugins() { (SimulatorResizer as any).pluginName = 'SimulatorResizer'; plugins.register(SimulatorResizer); - const editorInit = (ctx: IPublicModelPluginContext) => { + const editorInit = (ctx: any) => { return { name: 'editor-init', async init() { @@ -71,7 +72,7 @@ export default async function registerPlugins() { editorInit.pluginName = 'editorInit'; await plugins.register(editorInit); - const builtinPluginRegistry = (ctx: IPublicModelPluginContext) => { + const builtinPluginRegistry = (ctx: any) => { return { name: 'builtin-plugin-registry', async init() { @@ -115,7 +116,7 @@ export default async function registerPlugins() { await plugins.register(builtinPluginRegistry); // 设置内置 setter 和事件绑定、插件绑定面板 - const setterRegistry = (ctx: IPublicModelPluginContext) => { + const setterRegistry = (ctx: any) => { const { setterMap, pluginMap } = AliLowCodeEngineExt; return { name: 'ext-setters-registry', @@ -153,7 +154,7 @@ export default async function registerPlugins() { // 注册中英文切换 await plugins.register(ZhEnPlugin); - const loadAssetsSample = (ctx: IPublicModelPluginContext) => { + const loadAssetsSample = (ctx: any) => { return { name: 'loadAssetsSample', async init() { @@ -178,7 +179,7 @@ export default async function registerPlugins() { await plugins.register(loadAssetsSample); // 注册保存面板 - const saveSample = (ctx: IPublicModelPluginContext) => { + const saveSample = (ctx: any) => { return { name: 'saveSample', async init() { @@ -206,7 +207,7 @@ export default async function registerPlugins() { ), }); - hotkey.bind('command+s', (e) => { + hotkey.bind('command+s', (e: any) => { e.preventDefault(); saveSchema('basic-antd'); }); @@ -223,10 +224,10 @@ export default async function registerPlugins() { // await plugins.register(CodeEditor); // 注册出码插件 - CodeGenPlugin.pluginName = 'CodeGenPlugin'; - await plugins.register(CodeGenPlugin); + // CodeGenPlugin.pluginName = 'CodeGenPlugin'; + // await plugins.register(CodeGenPlugin); - const previewSample = (ctx: IPublicModelPluginContext) => { + const previewSample = (ctx: any) => { return { name: 'previewSample', async init() { @@ -250,7 +251,7 @@ export default async function registerPlugins() { previewSample.pluginName = 'previewSample'; await plugins.register(previewSample); - const customSetter = (ctx: IPublicModelPluginContext) => { + const customSetter = (ctx: any) => { return { name: '___registerCustomSetter___', async init() { 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 index d500cb3..ca06e11 100644 --- 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 @@ -1,7 +1,9 @@ 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'; @@ -31,7 +33,6 @@ import { } from '../../universal/utils'; import assets from './assets.json'; import schema from './schema.json'; -import { IPublicModelPluginContext } from '@alilc/lowcode-types'; export default async function registerPlugins() { await plugins.register(ManualPlugin); @@ -45,7 +46,7 @@ export default async function registerPlugins() { (SimulatorResizer as any).pluginName = 'SimulatorResizer'; plugins.register(SimulatorResizer); - const editorInit = (ctx: IPublicModelPluginContext) => { + const editorInit = (ctx: any) => { return { name: 'editor-init', async init() { @@ -71,7 +72,7 @@ export default async function registerPlugins() { editorInit.pluginName = 'editorInit'; await plugins.register(editorInit); - const builtinPluginRegistry = (ctx: IPublicModelPluginContext) => { + const builtinPluginRegistry = (ctx: any) => { return { name: 'builtin-plugin-registry', async init() { @@ -115,7 +116,7 @@ export default async function registerPlugins() { await plugins.register(builtinPluginRegistry); // 设置内置 setter 和事件绑定、插件绑定面板 - const setterRegistry = (ctx: IPublicModelPluginContext) => { + const setterRegistry = (ctx: any) => { const { setterMap, pluginMap } = AliLowCodeEngineExt; return { name: 'ext-setters-registry', @@ -153,7 +154,7 @@ export default async function registerPlugins() { // 注册中英文切换 await plugins.register(ZhEnPlugin); - const loadAssetsSample = (ctx: IPublicModelPluginContext) => { + const loadAssetsSample = (ctx: any) => { return { name: 'loadAssetsSample', async init() { @@ -178,7 +179,7 @@ export default async function registerPlugins() { await plugins.register(loadAssetsSample); // 注册保存面板 - const saveSample = (ctx: IPublicModelPluginContext) => { + const saveSample = (ctx: any) => { return { name: 'saveSample', async init() { @@ -230,7 +231,7 @@ export default async function registerPlugins() { // CodeEditor.pluginName = 'CodeEditor'; // await plugins.register(CodeEditor); - const previewSample = (ctx: IPublicModelPluginContext) => { + const previewSample = (ctx: any) => { return { name: 'previewSample', async init() { @@ -257,7 +258,7 @@ export default async function registerPlugins() { previewSample.pluginName = 'previewSample'; await plugins.register(previewSample); - const customSetter = (ctx: IPublicModelPluginContext) => { + const customSetter = (ctx: any) => { return { name: '___registerCustomSetter___', async init() { 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 index d8f3b65..8e7103f 100644 --- 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 @@ -1,7 +1,9 @@ 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'; @@ -31,7 +33,6 @@ import { } from '../../universal/utils'; import assets from './assets.json'; import schema from './schema.json'; -import { IPublicModelPluginContext } from '@alilc/lowcode-types'; export default async function registerPlugins() { await plugins.register(ManualPlugin); @@ -45,7 +46,7 @@ export default async function registerPlugins() { (SimulatorResizer as any).pluginName = 'SimulatorResizer'; plugins.register(SimulatorResizer); - const editorInit = (ctx: IPublicModelPluginContext) => { + const editorInit = (ctx: any) => { return { name: 'editor-init', async init() { @@ -71,7 +72,7 @@ export default async function registerPlugins() { editorInit.pluginName = 'editorInit'; await plugins.register(editorInit); - const builtinPluginRegistry = (ctx: IPublicModelPluginContext) => { + const builtinPluginRegistry = (ctx: any) => { return { name: 'builtin-plugin-registry', async init() { @@ -115,7 +116,7 @@ export default async function registerPlugins() { await plugins.register(builtinPluginRegistry); // 设置内置 setter 和事件绑定、插件绑定面板 - const setterRegistry = (ctx: IPublicModelPluginContext) => { + const setterRegistry = (ctx: any) => { const { setterMap, pluginMap } = AliLowCodeEngineExt; return { name: 'ext-setters-registry', @@ -153,7 +154,7 @@ export default async function registerPlugins() { // 注册中英文切换 await plugins.register(ZhEnPlugin); - const loadAssetsSample = (ctx: IPublicModelPluginContext) => { + const loadAssetsSample = (ctx: any) => { return { name: 'loadAssetsSample', async init() { @@ -178,7 +179,7 @@ export default async function registerPlugins() { await plugins.register(loadAssetsSample); // 注册保存面板 - const saveSample = (ctx: IPublicModelPluginContext) => { + const saveSample = (ctx: any) => { return { name: 'saveSample', async init() { @@ -227,10 +228,10 @@ export default async function registerPlugins() { // await plugins.register(CodeEditor); // 注册出码插件 - CodeGenPlugin.pluginName = 'CodeGenPlugin'; - await plugins.register(CodeGenPlugin); + // CodeGenPlugin.pluginName = 'CodeGenPlugin'; + // await plugins.register(CodeGenPlugin); - const previewSample = (ctx: IPublicModelPluginContext) => { + const previewSample = (ctx: any) => { return { name: 'previewSample', async init() { @@ -254,7 +255,7 @@ export default async function registerPlugins() { previewSample.pluginName = 'previewSample'; await plugins.register(previewSample); - const customSetter = (ctx: IPublicModelPluginContext) => { + const customSetter = (ctx: any) => { return { name: '___registerCustomSetter___', async init() { 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 index a30ea02..ab2d80c 100644 --- 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 @@ -1,7 +1,9 @@ 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'; @@ -33,7 +35,6 @@ import { } from '../../universal/utils'; import assets from './assets.json'; import schema from './schema.json'; -import { IPublicModelPluginContext } from '@alilc/lowcode-types'; export default async function registerPlugins() { await plugins.register(ManualPlugin); @@ -51,7 +52,7 @@ export default async function registerPlugins() { (SimulatorResizer as any).pluginName = 'SimulatorResizer'; plugins.register(SimulatorResizer); - const editorInit = (ctx: IPublicModelPluginContext) => { + const editorInit = (ctx: any) => { return { name: 'editor-init', async init() { @@ -77,7 +78,7 @@ export default async function registerPlugins() { editorInit.pluginName = 'editorInit'; await plugins.register(editorInit); - const builtinPluginRegistry = (ctx: IPublicModelPluginContext) => { + const builtinPluginRegistry = (ctx: any) => { return { name: 'builtin-plugin-registry', async init() { @@ -121,7 +122,7 @@ export default async function registerPlugins() { await plugins.register(builtinPluginRegistry); // 设置内置 setter 和事件绑定、插件绑定面板 - const setterRegistry = (ctx: IPublicModelPluginContext) => { + const setterRegistry = (ctx: any) => { const { setterMap, pluginMap } = AliLowCodeEngineExt; return { name: 'ext-setters-registry', @@ -159,7 +160,7 @@ export default async function registerPlugins() { // 注册中英文切换 await plugins.register(ZhEnPlugin); - const loadAssetsSample = (ctx: IPublicModelPluginContext) => { + const loadAssetsSample = (ctx: any) => { return { name: 'loadAssetsSample', async init() { @@ -184,7 +185,7 @@ export default async function registerPlugins() { await plugins.register(loadAssetsSample); // 注册保存面板 - const saveSample = (ctx: IPublicModelPluginContext) => { + const saveSample = (ctx: any) => { return { name: 'saveSample', async init() { @@ -228,7 +229,7 @@ export default async function registerPlugins() { // CodeEditor.pluginName = 'CodeEditor'; // await plugins.register(CodeEditor); - const previewSample = (ctx: IPublicModelPluginContext) => { + const previewSample = (ctx: any) => { return { name: 'previewSample', async init() { @@ -252,7 +253,7 @@ export default async function registerPlugins() { previewSample.pluginName = 'previewSample'; await plugins.register(previewSample); - const customSetter = (ctx: IPublicModelPluginContext) => { + const customSetter = (ctx: any) => { return { name: '___registerCustomSetter___', async init() { 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 index 2dd8e88..89e23f7 100644 --- 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 @@ -1,6 +1,10 @@ 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'; @@ -30,10 +34,9 @@ import { } from '../../universal/utils'; import assets from './assets.json'; import schema from './schema.json'; -import { IPublicModelPluginContext, IPublicModelNode } from '@alilc/lowcode-types'; export default async function registerPlugins() { - const addHelloAction = (ctx: IPublicModelPluginContext) => { + const addHelloAction = (ctx: any) => { return { async init() { const { addBuiltinComponentAction } = ctx.material; @@ -42,12 +45,12 @@ export default async function registerPlugins() { content: { icon: , title: 'hello', - action(node: IPublicModelNode) { + action(node: Node) { Message.show('Welcome to Low-Code engine'); }, }, - condition: (node: IPublicModelNode) => { - return node.componentMeta?.componentName === 'NextTable'; + condition: (node: Node) => { + return node.componentMeta.componentName === 'NextTable'; }, }); }, @@ -56,7 +59,7 @@ export default async function registerPlugins() { addHelloAction.pluginName = 'addHelloAction'; await plugins.register(addHelloAction); - const removeCopyAction = (ctx: IPublicModelPluginContext) => { + const removeCopyAction = (ctx: any) => { return { async init() { const { removeBuiltinComponentAction } = ctx.material; @@ -78,7 +81,7 @@ export default async function registerPlugins() { (SimulatorResizer as any).pluginName = 'SimulatorResizer'; plugins.register(SimulatorResizer); - const editorInit = (ctx: IPublicModelPluginContext) => { + const editorInit = (ctx: any) => { return { name: 'editor-init', async init() { @@ -104,7 +107,7 @@ export default async function registerPlugins() { editorInit.pluginName = 'editorInit'; await plugins.register(editorInit); - const builtinPluginRegistry = (ctx: IPublicModelPluginContext) => { + const builtinPluginRegistry = (ctx: any) => { return { name: 'builtin-plugin-registry', async init() { @@ -148,7 +151,7 @@ export default async function registerPlugins() { await plugins.register(builtinPluginRegistry); // 设置内置 setter 和事件绑定、插件绑定面板 - const setterRegistry = (ctx: IPublicModelPluginContext) => { + const setterRegistry = (ctx: any) => { const { setterMap, pluginMap } = AliLowCodeEngineExt; return { name: 'ext-setters-registry', @@ -186,7 +189,7 @@ export default async function registerPlugins() { // 注册中英文切换 await plugins.register(ZhEnPlugin); - const loadAssetsSample = (ctx: IPublicModelPluginContext) => { + const loadAssetsSample = (ctx: any) => { return { name: 'loadAssetsSample', async init() { @@ -211,7 +214,7 @@ export default async function registerPlugins() { await plugins.register(loadAssetsSample); // 注册保存面板 - const saveSample = (ctx: IPublicModelPluginContext) => { + const saveSample = (ctx: any) => { return { name: 'saveSample', async init() { @@ -259,7 +262,7 @@ export default async function registerPlugins() { // CodeEditor.pluginName = 'CodeEditor'; // await plugins.register(CodeEditor); - const previewSample = (ctx: IPublicModelPluginContext) => { + const previewSample = (ctx: any) => { return { name: 'previewSample', async init() { @@ -286,7 +289,7 @@ export default async function registerPlugins() { previewSample.pluginName = 'previewSample'; await plugins.register(previewSample); - const customSetter = (ctx: IPublicModelPluginContext) => { + const customSetter = (ctx: any) => { return { name: '___registerCustomSetter___', async init() { diff --git a/packages/plugin-multiple-editor/src/dev-config/universal/plugin.tsx b/packages/plugin-multiple-editor/src/dev-config/universal/plugin.tsx index c55ddff..936fa1a 100644 --- a/packages/plugin-multiple-editor/src/dev-config/universal/plugin.tsx +++ b/packages/plugin-multiple-editor/src/dev-config/universal/plugin.tsx @@ -1,15 +1,11 @@ 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 ComponentsPane from '@alilc/lowcode-plugin-components-pane'; -import ZhEnPlugin from '@alilc/lowcode-plugin-zh-en'; -import SchemaPlugin from '@alilc/lowcode-plugin-schema'; import Inject, { injectAssets } from '@alilc/lowcode-plugin-inject'; // 注册到引擎 @@ -36,10 +32,6 @@ export default async function registerPlugins() { await plugins.register(deleteHiddenTransducer); - // plugin API 见 https://yuque.antfin.com/ali-lowcode/docs/cdukce - SchemaPlugin.pluginName = 'SchemaPlugin'; - await plugins.register(SchemaPlugin); - const editorInit = (ctx: any) => { return { name: 'editor-init', @@ -141,9 +133,6 @@ export default async function registerPlugins() { setterRegistry.pluginName = 'setterRegistry'; await plugins.register(setterRegistry); - // 注册中英文切换 - await plugins.register(ZhEnPlugin); - const loadAssetsSample = (ctx: any) => { return { name: 'loadAssetsSample', diff --git a/packages/plugin-multiple-editor/src/dev-config/universal/utils.ts b/packages/plugin-multiple-editor/src/dev-config/universal/utils.ts index e6e3af7..a3f734d 100644 --- a/packages/plugin-multiple-editor/src/dev-config/universal/utils.ts +++ b/packages/plugin-multiple-editor/src/dev-config/universal/utils.ts @@ -1,7 +1,7 @@ import { material, project } from '@alilc/lowcode-engine'; import { filterPackages } from '@alilc/lowcode-plugin-inject'; import { Message, Dialog } from '@alifd/next'; -import { IPublicEnumTransformStage } from '@alilc/lowcode-types'; +import { TransformStage } from '@alilc/lowcode-types'; export const loadIncrementalAssets = () => { material?.onChangeAssets(() => { @@ -252,7 +252,7 @@ const setProjectSchemaToLocalStorage = (scenarioName: string) => { } window.localStorage.setItem( getLSName(scenarioName), - JSON.stringify(project.exportSchema(IPublicEnumTransformStage.Save)) + JSON.stringify(project.exportSchema(TransformStage.Save as any)) ); }; @@ -296,5 +296,6 @@ function request( 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 index e238d01..8da7e27 100644 --- a/packages/plugin-multiple-editor/src/global.d.ts +++ b/packages/plugin-multiple-editor/src/global.d.ts @@ -1,2 +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.tsx b/packages/plugin-multiple-editor/src/index.dev.tsx index 02fe5b5..b544dcc 100644 --- a/packages/plugin-multiple-editor/src/index.dev.tsx +++ b/packages/plugin-multiple-editor/src/index.dev.tsx @@ -10,6 +10,8 @@ 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 }); @@ -17,15 +19,40 @@ controller.updateMeta({ singleton: true }); 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({ @@ -33,6 +60,8 @@ async function initEditor(el: any) { console.log(name); }, }), + new TestPlugin(), + new PrettierPlugin(), ], onInstall(controller: EditorController) { (window as any).codeEditorController = controller; @@ -62,10 +91,17 @@ async function initEditor(el: any) { }, 1000); controller.onEditCodeChange((v) => { - console.log('value change', 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', @@ -73,7 +109,7 @@ async function initEditor(el: any) { enableCanvasLock: true, // 默认绑定变量 supportVariableGlobally: true, - }); + } as any); } const LowcodeRender = () => { diff --git a/packages/plugin-multiple-editor/src/index.tsx b/packages/plugin-multiple-editor/src/index.tsx index 6b7b7dc..3e6363c 100644 --- a/packages/plugin-multiple-editor/src/index.tsx +++ b/packages/plugin-multiple-editor/src/index.tsx @@ -1,13 +1,18 @@ -import { project, editor } from '@alilc/lowcode-engine'; +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(); }); @@ -20,14 +25,16 @@ const pluginCodeEditor = ( onInstall?: (controller: EditorController) => void; plugins?: EditorPluginInterface[]; defaultFiles?: Record; + useLess?: boolean; } = {} ) => { - const plugin = (ctx: any): any => { + 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', @@ -62,9 +69,10 @@ const pluginCodeEditor = ( 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, editor, service); + editorController.init(project, finalEditor, service); }); }, }; 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 0000000000000000000000000000000000000000..2d8e9d4a84a130fbce5db30054665e0cc1a71630 GIT binary patch literal 3377 zcmV-14bJk3P)Px>>q$gGRCr$PU2BjWRTchD&nAQzOtvQvKtMsnijts~C`F+qf)t{q1c>+mveOfS zc}!0>JQ4*hQA-I_Wp`%tfROE336?zMp(tpHR4GM8(9#6Lqe>-(JS2gcNwPpT*_l38 z2ZFn^Ju}^Rx_j>I-2U6=e&;*i`O-V-?t7Y`j$^dPyK%1AZt^mpaZLUC@m#?k>$^c>t>`AWCZM$O*Vl@6uRA#10 z9Zyc%u%sxamb|NknpZITRssA|dCLli88fYj=Tbf4pf?BAw*dw(-7s@_!tl=K&~1L! z1H=2L9J%@GH=EBS7zVx#P)KG@2Gdi)q;EZxk{vs0=D^ZdTaURrW8VgFV2VceaRxp$ zUPSO(2ZQd5Td51Y#oi0Hnh2bEsF6>+)Ce7t-?ZA-yFpFJZ3&T zbQMBOKt%gk(|!}bb=lJ)rV)k~YF@#}J_O)g;jI5(xJ9?j(<^cEM&@e-x-$TLX&{Jb zUT1&merX83L&UcM_9WMxSmyFSgDQmV^2a*|y0?zRD;U{F0h|$34oPqx(k=5mNw~aA z!?yv7T|FOQEw&@5LSi)5+j?30C4!&d+q3sIcJ6cD}wh^14j zWK%#HK(>xV%tsj@V!>rgCuD%v7WEvZm13)iF;|ku!TUh;fZm^4?6ZD$O6dd%OTozg7r>D< z7rR`s!sF?V?ArhiOy20bPy?@HU{=(GtL7v8N}Je`aC>*ZkjO3u;RXQj4VdqC*z`@e z8(R59=5!+Z8GsYraxyTm*FIwL@dJsWfI0bs6EeV|48>&cXF)NcJAuAf)(I|`@apt| zRLy_ouPnM{^5OP@z+PmvZQ38VmTjq5hhqdSrcE3fN5BiyHl+f4o>GrPt@8~TppnFC ztsDv{1IW>brm;{4XqxnLBvuBHqYq7EA!LBv$;??c(;5JCy)oyP30U1}rTZ%5ogZh1 z4IfxfWM2T#5iWR-f%w~ce>(De4=>JNbNJ*b9czhreid%s%J&vk0C1~rnX9~o2NUJn z0K1l~o6<2rGXHt75xw)R~vm$b~WU3L+*_L^ zJ*fAmz7$y19)Su*W+^~xJ%$GoX0v_T^xX2t0|D~@;@bcYW`1GzG_uJ8c(#We0O3)M zX~i@v^*6Wpf|1<_@Ymh`&N6exrlIe-J#q7tyTPD>ky!`e(g=P7JjF~`$8)LQH%Qsn zav=lw%AkU!RzMj*>h^?BP8lG4jit_@3?OxT!Y3zefGEbqaf!>N$+3UTT)*^<@TI7p zVRvHfCpgAIKS~~zkW0wd+9wfK{XzzadQ2RHFRrzdI4p7UiFL;km7Q&BuFv#?&&!Vw zbxivF(HpOLD|l>oMBfHz(wMkcbjy5SRH7WplTT!Ni6|XuUd9qVXKsipr*8u^X-wQc z-7+UfCCZ^Zg=F>)FfNWb@3p#R{v@iLz760ID;U|w0F2q!A0p|Sbj!RZM0{81ypcVJ zfGBUw>}HP5t-Mo7&Ah5gPI&v`<3OsE_P z&y>osA4WZdQrG~YilM+GQ$QIYGO6WEqzoWuUm|0r3=o;rawZZsK(#S(&P0p}!xQg5 zV)No%ZYA&PT6g3Gtu$YB@&|zq*o23t_nS{tleC!ZJKtuU(!dD2u)DQ42K)YLR=2aq zvZ;rV0qTy4V-z`tx$#ZrOCzh>y&(HRJBGgpvqOiM=~mi#RzK<}7}*B_jM=Q&RF$hF zw+WxFW#lM0`!;~rF>wsOGH#`v7f0Vc@`>z^h;UsXg)yGibLPpT3}*D4U?cYLK=300 z;hS|Uy*QFoRg(BNfcG(Rv{<)NH;>Hg@dZ#%dJyo}PRks%)vK_m_c)Za7d!z-5X8Wm zxMg11Oe($&;E*jEnN19;wXONFHwQ~!sGN+ob7AkSiMF;afK8=)iSd=rocSl0KLHy7 zT;5DkJ?8$GT`GNU`fV#-_81>Zn2-S+CeAolK$~6pLrVj;bz15Bs5U+}8NEffU>KsCmW&Rp8rIo$L^*Z@sut_TF8fHFWJGPW*=GC=G0E)eF* z0D;KZx*$RZ2xUwhgPE|kq}eyj+O*vD!<2mDiYP)fY$;_o} z(|nNdc$u0b>>A|W@Nyvogghp0yKb3tDl5w;`UZ%2LBkbS1L&~duWwxbpOL2zHlOLX zKyngR>HX&FK(GP?@oj)8#>AC7%16)G*zHW&diTg1*_{N;46yb}s4*K?3r62B-rlm- z_`$#=yR_OS)A?k~sN>+3$1dLvrl98pyg}gax(%;* z` z=x(Fu1lBr^^8!~HQ$}g$^iAE*imZ)dO+yBVf}qL~t^&#c;p!_rx-x+DEee;QGC;Wc zN{=pNfZAi?_;r9b>Xvz}TlIxxW;K`=0??&bXCy)5tz^@3w|5X)s*Vb>z761YOq|=N zQj13RG6tl04ldZVJ-TI16I?6hGT#R9F(z)zCdYg-vxb1{Ha571_Y`Zj<=)_F6yWS3VH;Q|-(+ijqGx@A7> zR+#gE#b&yWfRmb8xIpgB6NV>TRc*h60G<>}gbW}Bb44N$1(X2-k+F3_lmS||cY!ch z1_(sP)&&tZKs$|zYu)zNXD(!bb{P{_U%u9l@NIy08WY$0?X6#dZv(W`n7I1#wSI(e z12`qO%b2*A>w&9 zaorC_#8~_Dv|P&h_>$}K_Gj8--vW*PC<8$o8rI6WY7;|RRdktn3mZVDA`};K1(X5A zwHp^Jl>x>@8^w!I1`yY7T&xr_KqzD4T;yb+OhjAC{MPCj*2=+gp}1s42pJ&cF>!7Z z{Z_ZkFH5G~xS-?P08xyIb5mBgOy69`MTbHz!nddqjEQqA`6=Bp=Z36BTf+M`z`>h9 z$?O$ijQSc#i0W+v@g;hHdV7dD+7?>K0FGMD>*1x2;n|3hFh)JqZSYWhllhl=aq7Id z0--feoRV4@r2@(TQK~IrE@c1-n-V1@Wq>HvmN1txfP_tnl9Dn&lxjnaQU;K)DN#~V28dE^33L4qgx3YV?INrR00000NkvXX Hu0mjfB { + if (!filepath) return; // 只需要初始化一次 if ( filepath.replace(/^\//, '') === 'index.js' && diff --git a/packages/plugin-multiple-editor/src/plugins/search-plugin/search.ts b/packages/plugin-multiple-editor/src/plugins/search-plugin/search.ts index 0a16eed..b3c3c6a 100644 --- a/packages/plugin-multiple-editor/src/plugins/search-plugin/search.ts +++ b/packages/plugin-multiple-editor/src/plugins/search-plugin/search.ts @@ -37,6 +37,9 @@ function getMethodFromNode(node: any): Methods { // 合并一个节点数组，例如 slot 的元素列表 const mergeNodeList = (list: any[]) => { + if (!isArray(list)) { + return; + } for (const item of list) { mergeMethod(methods, getMethodFromNode(item)); } diff --git a/packages/plugin-multiple-editor/src/types/index.ts b/packages/plugin-multiple-editor/src/types/index.ts index 4682325..9f07652 100644 --- a/packages/plugin-multiple-editor/src/types/index.ts +++ b/packages/plugin-multiple-editor/src/types/index.ts @@ -1,7 +1,9 @@ +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 { +export interface IState extends IPublicTypeJSExpression { originCode?: string; } diff --git a/packages/plugin-multiple-editor/src/utils/code.ts b/packages/plugin-multiple-editor/src/utils/code.ts index 796f89d..0f76a26 100644 --- a/packages/plugin-multiple-editor/src/utils/code.ts +++ b/packages/plugin-multiple-editor/src/utils/code.ts @@ -1,3 +1,4 @@ +import { IPublicTypeProjectSchema, IPublicTypeRootSchema } from '@alilc/lowcode-types'; // @ts-ignore import prettier from 'prettier/esm/standalone.mjs'; import parserBabel from 'prettier/parser-babel'; @@ -23,7 +24,9 @@ const prettierCssConfig = { printWidth: 120, // 超过120个字符强制换行 }; -export const initCode = (componentSchema: any | undefined) => { +export const initCode = ( + componentSchema: IPublicTypeRootSchema | undefined +) => { return ( (componentSchema as any)?.originCode || `export default class LowcodeComponent extends Component { @@ -72,6 +75,6 @@ export const beautifyCSS = (input: string, options: any): string => { }; // schema转换为CSS代码 -export const schema2CssCode = (schema: any, prettierOptions: any) => { +export const schema2CssCode = (schema: IPublicTypeProjectSchema, prettierOptions: any) => { return beautifyCSS(schema.componentsTree[0]?.css || '', prettierOptions); }; diff --git a/packages/plugin-multiple-editor/src/utils/constants.ts b/packages/plugin-multiple-editor/src/utils/constants.ts index 3e39b1c..76a7bdc 100644 --- a/packages/plugin-multiple-editor/src/utils/constants.ts +++ b/packages/plugin-multiple-editor/src/utils/constants.ts @@ -4,4 +4,6 @@ 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 index c9a5d09..3a3f1f2 100644 --- a/packages/plugin-multiple-editor/src/utils/files.ts +++ b/packages/plugin-multiple-editor/src/utils/files.ts @@ -4,7 +4,11 @@ export class File { public type = 'file'; - constructor(public name: string, public content: string) { + constructor( + public name: string, + public content: string, + public fullPath: string + ) { this.ext = name.match(/\.(\w+)$/)?.[1]; } } @@ -13,10 +17,17 @@ export class Dir { public dirs: Dir[]; public files: File[]; public type = 'dir'; - - constructor(public name: string, dirs?: Dir[], files?: File[]) { + public fullPath = ''; + + constructor( + public name: string, + dirs: Dir[], + files: File[], + fullPath: string + ) { this.dirs = dirs || []; this.files = files || []; + this.fullPath = fullPath || ''; } } @@ -25,9 +36,9 @@ export const getKey = (parent: string | undefined, cur: string) => { return `${finalParent}${cur}`; }; -export function getKeyByPath(path: string[], name: string) { - return ['', ...path, name].join('/'); -} +// export function getKeyByPath(path: string[], name: string) { +// return ['', ...path, name].join('/'); +// } export const parseKey = (key: string) => { const fragment = key.split('/').filter(Boolean); @@ -106,13 +117,13 @@ export function generateFile( for (const dir of path) { let found: Dir | undefined = nextDir.dirs.find((d) => d.name === dir); if (!found) { - found = new Dir(dir); + found = new Dir(dir, [], [], path.join('/')); nextDir.dirs.push(found); } nextDir = found; } // 添加文件 - nextDir.files.push(new File(filename, file.content)); + nextDir.files.push(new File(filename, file.content, file.name)); } /** @@ -124,7 +135,7 @@ export function generateFile( export function fileMapToTree(obj: any) { const { files } = compatGetSourceCodeMap(obj); const keys = Object.keys(files); - const dir = new Dir('/'); + const dir = new Dir('/', [], [], ''); for (const key of keys) { generateFile({ name: key, content: files[key] }, dir); } @@ -145,10 +156,14 @@ export function treeToMap(root: Dir, base = '') { return files; } -export function compatGetSourceCodeMap(origin: any = {}) { +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: files || rest, + files: finalFiles || {}, meta: meta || {}, }; } diff --git a/packages/plugin-multiple-editor/src/utils/get-methods.ts b/packages/plugin-multiple-editor/src/utils/get-methods.ts index 4d3b760..6c1315b 100644 --- a/packages/plugin-multiple-editor/src/utils/get-methods.ts +++ b/packages/plugin-multiple-editor/src/utils/get-methods.ts @@ -111,7 +111,7 @@ export const getMethods = (fileContent: string) => { ?.code; const compiledCode = pureTranspile(codeStr, { esm: true }); state[ - (property.key as Identifier).name ?? property?.key?.extra?.rawValue as string + ((property.key as Identifier).name ?? (property?.key?.extra as any)?.rawValue) as string ] = { type: 'JSExpression', value: compiledCode.replace(/var *name *= */, '').replace(/;$/, ''), diff --git a/packages/plugin-multiple-editor/src/utils/ghostBabel.ts b/packages/plugin-multiple-editor/src/utils/ghostBabel.ts index 7ee0f79..d3e6883 100644 --- a/packages/plugin-multiple-editor/src/utils/ghostBabel.ts +++ b/packages/plugin-multiple-editor/src/utils/ghostBabel.ts @@ -2,7 +2,11 @@ * 使用 @babel/standalone 的能力实现 parse 和 traverse */ -import { transform, transformFromAst } from '@babel/standalone'; +import { + transform, + transformFromAst, + availablePlugins, +} from '@babel/standalone'; import type { Visitor, PluginItem, @@ -14,6 +18,10 @@ 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) { @@ -26,13 +34,13 @@ export function traverse(code: string | ParseResult | Node, visitor: Visitor) { if (typeof code === 'string') { transform(code, { ...defaultBabelOption, - plugins: [plugin], - }); + plugins: [...(defaultBabelOption.plugins || []), plugin], + } as any); } else { transformFromAst(code, undefined, { ...defaultBabelOption, - plugins: [plugin], - }); + plugins: [...(defaultBabelOption.plugins || []), plugin], + } as any); } } @@ -46,3 +54,62 @@ export function parse(code: string): File { // @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 index 3e3fcd0..8f90e59 100644 --- a/packages/plugin-multiple-editor/src/utils/index.ts +++ b/packages/plugin-multiple-editor/src/utils/index.ts @@ -4,3 +4,4 @@ export * from './tsUtils'; export * from './files'; export * from './codeLint'; export * from './ghostBabel'; +export * from './path'; diff --git a/packages/plugin-multiple-editor/src/utils/multipleFile/babel/compile.ts b/packages/plugin-multiple-editor/src/utils/multipleFile/babel/compile.ts index 3533e65..c5c5b02 100644 --- a/packages/plugin-multiple-editor/src/utils/multipleFile/babel/compile.ts +++ b/packages/plugin-multiple-editor/src/utils/multipleFile/babel/compile.ts @@ -37,7 +37,11 @@ export function pureTranspile( ]; let plugins: any[] = [modulePlugin]; if (es6) { - plugins.unshift(availablePlugins['transform-modules-commonjs']); + plugins.unshift( + availablePlugins['transform-modules-commonjs'], + availablePlugins['syntax-jsx'], + availablePlugins['transform-react-jsx'] + ); } if (options?.presets) { presets = presets.concat(options.presets); 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 index 844531b..001437f 100644 --- a/packages/plugin-multiple-editor/src/utils/transformUMD.ts +++ b/packages/plugin-multiple-editor/src/utils/transformUMD.ts @@ -88,7 +88,7 @@ function preprocessIndex(content: string) { export function getInitFuncContent(fileMap: ObjectType, es6?: boolean) { const finalFileMap = Object.entries(fileMap) - .filter(([k]) => !['index.css'].includes(k)) + .filter(([k]) => !['index.css', 'index.less'].includes(k)) .map(([key, content]) => { let realContent = content; if (key === 'index.js') { diff --git a/packages/plugin-multiple-editor/tsconfig.json b/packages/plugin-multiple-editor/tsconfig.json index c820ed9..99b6c71 100644 --- a/packages/plugin-multiple-editor/tsconfig.json +++ b/packages/plugin-multiple-editor/tsconfig.json @@ -1,109 +1,28 @@ { "compilerOptions": { - /* Visit https://aka.ms/tsconfig.json to read more about this file */ - - /* Projects */ - // "incremental": true, /* Enable incremental compilation */ - // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ - // "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */ - // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */ - // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ - // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ - - /* Language and Environment */ - "target": "ES5" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */, - // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ - "jsx": "react" /* Specify what JSX code is generated. */, - "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ - "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ - // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */ - // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ - // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */ - // "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */ - // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ - // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ - - /* Modules */ - "module": "ES2020" /* Specify what module code is generated. */, - "rootDir": "./src", /* Specify the root folder within your source files. */ - "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ - "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ + "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/*"] - }, /* Specify a set of entries that re-map imports to additional lookup locations. */ - // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ - // "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */ - // "types": [], /* Specify type package names to be included without being referenced in a source file. */ - // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ - "resolveJsonModule": true /* Enable importing .json files */, - // "noResolve": true, /* Disallow `import`s, `require`s or ``s from expanding the number of files TypeScript should add to a project. */ - - /* JavaScript Support */ - // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */ - // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ - // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */ - - /* Emit */ - "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ - // "declarationMap": true, /* Create sourcemaps for d.ts files. */ - // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ - // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ - // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */ - "outDir": "./es", /* Specify an output folder for all emitted files. */ - // "removeComments": true, /* Disable emitting comments. */ - // "noEmit": true, /* Disable emitting files from a compilation. */ - // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ - // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types */ - // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ - // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ - // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ - // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ - // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ - // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ - // "newLine": "crlf", /* Set the newline character for emitting files. */ - // "stripInternal": true, /* Disable emitting declarations that have `@internal` in their JSDoc comments. */ - // "noEmitHelpers": true, /* Disable generating custom helper functions like `__extends` in compiled output. */ - // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ - // "preserveConstEnums": true, /* Disable erasing `const enum` declarations in generated code. */ - // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ - // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ - - /* Interop Constraints */ - // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ - // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ - "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */, - // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ - "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */, - - /* Type Checking */ - "strict": false /* Enable all strict type-checking options. */, - // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied `any` type.. */ - // "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */ - // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ - // "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */ - // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ - // "noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */ - // "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */ - // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ - // "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */ - // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */ - // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ - // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ - // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ - // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ - // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ - // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */ - // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ - // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ - - /* Completeness */ - // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ - "skipLibCheck": true /* Skip type checking all .d.ts files. */ + "types/*": ["./src/types/*"], + "react": [ "./node_modules/@types/react" ] + } }, "include": ["src"], - "exclude": ["src/dev-config/*"] + "exclude": ["src/dev-config"] } From 50547c91d3043a71af88be43abb13738a3766dbc Mon Sep 17 00:00:00 2001 From: jingyu Date: Fri, 23 Feb 2024 10:08:18 +0800 Subject: [PATCH 78/83] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E7=89=88?= =?UTF-8?q?=E6=9C=AC=E5=8F=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/plugin-multiple-editor/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-multiple-editor/package.json b/packages/plugin-multiple-editor/package.json index 053834e..1c0db21 100644 --- a/packages/plugin-multiple-editor/package.json +++ b/packages/plugin-multiple-editor/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-multiple-editor", - "version": "0.1.0", + "version": "0.2.0", "main": "es/index.js", "license": "MIT", "private": false, From 55c72b9822a6fb325bbc91294ef88e9fdccccc45 Mon Sep 17 00:00:00 2001 From: carrot Date: Fri, 23 Feb 2024 10:22:49 +0800 Subject: [PATCH 79/83] =?UTF-8?q?Revert=20"feat:=20=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E7=89=88=E6=9C=AC=E5=8F=B7"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/plugin-multiple-editor/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-multiple-editor/package.json b/packages/plugin-multiple-editor/package.json index 1c0db21..053834e 100644 --- a/packages/plugin-multiple-editor/package.json +++ b/packages/plugin-multiple-editor/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-multiple-editor", - "version": "0.2.0", + "version": "0.1.0", "main": "es/index.js", "license": "MIT", "private": false, From e0a6d55d929886be8f78c4989eb921c8948f96f1 Mon Sep 17 00:00:00 2001 From: liujuping Date: Fri, 23 Feb 2024 10:47:14 +0800 Subject: [PATCH 80/83] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=8F=91?= =?UTF-8?q?=E5=B8=83=E8=84=9A=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/publish beta npm.yml | 1 + .github/workflows/publish npm.yml | 1 + packages/plugin-multiple-editor/package.json | 3 ++- 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/.github/workflows/publish beta npm.yml b/.github/workflows/publish beta npm.yml index ff4108b..d60d927 100644 --- a/.github/workflows/publish beta npm.yml +++ b/.github/workflows/publish beta npm.yml @@ -28,6 +28,7 @@ jobs: run: | git config --local user.email "action@github.com" git config --local user.name "GitHub Action" + npm install echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc cd packages/${{ github.event.inputs.packagePath }} npm install --legacy-peer-deps diff --git a/.github/workflows/publish npm.yml b/.github/workflows/publish npm.yml index 10fe201..d8971d4 100644 --- a/.github/workflows/publish npm.yml +++ b/.github/workflows/publish npm.yml @@ -32,6 +32,7 @@ jobs: git config --local user.name "GitHub Action" echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc + npm install cd packages/${{ github.event.inputs.packagePath }} npm install --legacy-peer-deps npm version ${{ github.event.inputs.versionType }} diff --git a/packages/plugin-multiple-editor/package.json b/packages/plugin-multiple-editor/package.json index 053834e..3b19ad0 100644 --- a/packages/plugin-multiple-editor/package.json +++ b/packages/plugin-multiple-editor/package.json @@ -179,5 +179,6 @@ ], "fastPublish": { "npmClient": "npm" - } + }, + "repository": "https://github.com/alibaba/lowcode-plugins.git" } From dce5a8c6e3aac34dcf22a02ce55cef60634bf223 Mon Sep 17 00:00:00 2001 From: liujuping Date: Fri, 23 Feb 2024 10:53:39 +0800 Subject: [PATCH 81/83] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=8F=91?= =?UTF-8?q?=E5=B8=83=E8=84=9A=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/publish beta npm.yml | 2 +- .github/workflows/publish npm.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/publish beta npm.yml b/.github/workflows/publish beta npm.yml index d60d927..01ab685 100644 --- a/.github/workflows/publish beta npm.yml +++ b/.github/workflows/publish beta npm.yml @@ -28,7 +28,7 @@ jobs: run: | git config --local user.email "action@github.com" git config --local user.name "GitHub Action" - npm install + 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 diff --git a/.github/workflows/publish npm.yml b/.github/workflows/publish npm.yml index d8971d4..5ada959 100644 --- a/.github/workflows/publish npm.yml +++ b/.github/workflows/publish npm.yml @@ -32,7 +32,7 @@ jobs: git config --local user.name "GitHub Action" echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc - npm install + npm install --legacy-peer-deps cd packages/${{ github.event.inputs.packagePath }} npm install --legacy-peer-deps npm version ${{ github.event.inputs.versionType }} From 552fe53c35ffd1d0b2bffe048082aa15763b699a Mon Sep 17 00:00:00 2001 From: jingyu Date: Mon, 26 Feb 2024 09:56:51 +0800 Subject: [PATCH 82/83] =?UTF-8?q?feat:=20=E7=A7=BB=E9=99=A4ci=E6=8A=A5?= =?UTF-8?q?=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../plugin-multiple-editor/scripts/build.js | 43 ++++++++++--------- 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/packages/plugin-multiple-editor/scripts/build.js b/packages/plugin-multiple-editor/scripts/build.js index a15ed89..007f85e 100644 --- a/packages/plugin-multiple-editor/scripts/build.js +++ b/packages/plugin-multiple-editor/scripts/build.js @@ -155,26 +155,27 @@ function build(previousFileSizes) { } return reject(new Error(messages.errors.join('\n\n'))); } - 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'))); - } - } + // 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, @@ -192,4 +193,4 @@ function build(previousFileSizes) { return resolve(resolveArgs); }); }); -} \ No newline at end of file +} From bbf63cc40af9cf75b4e1dc59400eed728c23cad4 Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Mon, 26 Feb 2024 02:53:07 +0000 Subject: [PATCH 83/83] Bump version to --- packages/plugin-multiple-editor/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-multiple-editor/package.json b/packages/plugin-multiple-editor/package.json index 3b19ad0..38e07c7 100644 --- a/packages/plugin-multiple-editor/package.json +++ b/packages/plugin-multiple-editor/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-multiple-editor", - "version": "0.1.0", + "version": "0.2.0", "main": "es/index.js", "license": "MIT", "private": false,