= (props, ref) => {\n const { children, __designMode, ...others } = props;\n const otherProps: any = {};\n if (__designMode === 'design') {\n otherProps.onClick = (e: Event) => {\n e.preventDefault();\n };\n }\n return (\n \n {children}\n \n );\n};\n\nconst RefLink = React.forwardRef(Link);\n\nRefLink.defaultProps = {\n href: 'https://fusion.design',\n children: '这是一个超链接',\n target: '_blank',\n};\n\nexport default RefLink;\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/component/field/baseTableField.tsx",
"content": "import React, { ReactNode } from \"react\";\nimport classnames from 'classnames';\nimport { Field } from \"@alifd/next\";\nimport { Rule } from \"@alifd/next/types/field\";\n\nexport interface IBaseTableFieldProps {\n name: string;\n value?: any;\n onChange: (value: any) => void;\n nextTablePrefix: string;\n rules?: Rule;\n}\n\nclass BaseTableField extends React.Component {\n field: Field;\n constructor(props: IBaseTableFieldProps & P) {\n super(props);\n\n this.field = new Field(this, {\n onChange: (name, value) => {\n this.dataChangeHandler(value);\n },\n });\n }\n\n componentWillMount() {\n const { name } = this.props;\n\n this.field.setValue(name, this.convertValueToSet(this.props.value));\n }\n\n componentWillReceiveProps(nextProps: IBaseTableFieldProps) {\n const { name } = this.props;\n\n this.field.setValue(name, this.convertValueToSet(nextProps.value));\n }\n\n validate() {\n return new Promise((resolve) => {\n const { name } = this.props;\n\n this.field.validate([name], (errors) => {\n resolve(errors);\n });\n });\n }\n\n convertValueToSet(value: any) {\n return value;\n }\n\n dataChangeHandler(value: any) {\n const { onChange } = this.props;\n onChange && onChange(value);\n }\n\n renderField(): ReactNode {\n return null;\n }\n\n render() {\n const { nextTablePrefix, name } = this.props;\n const field = this.field;\n const errMsg = field.getError(name);\n const fieldState = field.getState(name);\n\n return (\n \n
\n {this.renderField()}\n
\n {errMsg ?
: null}\n
, value: any, rowData: any) => ReactNode;\n}\n\nexport default class CustomField extends BaseTableField {\n\n renderField() {\n const field = this.field;\n const { nextTablePrefix, value, onChange, rules, name, renderField, rowData, ...rest } = this.props;\n\n const props = field.init(name, { rules }, rest);\n delete props.value; // 外部默认为非受控模式\n\n return renderField(props, value, rowData);\n }\n}\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/component/field/dateField.tsx",
"content": "import React from \"react\";\nimport Moment, { MomentInput } from \"moment\";\nimport { DatePicker } from \"@alifd/next\";\nimport BaseTableField from \"./baseTableField\";\n\nexport default class DateField extends BaseTableField {\n convertValueToSet(value: MomentInput) {\n return value ? Moment(value) : value;\n }\n\n dataChangeHandler(value: any) {\n const { onChange } = this.props;\n onChange && onChange(value ? value.toDate().getTime() : value);\n }\n\n renderField() {\n const field = this.field;\n const { nextTablePrefix, value, onChange, rules, name, ...rest } = this.props;\n\n return ( {\n\n renderField() {\n const field = this.field;\n const { nextTablePrefix, value, onChange, rules, name, renderChildren, ...rest } = this.props;\n if (renderChildren) {\n return (\n \n {renderChildren()}\n \n );\n }\n return null;\n\n }\n}\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/component/field/selectField.tsx",
"content": "import React from \"react\";\nimport { Select } from \"@alifd/next\";\nimport BaseTableField from \"./baseTableField\";\nimport { SelectProps } from \"@alifd/next/types/select\";\n\ninterface ISelectFieldProps {\n renderChildren?(): SelectProps['children'];\n}\n\nexport default class SelectField extends BaseTableField {\n\n renderField() {\n const field = this.field;\n const { nextTablePrefix, value, onChange, rules, name, renderChildren, ...rest } = this.props;\n\n return (\n {renderChildren ? renderChildren() : null}\n );\n }\n}\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/component/webCustomColumnDrawer.tsx",
"content": "import React from \"react\";\nimport { Drawer, Button, Icon, Message, Checkbox, Switch } from '@alifd/next';\nimport cloneDeep from 'lodash/cloneDeep';\nimport isEqual from 'lodash/isEqual';\nimport { Table } from '@alifd/next';\n\nfunction getSelectedRowKeys(columns: IWebCustomColumnDrawerProps['columns'] = []) {\n const selectedRowKeys: string[] = [];\n\n columns && columns.forEach((item) => {\n const { hidden, dataKey } = item;\n\n if (!hidden && dataKey) {\n selectedRowKeys.push(dataKey);\n }\n });\n\n return selectedRowKeys;\n}\n\nexport interface IWebCustomColumnDrawerProps {\n columns?: any[];\n onOk?: (columns: IWebCustomColumnDrawerProps['columns']) => void;\n onClose?: () => void;\n locale?: {\n [propKey: string]: string;\n }\n nextTablePrefix?: string;\n visible: boolean;\n}\n\ninterface IWebCustomColumnDrawerState {\n defaultColumns: IWebCustomColumnDrawerProps['columns'];\n currentColumns: IWebCustomColumnDrawerProps['columns'];\n}\n\nexport default class WebCustomColumnDrawer extends React.Component {\n static defaultProps = {\n columns: [],\n };\n\n constructor(props: IWebCustomColumnDrawerProps) {\n super(props);\n\n const { columns } = this.props;\n\n this.state = {\n defaultColumns: cloneDeep(columns),\n currentColumns: cloneDeep(columns),\n };\n }\n\n componentWillReceiveProps(nextProps: IWebCustomColumnDrawerProps) {\n const { defaultColumns } = this.state;\n const { columns: nextColumns } = nextProps;\n\n if (!isEqual(defaultColumns, nextColumns)) {\n this.setState({\n defaultColumns: cloneDeep(nextColumns),\n currentColumns: cloneDeep(nextColumns),\n });\n }\n }\n\n isHidden(dataKey: string) {\n const { currentColumns = [] } = this.state;\n\n const column = currentColumns.find((item) => {\n return item.dataKey === dataKey;\n });\n\n return column ? (!!column.hidden) : false;\n }\n\n isLocked(dataKey: string) {\n const { currentColumns = [] } = this.state;\n\n const column = currentColumns.find((item) => {\n return item.dataKey === dataKey;\n });\n\n let lock = column && column.lock;\n if (lock === \"none\") {\n lock = undefined;\n }\n\n return !!lock;\n }\n\n isAllColumnsShown() {\n const { currentColumns = [] } = this.state;\n\n return !currentColumns.some((item) => {\n return item.hidden;\n });\n }\n\n handleCheck(checked: boolean, dataKey: string) {\n const { currentColumns = [] } = this.state;\n\n const column = currentColumns.find((item) => {\n return item.dataKey === dataKey;\n });\n\n if (column) {\n column.hidden = !checked;\n column.lock = false;\n this.forceUpdate();\n }\n }\n\n handleLock(checked: boolean, dataKey: string) {\n const { currentColumns = [] } = this.state;\n\n const column = currentColumns.find((item) => {\n return item.dataKey === dataKey;\n });\n\n if (column) {\n column.lock = checked ? 'left' : undefined;\n this.forceUpdate();\n }\n }\n\n restoreDefault() {\n const { defaultColumns } = this.state;\n\n this.setState({\n currentColumns: cloneDeep(defaultColumns),\n });\n }\n\n handleOk() {\n const { currentColumns = [] } = this.state;\n const { onOk, locale = {} } = this.props;\n\n let shownCount = 0;\n let fixedCount = 0;\n currentColumns.forEach((colums) => {\n const { lock, hidden } = colums;\n\n if (!hidden) {\n shownCount++;\n }\n\n if (lock && lock != \"none\") {\n fixedCount++;\n }\n });\n\n if (currentColumns.length >= 2 && shownCount < 2) {\n Message.error(locale.tipLeastColumns);\n return;\n }\n\n onOk && onOk(currentColumns);\n }\n\n handleCheckAll(checked: boolean) {\n const { currentColumns = [] } = this.state;\n\n currentColumns.forEach((item) => {\n return item.hidden = !checked;\n });\n\n this.forceUpdate();\n }\n\n renderColumnShown(value: any, record: any, hasCheckbox: boolean) {\n const { nextTablePrefix } = this.props;\n const { dataKey } = record;\n\n return \n {hasCheckbox ? {\n this.handleCheck(checked, dataKey);\n }} checked={!this.isHidden(dataKey)} /> : null}\n\n \n {value}\n \n
;\n }\n\n renderColumnFixed(value: any, rowIndex: string, record: any) {\n const { dataKey } = record;\n\n return this.isHidden(dataKey) ? null : {\n this.handleLock(checked, dataKey);\n }} />;\n }\n render() {\n const { nextTablePrefix, onClose, visible, locale = {} } = this.props;\n const { currentColumns = [] } = this.state;\n return (\n \n
\n\n \n
{locale.customColumn}
\n
\n
\n
{\n return !item.isGroup\n })}\n hasBorder={false} primaryKey=\"dataKey\"\n rowSelection={{\n selectedRowKeys: getSelectedRowKeys(currentColumns),\n onSelectAll: (selected) => {\n this.handleCheckAll(selected);\n },\n onSelect: (selected, records) => {\n const { dataKey } = records;\n this.handleCheck(selected, dataKey);\n },\n }}>\n {\n return this.renderColumnShown(value, record, false);\n }} title={locale.showColumn} dataIndex=\"title\"\n width=\"60%\" />\n
\n
\n {locale.cancel} \n {locale.restoreDefault} \n {locale.submit} \n
\n \n {\n renderActionButton(item: IAction, index: number) {\n const { nextTablePrefix, onActionClick } = this.props;\n\n let content;\n const itemProps = {\n onClick: () => {\n onActionClick && onActionClick(item, index);\n },\n };\n\n if (item.render && isFunction(item.render)) {\n content = (\n \n {item.render(item.title)}\n
\n );\n } else {\n content = (\n \n {item.title}\n \n );\n }\n\n return (\n \n {content}\n {index === 0 ? null :
}\n
\n {linkBar.slice(0).reverse().map((link, index) => {\n return link ? this.renderActionButton(link, index) : null;\n })}\n
\n );\n }\n}\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/component/webNextTableActionCell.tsx",
"content": "import React, { ReactNode } from \"react\";\nimport classnames from 'classnames';\nimport { Button, MenuButton } from '@alifd/next';\nimport actionTitleRender from \"../utils/render/actionTitleRender\";\nimport runColumnActionCallback from \"../utils/runColumnActionCallback\";\nimport filterActionColumn from \"../utils/filterActionColumn\";\nimport dispatchResizeEvent from \"../utils/dispatchResizeEvent\";\n\nconst { Item } = MenuButton;\n\nexport interface IActionColumnItem {\n title: string;\n callback?: (rowData: any, action: IActionColumnItem, index?: number) => void;\n device?: string[];\n mode?: string;\n render?: (title: IActionColumnItem['title'], rowData: any) => ReactNode;\n}\n\nexport interface IWebNextTableActionCellProps {\n actionColumn?: IActionColumnItem[];\n actionType?: string;\n maxWebShownActionCount?: number;\n nextTablePrefix?: string;\n rowData?: any;\n device?: string;\n index?: number;\n locale?: {\n [prop: string]: string;\n }\n}\n\nexport default class WebNextTableActionCell extends React.Component {\n refreshCellUI() {\n this.forceUpdate(() => {\n dispatchResizeEvent();\n });\n }\n componentDidMount() {\n setTimeout(() => {\n dispatchResizeEvent()\n }, 400)\n }\n\n render() {\n const { actionColumn, actionType, maxWebShownActionCount = 3, nextTablePrefix, rowData, device, index, locale = {} } = this.props;\n const currentActionColumn = filterActionColumn(actionColumn, rowData, device);\n const showMoreAction = currentActionColumn.length > maxWebShownActionCount;\n const actionColumnToRender = currentActionColumn.slice(0, (showMoreAction ? maxWebShownActionCount - 1 : undefined));\n const remainActions = currentActionColumn.slice(maxWebShownActionCount - 1);\n const isLink = actionType === 'link';\n\n const menu = remainActions.map((action) => {\n const render = actionTitleRender(action, rowData)\n return render ? - {render}
: null;\n }).filter(i => i !== null);\n\n return (\n {\n actionColumnToRender.map((action) => {\n const render = actionTitleRender(action, rowData)\n return (\n render ? {\n e.stopPropagation();\n\n runColumnActionCallback({ index, rowData, action }).finally(() => {\n this.refreshCellUI();\n });\n }}>\n {render}\n : null\n );\n })\n }\n\n {showMoreAction && menu.length ?\n {\n const title = item.props.title;\n const action = remainActions.find((item) => {\n return item.title = title;\n });\n runColumnActionCallback({\n index,\n rowData,\n action: action!,\n }).finally(() => {\n this.refreshCellUI();\n });\n }}\n label={locale.more}\n >{menu} : null}\n
);\n }\n}\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/component/webNextTableCell.tsx",
"content": "import React from \"react\";\nimport isFunction from \"lodash/isFunction\";\nimport commonTableCellRender from \"../utils/render/commonTableCellRender\";\nimport { safeAccess, safeWrite } from \"../utils/chainAccess\";\nimport InputField from \"./field/inputField\";\nimport SelectField from \"./field/selectField\";\nimport RadioField from \"./field/radioField\";\nimport DateField from \"./field/dateField\";\nimport CustomField from \"./field/customField\";\nimport DateRangeField from \"./field/dateRangeField\";\nimport BaseTableField from \"./field/baseTableField\";\n\nconst fieldsMap = {\n select: SelectField,\n text: InputField,\n radio: RadioField,\n date: DateField,\n dateRange: DateRangeField,\n custom: CustomField,\n};\n\nfunction canEditCell(canEdit: boolean, rowData: IWebNextTableCellProps['rowData']) {\n if (typeof canEdit === \"undefined\" || canEdit === null) {\n return true;\n }\n\n if (isFunction(canEdit)) {\n return canEdit(rowData);\n }\n\n return !!canEdit;\n}\n\nexport interface IWebNextTableCellProps {\n rowData: any;\n column: {\n editType?: keyof typeof fieldsMap;\n dataKey: string;\n [prop: string]: any;\n };\n isRenderEditMode?: boolean;\n rowIndex: number;\n nextTablePrefix?: string;\n onCellDataChange?(options: {\n dataKey: IWebNextTableCellProps['column']['dataKey'];\n value: any,\n rowData: IWebNextTableCellProps['rowData'];\n rowIndex: IWebNextTableCellProps['rowIndex'];\n }): void;\n}\n\ninterface IWebNextTableCellState {\n editable: boolean;\n currentValue: any;\n}\n\nexport default class WebNextTableCell extends React.Component {\n fieldComponentRef: React.RefObject;\n constructor(props: IWebNextTableCellProps) {\n super(props);\n\n this.state = {\n editable: false,\n currentValue: this.getRowValue(),\n };\n\n this.fieldComponentRef = React.createRef();\n }\n\n setEditable(v: boolean) {\n const { rowData } = this.props;\n rowData.__mode__ = v ? \"EDIT\" : \"VIEW\";\n\n this.setState({ editable: !!v });\n }\n\n getRowValue() {\n const { rowData, column } = this.props;\n const { dataKey } = column;\n\n return safeAccess(rowData, dataKey);\n }\n\n saveCell() {\n const { currentValue } = this.state;\n const { rowData, column } = this.props;\n const { dataKey } = column;\n\n safeWrite(rowData, dataKey, currentValue);\n this.setEditable(false);\n }\n\n resetCell() {\n this.setState({\n currentValue: this.getRowValue(),\n });\n\n this.setEditable(false);\n }\n\n validateCell() {\n const current = this.fieldComponentRef.current;\n const validate = current && current.validate;\n return validate && validate.call(current);\n }\n\n _fillFields(rowData: IWebNextTableCellProps['rowData'], dataKey: IWebNextTableCellProps['column']['dataKey']) {\n rowData.__fields__ = rowData.__fields__ || {};\n rowData.__fields__[dataKey] = this;\n }\n\n renderCellEditInner() {\n const { currentValue } = this.state;\n const { nextTablePrefix, column, rowData, rowIndex, onCellDataChange } = this.props;\n const { editType, dataKey } = column;\n const FieldComponent = fieldsMap[editType!];\n\n let { editProps } = column;\n if (isFunction(editProps)) {\n editProps = editProps(rowData);\n }\n\n return ( {\n // 兼容乐高 onChange 的返回格式 { value: value, ...rest }\n let realValue = value;\n if (value && (typeof value === 'object') && Object.hasOwnProperty.call(value, 'value')) {\n realValue = value.value;\n }\n this.setState({ currentValue: realValue });\n onCellDataChange && onCellDataChange({\n dataKey,\n value: realValue,\n rowData,\n rowIndex,\n });\n }}\n rowData={rowData}\n {...editProps}\n />);\n }\n\n render() {\n const { editable } = this.state;\n const { column, rowData, isRenderEditMode, rowIndex } = this.props;\n const { editType, canEdit, dataKey } = column;\n\n this._fillFields(rowData, dataKey);\n\n if (isRenderEditMode && editable && editType && editType in fieldsMap && canEditCell(canEdit, rowData)) {\n return ( {\n e.stopPropagation();\n }}>\n {this.renderCellEditInner()}\n
);\n }\n\n return commonTableCellRender(safeAccess(rowData, dataKey), rowIndex, rowData, column);\n }\n}\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/component/webPagination.tsx",
"content": "import React from \"react\";\nimport classnames from 'classnames';\nimport isString from \"lodash/isString\";\nimport { Pagination } from '@alifd/next';\nimport { paginationProps, fetchKey } from \"../utils/tableProps\";\nimport { PaginationProps } from \"@alifd/next/types/pagination\";\n\nexport interface IWebPaginationProps extends Pick {\n nextTablePrefix?: string;\n currentPage?: PaginationProps['current'];\n totalCount?: PaginationProps['total'];\n locale?: {\n [prop: string]: string;\n }\n hideOnlyOnePage?: boolean; \n noPadding?: boolean;\n paginationPosition?: string;\n}\n\nexport default class WebPagination extends React.Component {\n render() {\n const { nextTablePrefix, currentPage, pageSize, totalCount, locale, onChange, onPageSizeChange, hideOnlyOnePage, noPadding } = this.props;\n\n const myProps = fetchKey(this.props, paginationProps as Array);\n const { pageSizeList, paginationPosition = 'right', ...rest } = myProps;\n\n if (hideOnlyOnePage && pageSize !== undefined && totalCount !== undefined && pageSize > totalCount) {\n return null\n }\n return (\n \n
{\n return (\n {locale && locale.totalCount ? locale.totalCount : '总计'}:{' '}{total}{' '} );\n }}\n {...\n {\n ...rest,\n pageSizeList: (pageSizeList && isString(pageSizeList)) ? (() => {\n const pageSizeArray = pageSizeList.split(',');\n if (pageSizeArray.length > 1) {\n return pageSizeArray.map(i => parseInt(i, 10));\n }\n })() : pageSizeList,\n current: currentPage,\n pageSize,\n total: totalCount,\n onChange,\n onPageSizeChange,\n }\n }\n />\n
\n {\n\n render() {\n const { items, nextTablePrefix, defaultValue, onChange } = this.props;\n\n return (\n \n {\n return \n ;\n }}>\n {\n items.map((item) => {\n return {item.text} ;\n })\n }\n \n
\n );\n }\n}\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/component/webToolbar.tsx",
"content": "import React, { MouseEventHandler, ReactNode } from \"react\";\nimport classnames from \"classnames\";\nimport { Button, Search, Pagination, Icon } from '@alifd/next';\nimport WebRowOrder, { IWebRowOrderProps } from \"./webRowOrder\";\nimport WebLinkBar from \"./webLinkBar\";\nimport { SearchProps } from \"@alifd/next/types/search\";\nimport { PaginationProps } from \"@alifd/next/types/pagination\";\nimport { ButtonProps } from \"@alifd/next/types/button\";\n\nexport interface IAction {\n render?: (title: IAction['title']) => ReactNode;\n isDisabled?: () => boolean;\n title?: ReactNode;\n type: ButtonProps['type'];\n disabled: boolean;\n callback?: (action: IAction) => void;\n}\n\nexport interface IWebToolbarProps {\n nextTablePrefix?: string;\n onSearch?: SearchProps['onSearch'];\n onActionClick?: (action: IAction, index: number) => void;\n locale?: { [prop: string]: string };\n showActionBar?: boolean;\n actionBar?: IAction[];\n showLinkBar?: boolean;\n linkBar?: any;\n showSearch?: boolean;\n searchBarPlaceholder?: string;\n showCustomColumn?: boolean;\n onClickCustomColumn?: MouseEventHandler;\n rowOrder?: IWebRowOrderProps;\n customBarItem?: {\n render?: () => ReactNode;\n rightRender?: () => ReactNode;\n bottomRender?: () => ReactNode;\n }\n showMiniPager?: boolean;\n paginationProps?: Pick & {\n currentPage?: PaginationProps['current'];\n totalCount?: PaginationProps['total'];\n };\n noPadding?: boolean;\n}\n\nexport default class WebToolbar extends React.Component {\n render() {\n const {\n nextTablePrefix, onSearch, onActionClick, locale = {},\n showActionBar, actionBar, showLinkBar, linkBar, showSearch, searchBarPlaceholder, showCustomColumn,\n onClickCustomColumn, rowOrder, customBarItem, showMiniPager, paginationProps, noPadding\n } = this.props;\n\n const { currentPage, pageSize, totalCount, onChange, onPageSizeChange } = paginationProps || {};\n\n const renderCustomBarItem = !!(customBarItem && customBarItem.render);\n const renderCustomBarItemRight = !!(customBarItem && customBarItem.rightRender);\n const renderCustomBarItemBottom = !!(customBarItem && customBarItem.bottomRender);\n const renderActionBar = !!(showActionBar && actionBar && actionBar.length);\n const renderLeft = renderActionBar || renderCustomBarItem;\n\n const renderLinkBar = !!(showLinkBar && linkBar && linkBar.length);\n const renderRight = renderLinkBar || rowOrder || showCustomColumn || showMiniPager || showSearch || renderCustomBarItemRight;\n\n const renderToolbar = renderLeft || renderRight;\n if (!renderToolbar) {\n return null;\n }\n\n return (\n \n {renderLeft ?
\n {renderActionBar ? actionBar.map((action, index) => {\n const { isDisabled, title, type, disabled, callback, ...rest } = action\n const buttonType = type ? type : index === 0 ? 'secondary' : 'normal';\n const disable = disabled !== undefined ? disabled : isDisabled ? !!(isDisabled()) : false;\n\n return (\n
{\n onActionClick && onActionClick(action, index);\n }}>\n {title}\n \n );\n }) : null}\n\n {renderCustomBarItem ?
\n {customBarItem.render!()}\n
: null}\n
: null}\n\n {renderRight ?
\n {renderLinkBar ?\n
: null}\n {rowOrder ?
: null}\n {showCustomColumn ?
\n {locale.customColumn} \n
: null}\n\n {showMiniPager ?
: null}\n\n {\n showSearch\n ?
: null\n }\n {\n renderCustomBarItemRight ?
{customBarItem.rightRender!()}
: null\n }\n
: null\n }\n\n
\n\n {renderCustomBarItemBottom ?
\n {customBarItem.bottomRender!()}\n
: null}\n
, Omit, Pick {}\nclass NextTable extends React.Component {\n static Column = Column\n static ColumnGroup = ColumnGroup\n static GroupHeader = GroupHeader\n static GroupFooter = GroupFooter\n\n static defaultProps = {\n columns: [],\n clsPrefix: 'deep-',\n locale: zhCN,\n tablePrefix: 'table-',\n primaryKey: 'id',\n maxWebShownActionCount: 3,\n expandedIndexSimulate: false,\n loadingComponent: (props: LoadingProps) => {\n return ;\n\n constructor(props: ITableProps) {\n super(props);\n\n this.tableRef = React.createRef();\n buildNextTableMethod(this);\n }\n\n renderTable() {\n const { clsPrefix, tablePrefix } = this.props;\n const myProps = fetchKey(this.props, tableProps);\n const { children } = myProps;\n if (children) {\n myProps.columns = getColumnsFromChildren(children)\n }\n myProps.nextTablePrefix = `${clsPrefix}${tablePrefix}`;\n myProps.actionColumn = delegateFunctions(myProps.actionColumn, 'callback', this, 2);\n myProps.actionBar = delegateFunctions(myProps.actionBar, 'callback', this);\n myProps.linkBar = delegateFunctions(myProps.linkBar, 'callback', this);\n\n return \n {this.renderTable()}\n
\n );\n }\n}\n\nexport {\n NextTable,\n};\n\nexport default ConfigProvider.config(NextTable);"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/interface/index.ts",
"content": ""
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/locale/en-us.ts",
"content": "export default {\n tipLeastNeededColumns: '2 shown columns is needed at least',\n tipLeastColumns: '2 shown columns at least',\n customColumn: 'Custom Columns',\n showColumn: 'Show Column',\n stickColumn: 'Stick Column',\n showAll: 'Show All',\n noData: 'No data',\n restoreDefault: 'Reset',\n notice: 'Notice',\n ok: 'OK',\n detail: 'Detail',\n cancel: 'Cancel',\n submit: 'Submit',\n totalCount: 'Total',\n collapse: 'Collapse',\n expand: 'Expand',\n more: 'More',\n}"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/locale/zh-cn.ts",
"content": "export default {\n tipLeastNeededColumns: '最少需要展示2列',\n tipLeastColumns: '最少展示2列',\n customColumn: '自定义列',\n showColumn: '展示此列',\n stickColumn: '固定此列',\n showAll: '全部展示',\n noData: '没有数据',\n restoreDefault: '恢复默认',\n notice: '提示',\n ok: '确定',\n detail: '详情',\n cancel: '取消',\n submit: '提交',\n totalCount: '总计',\n collapse: '收起',\n expand: '展开',\n more: '更多',\n}"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/mixin/columnMethods.tsx",
"content": "import React, { ReactNode } from \"react\";\nimport assign from \"lodash/assign\";\nimport deepcopy from 'lodash/cloneDeep';\nimport WebCustomColumnDrawer from \"../component/webCustomColumnDrawer\";\nimport filterColumn from \"../utils/filterColumn\";\nimport type WebTable from \"../table/webTable\";\nimport { IWebTableProps } from \"../table/webTable\";\n\nexport interface IColumnMethods {\n init(this: WebTable): void;\n showCustomColumnDrawer(this: WebTable): void;\n hideCustomColumnDrawer(this: WebTable): void;\n setOriginalColumns(this: WebTable, columns: IWebTableProps['columns']): void;\n changeCurrentColumns(this: WebTable, columns: IWebTableProps['columns']): void;\n renderCustomColumnDrawer(this: WebTable): ReactNode;\n}\n\nconst methods: IColumnMethods = {\n init() {\n const { columns = [] } = this.props;\n\n const mergeState = {\n isCustomColumnDrawerShown: false,\n originalColumns: deepcopy(columns),\n currentColumns: filterColumn(columns),\n };\n\n this.state = this.state || {};\n assign(this.state, mergeState);\n },\n\n showCustomColumnDrawer() {\n this.setState({\n isCustomColumnDrawerShown: true,\n });\n },\n\n hideCustomColumnDrawer() {\n this.setState({\n isCustomColumnDrawerShown: false,\n });\n },\n\n setOriginalColumns(columns) {\n this.setState({\n originalColumns: deepcopy(columns),\n });\n },\n\n changeCurrentColumns(columns) {\n this.setState({\n currentColumns: filterColumn(columns),\n });\n },\n renderCustomColumnDrawer() {\n const { isCustomColumnDrawerShown, originalColumns } = this.state;\n const { nextTablePrefix, locale, onColumnsChange = () => { } } = this.props;\n\n return (\n {\n this.changeCurrentColumns(columns);\n onColumnsChange(columns)\n this.hideCustomColumnDrawer();\n }}\n />\n );\n },\n};\n\nexport default methods;\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/mixin/commonMethods.ts",
"content": "import assign from \"lodash/assign\";\nimport deepcopy from \"lodash/cloneDeep\";\nimport { isValidElement, ReactNode } from \"react\";\nimport WebTable from \"../table/webTable\";\nimport convertData from \"../utils/convertData\";\nimport getDataSource from \"../utils/getDataSource\";\n\n\nexport interface ICommonMethods {\n init(this: WebTable): void;\n loadData(this: WebTable, from: string): void;\n getDataSource(this: WebTable): any;\n getDataItem(this: WebTable, value: any): any;\n onSort(this: WebTable, dataIndex: string, order: string): void;\n onSearch(this: WebTable, searchKey: string): void;\n renderEmptyContent(this: WebTable): ReactNode | null;\n onPageSizeChange(this: WebTable, pageSize: number): void;\n onPageNumChange(this: WebTable, current: number): void;\n getPaginationProps(this: WebTable): any;\n}\n\nconst methods: ICommonMethods = {\n init() {\n const { pagination = {} } = this.props;\n const { pageSize } = pagination;\n const result = convertData(getDataSource(this.props));\n\n const mergeState = {\n searchKey: '',\n orderColumn: '',\n orderType: '',\n dataSource: result.dataSource || [],\n totalCount: result.totalCount || 0,\n pageSize,\n currentPage: result.currentPage || 1,\n };\n\n this.state = this.state || {};\n assign(this.state, mergeState);\n },\n loadData(this, from) {\n const { onFetchData, onLoadData } = this.props;\n const { currentPage, pageSize, searchKey, orderColumn, orderType } = this.state;\n\n if (onLoadData) {\n onLoadData(currentPage, pageSize, searchKey, orderColumn, orderType, from);\n\n } else {\n onFetchData && onFetchData({ currentPage, pageSize, searchKey, orderColumn, orderType, from });\n }\n },\n getDataSource(this) {\n const { dataSource } = this.state;\n\n const list = deepcopy(dataSource);\n\n list.forEach((item: any) => {\n delete item.__mode__;\n delete item.__fields__;\n delete item.__expand__;\n });\n\n return list;\n },\n getDataItem(value) {\n const { primaryKey } = this.props;\n const { dataSource } = this.state;\n\n return dataSource.find((item: any) => {\n return item[primaryKey!] === value;\n });\n },\n onSort(dataIndex, order) {\n this.setState({\n orderColumn: dataIndex,\n orderType: order,\n }, () => {\n this.loadData('order');\n });\n },\n onSearch(searchKey) {\n this.setState({ searchKey }, () => {\n this.loadData('search');\n });\n },\n renderEmptyContent() {\n const { setEmptyContent, emptyContent } = this.props;\n\n if (!setEmptyContent) {\n return null;\n }\n\n return typeof emptyContent === 'function' ? emptyContent() : isValidElement(emptyContent) ? emptyContent : null;\n },\n onPageSizeChange(pageSize) {\n this.setState({ pageSize }, () => {\n this.loadData('pagination');\n });\n },\n onPageNumChange(current) {\n this.setState({\n currentPage: current,\n }, () => {\n this.loadData('pagination');\n });\n },\n getPaginationProps() {\n const { nextTablePrefix, pagination, locale, noPadding } = this.props;\n const { currentPage, pageSize, totalCount } = this.state;\n return {\n nextTablePrefix, currentPage, totalCount,\n ...pagination,\n noPadding,\n pageSize,\n locale,\n onChange: this.onPageNumChange.bind(this),\n onPageSizeChange: this.onPageSizeChange.bind(this),\n };\n },\n};\n\nexport default methods;\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/mixin/editableMethods.ts",
"content": "import assign from \"lodash/assign\";\nimport isObject from \"lodash/isObject\";\nimport isEmpty from \"lodash/isEmpty\";\nimport dispatchResizeEvent from \"../utils/dispatchResizeEvent\";\nimport getCleanRowData from \"../utils/getCleanRowData\";\nimport type WebTable from \"../table/webTable\";\n\nfunction getDataItemByValue(rowData: any, instance: WebTable) {\n const { primaryKey } = instance.props;\n const primaryValue = isObject(rowData) ? (rowData as any)[primaryKey!] : rowData;\n\n return instance.getDataItem(primaryValue);\n}\n\nfunction getAndCloneDataItem(rowData: any, instance: WebTable) {\n return getCleanRowData(getDataItemByValue(rowData, instance));\n}\n\nfunction callTableCell(rowData: any, instance: WebTable, callback: (field: any) => any) {\n const item = getDataItemByValue(rowData, instance) || {};\n const { __fields__ } = item;\n\n if (__fields__) {\n const promiseList: Promise[] = [];\n\n Object.keys(__fields__).forEach((name) => {\n const field = __fields__[name];\n if (field && callback) {\n promiseList.push(Promise.resolve(callback(field)));\n }\n });\n\n return Promise.all(promiseList);\n }\n\n return Promise.resolve();\n}\n\n// editRow(rowData): 使指定的行切换到编辑模式。\n// saveRow(rowData): 保存行至数据\n// resetRow(rowData): 重置行到数据（若保存过，则为保存过后的数据）。\n\n\nexport interface IEditableMethodsProps {\n onEditRow?(rowItem: any): void;\n onResetRow?(rowItem: any): void;\n onSaveRow?(rowItem: any): void;\n}\n\nexport interface IEditableMethods {\n init(this: WebTable): void;\n validateRow(this: WebTable, rowData: any): any;\n editRow(this: WebTable, rowData: any): any;\n saveRow(this: WebTable, rowData: any): any;\n resetRow(this: WebTable, rowData: any): any;\n}\n\nconst methods: IEditableMethods = {\n init() {\n const mergeState = {};\n\n this.state = this.state || {};\n assign(this.state, mergeState);\n },\n validateRow(rowData) {\n return callTableCell(rowData, this, (field) => {\n return field.validateCell();\n }).then((dataList) => {\n const result: any = {};\n\n dataList && dataList.forEach((field) => {\n field && Object.keys(field).forEach((name) => {\n result[name] = field[name];\n });\n });\n\n return isEmpty(result) ? undefined : result;\n });\n },\n editRow(rowData) {\n const { onEditRow } = this.props;\n\n const promise = callTableCell(rowData, this, (field) => {\n return field.setEditable(true);\n }).then(() => {\n const rowItem = getAndCloneDataItem(rowData, this);\n rowItem && onEditRow && onEditRow(rowItem);\n\n return rowItem;\n });\n\n promise.finally(() => {\n dispatchResizeEvent();\n });\n\n return promise;\n },\n saveRow(rowData) {\n const { onSaveRow } = this.props;\n\n const promise = this.validateRow(rowData).then((error: Error) => {\n if (error) {\n return Promise.reject(error);\n\n } else {\n return callTableCell(rowData, this, (field) => {\n return field.saveCell();\n });\n }\n }).then(() => {\n const rowItem = getAndCloneDataItem(rowData, this);\n rowItem && onSaveRow && onSaveRow(rowItem);\n\n return rowItem;\n });\n\n promise.finally(() => {\n dispatchResizeEvent();\n });\n\n return promise;\n },\n resetRow(rowData) {\n const { onResetRow } = this.props;\n\n const promise = callTableCell(rowData, this, (field) => {\n return field.resetCell();\n }).then(() => {\n const rowItem = getAndCloneDataItem(rowData, this);\n rowItem && onResetRow && onResetRow(rowItem);\n\n return rowItem;\n });\n\n promise.finally(() => {\n dispatchResizeEvent();\n });\n\n return promise;\n },\n};\n\nexport default methods;\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/mixin/loadMethods.ts",
"content": "import isPlainObject from \"lodash/isPlainObject\";\n\nexport default function loadMethods(target: {[propKey: string]: any}, source: {[propKey: string]: any}) {\n if (!source || !isPlainObject(source)) {\n return;\n }\n\n const { init, ...srcMethods } = source;\n\n // eslint-disable-next-line guard-for-in,no-restricted-syntax\n for (const methodName in srcMethods) {\n target[methodName] = source[methodName];\n }\n\n if (typeof init === 'function') {\n init.call(target);\n }\n}\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/scss/variables.scss",
"content": "/* write style here */\n@import '~@alifd/next/variables.scss';\n\n// 必须设置，请严格遵循该包含default的写法。\n$css-prefix: 'next-' !default;\n$deep-css-prefix: 'deep-' !default;\n\n// 使用到的主题扩展变量,内置默认值\n$color-fill1-5: #BBC3CC !default;\n$color-fill1-6: #A5AFBC !default;\n$color-fill1-7: #79889B !default;\n$color-fill1-8: #4C6079 !default;\n$color-fill1-9: #1F3858 !default;\n\n// default for theme-97\n$color-brand1-2: #FFF0E5 !default;\n$color-brand1-3: #FFF7F0 !default;\n\n// default for theme-254\n//$color-brand1-2: #E5F1FD !default;\n//$color-brand1-3: #F0F7FF !default;\n\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/table/webTable.tsx",
"content": "import React, { ReactNode } from 'react';\nimport { Table } from '@alifd/next';\nimport isEqual from 'lodash/isEqual';\nimport { ColumnProps, TableProps } from '@alifd/next/types/table';\nimport convertData from '../utils/convertData';\nimport loadMethods from \"../mixin/loadMethods\";\nimport commonMethods, { ICommonMethods } from \"../mixin/commonMethods\";\nimport columnMethods, { IColumnMethods } from \"../mixin/columnMethods\";\nimport WebToolbar, { IWebToolbarProps } from \"../component/webToolbar\";\nimport WebPagination from \"../component/webPagination\";\nimport hasRowAction from \"../utils/hasRowAction\";\nimport runToolbarActionCallback from \"../utils/runToolbarActionCallback\";\nimport buildTableProps from \"../utils/buildTableProps\";\nimport editableMethods, { IEditableMethods, IEditableMethodsProps } from \"../mixin/editableMethods\";\nimport WebNextTableActionCell, { IWebNextTableActionCellProps } from \"../component/webNextTableActionCell\";\nimport WebNextTableCell, { IWebNextTableCellProps } from \"../component/webNextTableCell\";\nimport getDataSource from \"../utils/getDataSource\";\nimport titleMessageRender from \"../utils/render/titleMessageRender\";\nimport { LoadingProps } from '@alifd/next/types/loading';\n\n\n\nexport interface IWebTableProps extends IWebToolbarProps, IEditableMethodsProps, Omit, Omit {\n data?: any;\n columns?: any[];\n nextTablePrefix?: string;\n isPagination?: boolean;\n actionTitle?: string;\n actionFixed?: string;\n actionWidth?: number | string;\n pagination?: any;\n primaryKey?: string;\n onFetchData?: (options: Pick & { from: string; }) => void;\n onLoadData?: (...options: any[]) => void;\n onColumnsChange?: (columns: IWebTableProps['columns']) => void;\n setEmptyContent?: boolean;\n emptyContent?: (() => ReactNode) | ReactNode;\n noPadding?: boolean;\n dataSource?: any;\n device?: string;\n actionHidden?: boolean;\n theme?: string;\n width?: string | number;\n height?: string | number;\n showRowSelector?: boolean;\n onSelect?: NonNullable['onSelect'];\n onSelectAll?: NonNullable['onSelectAll'];\n isRowSelectorDisabled?: (rowData: any, index: number) => boolean;\n rowSelector?: string;\n onCellDataChange?: IWebNextTableCellProps['onCellDataChange'];\n clsPrefix?: string;\n tablePrefix?: string;\n className?: string;\n loadingComponent?: (props: LoadingProps) => ReactNode;\n }\n\ninterface IWebTableState {\n originalColumns?: any[];\n currentColumns?: any[]\n currentPage: number;\n pageSize: number;\n searchKey: string; \n orderColumn: string;\n orderType: string;\n dataSource: any;\n totalCount: number;\n isCustomColumnDrawerShown: boolean;\n}\n\ninterface WebTable extends React.Component, Omit, Omit, Omit {}\nclass WebTable extends React.Component {\n static displayName = 'WebTable';\n\n constructor(props: IWebTableProps) {\n super(props);\n\n loadMethods(this, commonMethods);\n loadMethods(this, columnMethods);\n loadMethods(this, editableMethods);\n }\n\n componentWillReceiveProps(nextProps: IWebTableProps) {\n const { data } = this.props;\n const nextData = getDataSource(nextProps);\n\n if (!isEqual(nextData, data)) {\n this.setState(convertData(nextData));\n }\n\n const {originalColumns} = this.state;\n const {columns : nextColumns} = nextProps;\n\n if (!isEqual(originalColumns, nextColumns)) {\n this.setOriginalColumns(nextColumns);\n this.changeCurrentColumns(nextColumns);\n }\n }\n\n renderColumn(column: any) {\n const { nextTablePrefix, onCellDataChange } = this.props;\n const { lock, dataKey, width, title, titleRender, message, sortable, align, resizable, filters, filterMode } = column;\n const props: ColumnProps = {\n dataIndex: dataKey,\n cell: (value, rowIndex, rowData) => {\n return (;\n }\n\n\n renderColumns(columns: IWebTableState['currentColumns']) {\n return columns ? columns.map((column) => {\n if (!column.isGroup) {\n return this.renderColumn(column)\n }\n return (\n column.children && column.children.length ? \n {\n this.renderColumns(column.children)\n }\n : null\n )\n }) : null;\n }\n\n renderActionColumns() {\n const {\n actionTitle, actionFixed, actionWidth, actionColumn, actionType,\n maxWebShownActionCount, nextTablePrefix, device, primaryKey, locale\n } = this.props;\n\n if (!hasRowAction(this.props)) {\n return null;\n }\n\n const actionColumnProps: ColumnProps = {\n title: actionTitle,\n lock: actionFixed !== 'none' ? actionFixed : false,\n width: actionWidth,\n cell: (value, index, rowData) => {\n return \n
{\n runToolbarActionCallback({ action: item });\n }}\n onSearch={this.onSearch.bind(this)}\n onClickCustomColumn={this.showCustomColumnDrawer.bind(this)}\n paginationProps={paginationProps}\n />\n\n \n {this.renderColumns(currentColumns)}\n {this.renderActionColumns()}\n \n\n {isPagination ? : null}\n\n {this.renderCustomColumnDrawer()}\n | 'getDataSource')[] = [\n 'editRow',\n 'saveRow',\n 'resetRow',\n 'validateRow',\n 'getDataSource',\n];\n\nexport default function buildNextTableMethod(instance: NextTable) {\n methodList.forEach((name) => {\n instance[name] = function () {\n const { tableRef } = instance;\n const { current } = tableRef;\n if (current) {\n const method = current[name];\n if (method) {\n return method.apply(current, arguments as any);\n }\n }\n\n };\n });\n}\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/buildTableProps.ts",
"content": "import { IWebTableProps } from \"../table/webTable\";\nimport { TableProps } from '@alifd/next/types/table';\n\nexport default function buildTableProps(props: IWebTableProps) {\n const {\n loading, dataSource, onSort, emptyContent, onFilter, cellProps, rowProps,\n primaryKey, theme, hasHeader, fixedHeader, maxBodyHeight, stickyHeader, isTree, indent,\n onRowClick, onRowMouseEnter, onRowMouseLeave, onResizeChange, width, height, loadingComponent,\n hasExpandedRowCtrl, expandedRowRender, onRowOpen, expandedRowIndent, useVirtual,offsetTop, sort, sortIcons,\n showRowSelector, onSelect, onSelectAll, isRowSelectorDisabled, rowSelector, size, expandedIndexSimulate, rowSelection,\n } = props;\n\n let tableProps: TableProps = {\n size,\n primaryKey: primaryKey || 'id',\n dataSource: dataSource || [],\n hasBorder: theme === 'border',\n hasHeader,\n isZebra: theme === 'zebra',\n loading,\n emptyContent,\n cellProps,\n rowProps,\n onFilter,\n fixedHeader,\n maxBodyHeight,\n stickyHeader,\n offsetTop,\n isTree,\n indent,\n useVirtual,\n onRowClick,\n onRowMouseEnter,\n onRowMouseLeave,\n onResizeChange,\n sort,\n sortIcons,\n onSort,\n loadingComponent,\n hasExpandedRowCtrl,\n expandedRowRender,\n onRowOpen,\n expandedRowIndent,\n style: { width, height },\n expandedIndexSimulate,\n };\n\n if ('openRowKeys' in props) {\n tableProps.openRowKeys = props.openRowKeys\n }\n\n if (showRowSelector) {\n let selection: TableProps['rowSelection'];\n\n if (rowSelection) {\n selection = rowSelection;\n\n } else {\n selection = {};\n\n if (onSelect) {\n selection.onSelect = onSelect;\n }\n\n if (onSelectAll) {\n selection.onSelectAll = onSelectAll;\n }\n selection.mode = rowSelector === 'checkboxSelector' ? 'multiple' : 'single';\n if (isRowSelectorDisabled) {\n const isRowSelectorDisabledFunc = isRowSelectorDisabled;\n selection.getProps = (rowData, index) => ({\n disabled: isRowSelectorDisabledFunc(rowData, index),\n });\n }\n }\n tableProps.rowSelection = selection;\n }\n\n return tableProps;\n}\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/chainAccess.ts",
"content": "export function safeAccess(obj: { [prop: string]: any }, str: string) {\n return str.split('.').reduce((o, k) => (o ? o[k] : undefined), obj);\n};\n\nexport function safeWrite(obj: { [prop: string]: any }, str: string, value: any) {\n const segs = str.split('.');\n const key = segs.pop();\n const leaf = segs.reduce((o, k) => {\n if (!o[k]) {\n o[k] = {};\n }\n return o[k];\n }, obj);\n if (typeof key === 'string') {\n leaf[key] = value;\n }\n};\n\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/convertData.ts",
"content": "import deepcopy from 'lodash/cloneDeep';\nimport isPlainObject from \"lodash/isPlainObject\";\n\nexport default function convertData(data: Array | { data?: Array; currentPage?: string; totalCount?: string; }) {\n let dataSource: Array | undefined = [];\n let currentPage = 1;\n let totalCount = 0;\n\n if (Array.isArray(data)) {\n dataSource = data;\n\n } else if (isPlainObject(data)) {\n dataSource = data.data;\n currentPage = typeof data.currentPage !== \"undefined\" ? parseInt(data.currentPage, 10) : 1;\n totalCount = typeof data.totalCount !== \"undefined\" ? parseInt(data.totalCount, 10) : 0;\n }\n\n return {dataSource : dataSource ? deepcopy(dataSource) : [], currentPage, totalCount};\n}\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/delegateFunctions.ts",
"content": "import deepcopy from \"lodash/cloneDeep\";\nimport isFunction from \"lodash/isFunction\";\n\nexport default function delegateFunctions(list: any[] | undefined, key: string, context: any, newArgPosition?: number) {\n if (list && list.length) {\n const result = deepcopy(list);\n\n result.forEach((item) => {\n const func = item && item[key];\n\n if (func && isFunction(func)) {\n item[key] = function () {\n const ARGS = Array.prototype.slice.call(arguments);\n if (newArgPosition === undefined) {\n ARGS.push(context);\n } else {\n ARGS.splice(newArgPosition, 0, context);\n }\n\n return func.apply(context, ARGS);\n };\n }\n });\n\n return result;\n }\n}\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/dispatchResizeEvent.ts",
"content": "let lastDelayId: number;\n\nexport default function dispatchResizeEvent() {\n clearTimeout(lastDelayId);\n\n lastDelayId = window.setTimeout(function () {\n if (window.dispatchEvent) {\n window.dispatchEvent(new Event('resize'));\n }\n }, 10);\n}\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/filterActionColumn.ts",
"content": "import type { IWebTableProps } from \"../table/webTable\";\nimport filterActionColumnByDevice from \"./filterActionColumnByDevice\";\n\nexport default function filterActionColumn(actionColumn: IWebTableProps['actionColumn'], rowData: any, device: IWebTableProps['device']) {\n const filterByEditable = actionColumn.filter((action) => {\n if (action.render && typeof action.render === 'function' && !action.render(action.title, rowData)) {\n return false\n }\n if (rowData.__mode__ === \"EDIT\") {\n return action.mode === \"EDIT\";\n } else {\n return action.mode !== \"EDIT\";\n }\n\n });\n\n return filterActionColumnByDevice(filterByEditable, device);\n}\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/filterActionColumnByDevice.ts",
"content": "import type { IWebTableProps } from \"../table/webTable\";\n\nexport default function filterActionColumnByDevice(actionColumn: IWebTableProps['actionColumn'] = [], device: IWebTableProps['device']) {\n return actionColumn.filter((action) => {\n let actionDevice = action.device;\n\n if (device && actionDevice) {\n if (!Array.isArray(actionDevice)) {\n actionDevice = [actionDevice];\n }\n\n return actionDevice.includes(device);\n\n } else {\n return true;\n }\n });\n}\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/filterColumn.ts",
"content": "import type { IWebCustomColumnDrawerProps } from \"../component/webCustomColumnDrawer\";\n\nexport default function filterColumn(columns: IWebCustomColumnDrawerProps['columns'] = []) {\n return columns.filter((item) => {\n return item.hidden !== true;\n });\n}\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/formatter.ts",
"content": "import Big from 'big.js';\n\nconst Formatter = {\n date: (str: string | false | null, pattern?: string) => {\n // new Date(null,false) 会返回最初日期。\n if (str === null || str === false || str === undefined || str === '') {\n console.warn('Formatter: invalid date');\n return '';\n }\n const date = new Date(str);\n if (Object.prototype.toString.call(date) === '[object Date]') {\n if (isNaN(date.getTime())) {\n // invalid\n console.warn('Formatter: invalid date');\n return '';\n }\n let actualPattern = pattern || 'YYYY-MM-DD';\n const o = {\n 'M+': date.getMonth() + 1, // 月份\n 'D+': date.getDate(), // 日\n 'd+': date.getDate(), // 日\n 'H+': date.getHours(), // 小时\n 'h+': date.getHours(), // 小时\n 'm+': date.getMinutes(), // 分\n 's+': date.getSeconds(), // 秒\n 'Q+': Math.floor((date.getMonth() + 3) / 3), // 季度\n 'q+': Math.floor((date.getMonth() + 3) / 3), // 季度\n S: date.getMilliseconds(), // 毫秒\n };\n if (/(y+)/i.test(actualPattern)) {\n actualPattern = actualPattern.replace(\n /(y+)/i,\n (substr, $1) => {\n return (`${date.getFullYear()}`).slice(4 - $1.length)\n }\n );\n }\n (Object.keys(o) as Array).forEach((k) => {\n if (new RegExp(`(${k})`).test(actualPattern)) {\n actualPattern = actualPattern.replace(new RegExp(`(${k})`), (substr, $1) => {\n if ($1.length === 1) return `${o[k]}`;\n return `00${o[k]}`.slice(`${o[k]}`.length)\n })\n }\n });\n return actualPattern;\n }\n return '';\n },\n money: (str: string, delimiter = ' ', fixedNum?: number | string) => {\n const actualStr = fixedNum ? new Big(str).toFixed(parseInt(fixedNum.toString(), 10)).toString() : str;\n if (actualStr.indexOf('.') !== -1) {\n return actualStr.replace(/(\\d)(?=(?:\\d{3})+(\\.))/g, (match, $1) => $1 + delimiter)\n .replace(/(\\d{3})(?![$|\\.|\\(|\\s])/g, (match, $1) => $1);\n }\n return actualStr.replace(/(\\d)(?=(?:\\d{3})+$)/g, (match, $1) => $1 + delimiter);\n },\n};\n\n\n\n\n\nexport default Formatter;\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/getCleanRowData.ts",
"content": "import isPlainObject from \"lodash/isPlainObject\";\nimport forOwn from \"lodash/forOwn\";\nimport isArray from \"lodash/isArray\";\n\nfunction deepCopyExcept(data: any, callback: (value: any, key: string | number) => boolean) {\n let dest: any, i, shouldExcept, newValue;\n\n if (isPlainObject(data)) {\n dest = {};\n forOwn(data, (value, key) => {\n newValue = deepCopyExcept(value, callback);\n shouldExcept = callback(newValue, key);\n if (!shouldExcept) {\n dest[key] = newValue;\n }\n });\n } else if (isArray(data)) {\n dest = [];\n for (i = 0; i < data.length; i++) {\n newValue = deepCopyExcept(data[i], callback);\n shouldExcept = callback(newValue, i);\n if (!shouldExcept) {\n dest.push(newValue);\n }\n }\n } else {\n return data;\n }\n return dest;\n};\n\nexport default function getCleanRowData(rowData: any) {\n if (rowData) {\n const blackList = ['__mode__', '__fields__', '__expand__'];\n return deepCopyExcept(rowData, (value, key) => {\n return blackList.indexOf(key) !== -1\n })\n }\n}\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/getColumnsFromChildern.tsx",
"content": "import React, { ReactNode, ReactElement } from 'react'\nexport default (children: ReactNode) => {\n const getColumns = (children: ReactNode) => {\n let columns: any = []\n const getCols = (children: ReactNode) => {\n React.Children.map(children, item => {\n const { props } = item as ReactElement;\n if (props.children && props.children.length) {\n columns.push({\n isGroup: true,\n title: props.align ? {props.title || ''}
: props.title || '',\n children: getColumns(props.children)\n })\n } else {\n columns.push({...props})\n }\n });\n }\n getCols(children)\n return columns;\n }\n return getColumns(children)\n}"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/getDataSource.ts",
"content": "import type { IWebTableProps } from \"../table/webTable\";\n\nexport default function getDataSource(props: IWebTableProps) {\n if (props) {\n return props.dataSource || props.data;\n }\n}\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/hasRowAction.ts",
"content": "import { IWebTableProps } from \"../table/webTable\";\nimport filterActionColumnByDevice from \"./filterActionColumnByDevice\";\n\nexport default function hasRowAction(props: IWebTableProps, withoutEdit?: boolean) {\n const { actionHidden, actionColumn, device } = props;\n\n if (actionHidden) {\n return false;\n }\n\n if (actionColumn && actionColumn.length) {\n let actionColumnFilter = filterActionColumnByDevice(actionColumn, device);\n\n if (withoutEdit) {\n actionColumnFilter = actionColumnFilter.filter((action) => {\n return action.mode !== \"EDIT\";\n });\n }\n\n return !!(actionColumnFilter && actionColumnFilter.length);\n\n } else {\n return false;\n }\n}\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/render/actionTitleRender.tsx",
"content": "import type { IActionColumnItem } from \"../../component/webNextTableActionCell\";\n\nexport default function actionTitleRender(action: IActionColumnItem, rowData: any) {\n const { title, render } = action;\n\n if (render) {\n try {\n return render(title, rowData);\n } catch (e) {\n if (e instanceof Error) {\n console.warn(e.stack);\n }\n return title;\n }\n\n } else {\n return title;\n }\n}\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/render/cascadeTimestampRender.tsx",
"content": "import errorRender from './errorRender';\nimport defaultRender from './defaultRender';\nimport Formatter from '../formatter';\n\nexport default function cascadeTimestampRender(cellData: any, item: { timeFormatter?: string }) {\n if (!cellData) {\n return '';\n }\n\n const { timeFormatter } = item;\n if (Object.prototype.toString.call(cellData) === '[object Object]') {\n if (!cellData.hasOwnProperty('start') && !cellData.hasOwnProperty('end')) {\n return errorRender();\n }\n const start = Formatter.date(cellData.start, timeFormatter);\n const end = Formatter.date(cellData.end, timeFormatter);\n return defaultRender(`${start} ~ ${end}`);\n }\n return errorRender();\n};\n\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/render/commonTableCellRender.tsx",
"content": "import defaultRender from \"./defaultRender\";\nimport timestampRender from \"./timestampRender\";\nimport cascadeTimestampRender from \"./cascadeTimestampRender\";\nimport moneyRender from \"./moneyRender\";\nimport moneyRangeRender from \"./moneyRangeRender\";\nimport linkRender from './linkRender'\nimport fileRender from './fileRender'\nimport enumRender from './enumRender'\nimport imageRender from './imageRender'\n\nexport default function commonTableCellRender(value: any, index: number, rowData: any, column: any) {\n const { dataType } = column;\n\n if (dataType === 'text') {\n return defaultRender(value);\n }\n\n if (dataType === 'link') {\n return linkRender(value, column, rowData)\n }\n\n if (dataType === 'file') {\n return fileRender(value)\n }\n if (dataType === 'image') {\n return imageRender(value, column, rowData)\n }\n\n if (dataType === 'enum') {\n return enumRender(value, column)\n }\n\n if (dataType === 'timestamp') {\n return timestampRender(value, column);\n }\n\n if (dataType === 'cascadeTimestamp') {\n return cascadeTimestampRender(value, column);\n }\n\n if (dataType === 'money') {\n return moneyRender(value);\n }\n\n if (dataType === 'moneyRange') {\n return moneyRangeRender(value);\n }\n\n const { render } = column;\n if (render) {\n try {\n return render(value, index, rowData);\n } catch (e) {\n if (e instanceof Error) {\n console.warn(e.stack);\n }\n return defaultRender(value);\n }\n\n } else {\n return defaultRender(value);\n }\n}\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/render/defaultRender.tsx",
"content": "import React from 'react';\nimport isObject from \"lodash/isObject\";\n\nexport default function defaultRender(value: any, className = '') {\n if (value === undefined || value === null) {\n return '';\n }\n\n if (isObject(value)) {\n value = JSON.stringify(value);\n }\n\n return (\n \n {value}\n \n );\n};\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/render/enumRender.tsx",
"content": "import React, { ReactNode } from 'react';\n\nexport default function enumRender(cellData: any, column: { \n enumData?: { value: any; text?: ReactNode; color?: string }[]; \n enumBadgeType?: string; \n}) {\n if (!cellData && cellData !== 0) {\n return '';\n }\n\n const { enumData, enumBadgeType } = column;\n if (!enumData || !Array.isArray(enumData) || enumData.length === 0) {\n return cellData;\n }\n\n const found = enumData.find((item) => {\n return item.value === cellData;\n });\n\n let color = 'black';\n let theme = 'background';\n\n if (!found) {\n return cellData;\n }\n\n if (found.color) {\n color = found.color;\n if (enumBadgeType) {\n theme = enumBadgeType;\n }\n let className = `deep-table-badge deep-table-badge-${theme}-${color}`;\n return {found.text} \n }\n\n return found.text;\n};\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/render/errorRender.tsx",
"content": "import defaultRender from './defaultRender';\n\nexport default function errorRender() {\n return defaultRender('数据格式不合法', 'error-cell');\n}\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/render/fileRender.tsx",
"content": "import React from 'react';\n\nexport default function fileRender(value: {name?: string; url?: string}[]) {\n if (!value) {\n return '';\n }\n if (!value.length || !value.splice) {\n return 数据格式不合规，请返回数组形式！
\n }\n return value.map(file => {\n return (\n \n {file.name}\n \n )\n })\n};\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/render/imageRender.tsx",
"content": "import React, { MouseEvent } from 'react';\n\ninterface IImageRenderColumn {\n imageProps?: React.CSSProperties & { onClick?(e: MouseEvent, column: IImageRenderColumn, rowData: any): void };\n imageWrapProps?: React.CSSProperties;\n}\n\nexport default function ImageRender(value: string, column: IImageRenderColumn, rowData: any) {\n if (!value || typeof value !== 'string') {\n return 数据格式不合规，请返回字符串形式！
\n }\n const imageProps = column.imageProps || {\n width: 80,\n height: 80,\n borderRadius: 4\n }\n const imageWrapProps = column.imageWrapProps || {\n display: 'inline-block',\n padding: 4,\n background: '#eee',\n borderRadius: 4,\n height: 88,\n width: 88\n }\n const { onClick, width } = imageProps\n const renderImageProps = {\n src: value,\n width: width,\n style: { ...imageProps },\n onClick: (e: MouseEvent) => {\n if (onClick && typeof onClick === 'function') {\n onClick(e, column, rowData)\n e.stopPropagation()\n }\n }\n };\n\n return (\n \n \n )\n};\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/render/linkRender.tsx",
"content": "import React from 'react';\nimport { Button } from '@alifd/next'\nimport { ButtonProps } from '@alifd/next/types/button';\n\nexport default function linkRender(value?: { title?: string; href?: string } | string, column?: any, rowData?: any, onClick?: () => void) {\n if (value === undefined || value === null) {\n return '';\n }\n let renderProps: ButtonProps = {\n text: true,\n type: 'primary',\n className: `deep-table-link-button`,\n title: typeof value == 'object' ? value.title : value,\n style: { ...(rowData.style || {}) },\n onClick: () => {\n onClick && typeof onClick === 'function' && onClick();\n if (typeof value === 'object' && value.href) {\n location.href = value.href;\n } else if (typeof value == 'string') {\n location.href = value;\n }\n }\n }\n return (\n {typeof value == 'object' ? value.title : value} \n );\n};\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/render/moneyRangeRender.tsx",
"content": "import errorRender from './errorRender';\nimport defaultRender from './defaultRender';\nimport Formatter from '../formatter';\n\nexport default function moneyRangeRender(cellData: {\n lower?: string;\n upper?: string;\n currency?: string;\n}) {\n if (!cellData) {\n return '';\n }\n\n if (Object.prototype.toString.call(cellData) === '[object Object]') {\n if (!cellData.hasOwnProperty('lower') || !cellData.hasOwnProperty('upper')) {\n return errorRender();\n }\n\n let lower;\n let upper;\n try {\n lower = Formatter.money(cellData.lower || '0', ',', 2);\n upper = Formatter.money(cellData.upper || '0', ',', 2);\n } catch (e) {\n return errorRender();\n }\n\n return defaultRender(`${lower} ${cellData.currency || ''} ~ ${upper} ${cellData.currency || ''}`);\n }\n return errorRender();\n};\n\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/render/moneyRender.tsx",
"content": "import errorRender from './errorRender';\nimport defaultRender from './defaultRender';\nimport Formatter from '../formatter';\n\nexport default function moneyRender(cellData: {\n amount: string;\n currency: string;\n} | string) {\n if (cellData === undefined || cellData === null) {\n return '';\n }\n\n let money;\n if (typeof cellData === 'object') {\n if (!cellData.hasOwnProperty('amount') || !cellData.hasOwnProperty('currency')) {\n return errorRender();\n }\n try {\n money = Formatter.money(cellData.amount || '0', ',', 2);\n } catch (e) {\n return errorRender();\n }\n return defaultRender(`${money} ${cellData.currency}`);\n }\n\n try {\n money = Formatter.money(cellData || '0', ',', 2);\n } catch (e) {\n return errorRender();\n }\n\n return defaultRender(money);\n};\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/render/timestampRender.tsx",
"content": "import errorRender from './errorRender';\nimport defaultRender from './defaultRender';\nimport Formatter from '../formatter';\n\nexport default function timestampRender(cellData: string, item: { timeFormatter?: string }) {\n if (!cellData) {\n return '';\n }\n\n if (isNaN(Number(cellData))) {\n return errorRender();\n }\n\n const { timeFormatter } = item;\n const result = Formatter.date(cellData, timeFormatter);\n return defaultRender(result);\n}"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/render/titleMessageRender.tsx",
"content": "import { Balloon, Icon } from '@alifd/next';\nimport React, { ReactNode } from 'react';\nexport default function titleMessageRender(title: ReactNode, message: ReactNode, prefix?: string) {\n if (!message) {\n return title;\n } else {\n return \n {title}\n \n }\n}"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/runColumnActionCallback.ts",
"content": "import { IActionColumnItem } from \"../component/webNextTableActionCell\";\nimport getCleanRowData from \"./getCleanRowData\";\n\nexport default function runColumnActionCallback(param: { action: IActionColumnItem; rowData: any; index?: number }) {\n const { action, rowData, index } = param;\n const { callback = () => { } } = action;\n\n try {\n if (rowData && callback) {\n return Promise.resolve(callback(getCleanRowData(rowData), action, index));\n }\n } catch (e) {\n if (e instanceof Error) {\n console.warn(e.stack);\n }\n }\n\n return Promise.reject();\n};\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/runToolbarActionCallback.ts",
"content": "import { IAction } from \"../component/webToolbar\";\n\nexport default function runToolbarActionCallback(param: { action: IAction }) {\n const { action } = param;\n const { callback } = action;\n\n try {\n return callback && callback(action);\n } catch (e) {\n if (e instanceof Error) {\n console.warn(e.stack);\n }\n }\n};\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-table/utils/tableProps.ts",
"content": "import type { IWebTableProps } from \"../table/webTable\";\n\nexport function fetchKey(source: T, keyList: Array): Partial {\n const result: Partial = {};\n\n keyList.forEach((k) => {\n const v = source[k];\n\n if (typeof v !== \"undefined\") {\n result[k] = v;\n }\n });\n\n return result;\n}\n\nexport const tableProps: Array = [\n 'clsPrefix',\n 'loading',\n 'device',\n 'locale',\n 'data',\n 'children',\n 'size',\n 'hasBorder',\n 'isZebra',\n 'noPadding',\n\n 'useVirtual',\n 'dataSource',\n 'onLoadData',\n 'onFetchData',\n 'columns',\n 'openRowKeys',\n 'onFilter',\n\n 'actionBar',\n 'isPagination',\n 'pagination',\n 'actionColumn',\n 'showMiniPager',\n 'sort',\n 'sortIcons',\n 'onColumnsChange',\n\n 'primaryKey', 'theme', 'hasHeader', 'fixedHeader', 'maxBodyHeight', 'stickyHeader', 'isTree', 'indent',\n 'onRowClick', 'onRowMouseEnter', 'onRowMouseLeave', 'onResizeChange', 'width', 'height', 'loadingComponent',\n 'hasExpandedRowCtrl', 'expandedRowRender', 'onRowOpen', 'expandedRowIndent',\n 'showRowSelector', 'onSelect', 'onSelectAll', 'isRowSelectorDisabled', 'rowSelector',\n 'actionHidden',\n 'actionColumn',\n 'actionTitle',\n 'actionType',\n 'actionFixed',\n 'actionWidth',\n 'maxWebShownActionCount',\n 'rowSelection',\n 'cellProps',\n 'rowProps',\n 'offsetTop',\n\n\n 'showActionBar',\n 'actionBar',\n 'showSearch',\n 'showCustomColumn',\n 'searchBarPlaceholder',\n 'showLinkBar',\n 'linkBar',\n \"rowOrder\",\n \"customBarItem\",\n 'onCellDataChange',\n 'expandedIndexSimulate',\n 'onEditRow',\n 'onSaveRow',\n 'onResetRow',\n 'setEmptyContent',\n 'emptyContent'\n];\n\nexport const paginationProps = [\n 'size',\n 'type',\n 'shape',\n 'pageShowCount',\n 'pageSize',\n 'pageSizeSelector',\n 'pageSizeList',\n 'pageNumberRender',\n 'pageSizePosition',\n 'useFloatLayout',\n 'hideOnlyOnePage',\n 'showJump',\n 'link',\n 'popupProps',\n 'paginationPosition',\n];\n\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-text/index.scss",
"content": "$css-prefix: '.next-';\n\n:root {\n --s-base: 4px;\n --s-compact: calc(var(--s-base) * 50);\n --s-comfortable: calc(var(--s-base) * 80);\n --s-luxury: calc(var(--s-base) * 160);\n --s-1: 4px;\n --s-2: 8px;\n --s-3: 12px;\n --s-4: 16px;\n --s-5: 20px;\n --s-6: 24px;\n --s-7: 28px;\n --s-8: 32px;\n --s-9: 36px;\n --s-10: 40px;\n\n /* font */\n --font-family: Roboto, 'Helvetica Neue', Helvetica, Tahoma, Arial, 'PingFang SC',\n 'Microsoft YaHei';\n --p-h1-font-size: 56px;\n --p-h1-icon-size: 56px;\n --p-h1-font-weight: 900;\n --p-h1-line-height: 64px;\n --p-h1-margin-top: var(--s-9);\n --p-h1-margin-bottom: var(--s-1);\n\n --p-h2-font-size: 48px;\n --p-h2-icon-size: 48px;\n --p-h2-font-weight: 800;\n --p-h2-line-height: 52px;\n --p-h2-margin-top: var(--s-8);\n --p-h2-margin-bottom: var(--s-1);\n\n --p-h3-font-size: 36px;\n --p-h3-icon-size: 36px;\n --p-h3-font-weight: 700;\n --p-h3-line-height: 44px;\n --p-h3-margin-top: var(--s-7);\n --p-h3-margin-bottom: var(--s-1);\n\n --p-h4-font-size: 24px;\n --p-h4-icon-size: 24px;\n --p-h4-font-weight: 600;\n --p-h4-line-height: 32px;\n --p-h4-margin-top: var(--s-5);\n --p-h4-margin-bottom: var(--s-2);\n\n --p-h5-font-size: 20px;\n --p-h5-icon-size: 20px;\n --p-h5-font-weight: 500;\n --p-h5-line-height: 28px;\n --p-h5-margin-top: var(--s-4); // 上下不一定相等\n --p-h5-margin-bottom: var(--s-1);\n\n /* large */\n --p-h6-font-size: 16px;\n --p-h6-icon-size: 16px;\n --p-h6-font-weight: 400;\n --p-h6-line-height: 24px;\n --p-h6-margin-top: var(--s-4);\n --p-h6-margin-bottom: var(--s-1);\n\n --p-body1-font-size: 16px;\n --p-body1-icon-size: 16px;\n --p-body1-font-weight: 400;\n --p-body1-line-height: 24px;\n --p-body1-margin-top: var(--s-3);\n --p-body1-margin-bottom: var(--s-1);\n --p-body1-indent-size: var(--s-2);\n\n /* medium */\n --p-body2-font-size: 14px;\n --p-body2-icon-size: 14px;\n --p-body2-font-weight: 400;\n --p-body2-line-height: 22px;\n --p-body2-margin-top: var(--s-2);\n --p-body2-margin-bottom: var(--s-1);\n --p-body2-indent-size: var(--s-2);\n\n /* small */\n --p-caption-font-size: 12px;\n --p-caption-icon-size: 12px;\n --p-caption-font-weight: 300;\n --p-caption-line-height: 20px;\n --p-caption-margin-top: var(--s-3);\n --p-caption-margin-bottom: var(--s-1);\n --p-caption-indent-size: var(--s-1);\n\n --p-overline-font-size: 10px;\n --p-overline-icon-size: 10px;\n --p-overline-font-weight: 200;\n --p-overline-line-height: 18px;\n --p-overline-margin-top: var(--s-1);\n --p-overline-margin-bottom: var(--s-1);\n}\n\nbody {\n --p-h1-margin-top: var(--s-1);\n --p-h2-margin-top: var(--s-1);\n --p-h3-margin-top: var(--s-1);\n --p-h4-margin-top: var(--s-1);\n --p-h5-margin-top: var(--s-1);\n --p-h6-margin-top: var(--s-1);\n --p-body1-margin-top: var(--s-1);\n --p-body2-margin-top: var(--s-1);\n --p-caption-margin-top: var(--s-1);\n}\n#{$css-prefix}text {\n color: #1f2633;\n text-align: justify;\n\n // & + & {\n // margin-left: 0;\n // }\n\n &-title {\n font-weight: bold;\n margin-bottom: 0.5em;\n }\n\n & + &-title {\n margin-top: 1.2em;\n }\n\n &-paragraph {\n color: #1f2633;\n margin-bottom: 1em;\n font-size: 14px;\n line-height: 1.5;\n }\n\n mark {\n padding: 0;\n background: #fffbc7;\n color: #1f2633;\n }\n\n strong {\n font-weight: bold;\n }\n\n code {\n background-color: #f4f6f9;\n color: #1f2633;\n border: 1px solid #e4e8ee;\n margin: 0 0.2em;\n padding: 0.2em 0.4em 0.1em;\n font-size: 85%;\n border-radius: 4px;\n }\n\n ul,\n ol {\n margin: 0 0 1em 0;\n padding: 0;\n }\n\n li {\n list-style-type: circle;\n margin: 0 0 0 20px;\n padding: 0 0 0 4px;\n }\n\n a {\n text-decoration: none;\n &:link {\n color: rgba(3, 193, 253, 1);\n }\n &:visited {\n color: rgba(0, 123, 176, 1);\n }\n &:hover {\n color: rgba(0, 157, 214, 1);\n }\n &:active {\n text-decoration: underline;\n color: rgba(0, 157, 214, 1);\n }\n }\n}\n\nh1#{$css-prefix}text-title {\n font-size: 24px;\n}\n\nh2#{$css-prefix}text-title {\n font-size: 20px;\n}\n\nh3#{$css-prefix}text-title {\n font-size: 16px;\n}\n\nh4#{$css-prefix}text-title {\n font-size: 16px;\n}\n\nh5#{$css-prefix}text-title {\n font-size: 14px;\n}\n\nh6#{$css-prefix}text-title {\n font-size: 14px;\n}\n#{$css-prefix}text {\n &-inherit {\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n &-overline {\n font-family: var(--p-overline-font-family);\n font-size: var(--p-overline-font-size);\n font-weight: var(--p-overline-font-weight);\n line-height: var(--p-overline-line-height);\n }\n\n &-caption {\n font-family: var(--p-caption-font-family);\n font-size: var(--p-caption-font-size);\n font-weight: var(--p-caption-font-weight);\n line-height: var(--p-caption-line-height);\n }\n\n &-body2 {\n font-family: var(--p-body2-font-family);\n font-size: var(--p-body2-font-size);\n font-weight: var(--p-body2-font-weight);\n line-height: var(--p-body2-line-height);\n }\n\n &-body1 {\n font-family: var(--p-body1-font-family);\n font-size: var(--p-body1-font-size);\n font-weight: var(--p-body1-font-weight);\n line-height: var(--p-body1-line-height);\n }\n\n &-h6 {\n font-family: var(--p-h6-font-family);\n font-size: var(--p-h6-font-size);\n font-weight: var(--p-h6-font-weight);\n line-height: var(--p-h6-line-height);\n }\n\n &-h5 {\n font-family: var(--p-h5-font-family);\n font-size: var(--p-h5-font-size);\n font-weight: var(--p-h5-font-weight);\n line-height: var(--p-h5-line-height);\n }\n\n &-h4 {\n font-family: var(--p-h4-font-family);\n font-size: var(--p-h4-font-size);\n font-weight: var(--p-h4-font-weight);\n line-height: var(--p-h4-line-height);\n }\n\n &-h3 {\n font-family: var(--p-h3-font-family);\n font-size: var(--p-h3-font-size);\n font-weight: var(--p-h3-font-weight);\n line-height: var(--p-h3-line-height);\n }\n\n &-h2 {\n font-family: var(--p-h2-font-family);\n font-size: var(--p-h2-font-size);\n font-weight: var(--p-h2-font-weight);\n line-height: var(--p-h2-line-height);\n }\n\n &-h1 {\n font-family: var(--p-h1-font-family);\n font-size: var(--p-h1-font-size);\n font-weight: var(--p-h1-font-weight);\n line-height: var(--p-h1-line-height);\n }\n}\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/next-text/index.tsx",
"content": "import * as React from 'react';\nimport classNames from 'classnames';\n\nexport const createTitle = (Tag) => {\n /**\n * Typography.Title\n * @description 分为 H1, H2, H3, H4, H5, H6 不同的组件，表示不同层级，继承 Typography.Text API\n * @order 1\n */\n class Title extends React.Component {\n static defaultProps = {\n prefix: 'next-',\n };\n\n render() {\n const { prefix, className, ...others } = this.props;\n return (\n = (props, ref) => {\n const {\n prefix,\n className,\n type,\n component = 'span',\n strong,\n underline,\n delete: deleteProp,\n code,\n mark,\n ...others\n } = props;\n\n let { children } = props;\n const newType = textTypeMap[type] || type;\n\n const cls = classNames(className, {\n [`${prefix}text`]: true,\n [`${prefix}text-${newType}`]: newType,\n });\n\n if (typeof children === 'string' && children.indexOf('\\n') !== -1) {\n const childrenList = children.split('\\n');\n const newChildren: any = [];\n childrenList.forEach((child) => {\n newChildren.push(child);\n newChildren.push({children} ;\n }\n\n if (underline) {\n children = {children} ;\n }\n\n if (deleteProp) {\n children = {children};\n }\n\n if (code) {\n children = {children};\n }\n\n if (mark) {\n children = {children} ;\n }\n\n return (\n \n {children}\n \n );\n};\n\nconst RefText = React.forwardRef(Text);\n\nRefText.defaultProps = {\n prefix: 'next-',\n};\n\nconst Paragraph: React.FC = (props) => {\n const { prefix, className, component, ...others } = props;\n\n const cls = classNames(`${prefix}text-paragraph`, className);\n\n if (!isProduction()) {\n console.warn('Warning: Text.Paragraph is deprecated, use P instead');\n }\n return = (props, ref) => {\n const el = document.createElement('div');\n let innerRef = null;\n el.className = rootClass;\n el.id = props.id;\n el.ref = ref;\n\n const _renderLayer = function() {\n const { note } = props;\n const defaultTrigger = N
;\n const node = (\n \n {note}\n \n );\n ReactDom.render(node, el);\n };\n\n useEffect(() => {\n _renderLayer();\n if (innerRef) {\n const refDom = ReactDom.findDOMNode(innerRef);\n if (refDom.className.indexOf(targetClass) === -1) {\n if (getStyle(refDom, 'position') === 'static') {\n refDom.style.position = 'relative'; // 当target目标组件的position为static时, 则使用relative, 方便内层元素定位\n }\n refDom.className += ` ${targetClass}`;\n refDom.appendChild(el);\n }\n }\n });\n const { children } = props;\n const _children = React.Children.map(children, (child) => {\n let c = child;\n if (typeof child === 'string') c = {child} ;\n return React.cloneElement(c, { ref: (ref) => (innerRef = ref) });\n });\n return _children || <>;\n};\n\nconst RefNoteWrapper = React.forwardRef(NoteWrapper);\n\nRefNoteWrapper.displayName = 'Wrapper';\n\nexport default RefNoteWrapper;\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/rich-text/index.tsx",
"content": "import * as React from 'react';\n\n// 新结构\ninterface IContent {\n aone?: {\n // 可能未绑定\n url: string;\n priorityId: string;\n project: { id: string; name: string };\n creator: { empId: string; name: string };\n assigner: { empId: string; name: string };\n };\n subject: string;\n description: string;\n hideTitle?: boolean;\n id?: string;\n}\ninterface IRichTextProps {\n content?: IContent | string;\n className?: string;\n maxHeight?: string;\n}\n\n/**\n * 文字 字体、大小、行高\n * @param props\n */\nconst RichText: React.ForwardRefRenderFunction = (props, ref) => {\n const {\n content = { subject: '', description: '' },\n maxHeight = 'auto',\n ...others\n }: IRichTextProps = props;\n const oldType = typeof content === 'string';\n const desc = oldType ? content : content?.description || '';\n const title = (!oldType && content?.subject) || '';\n const hideTitle = oldType || content?.hideTitle;\n return (\n \n {!hideTitle && (\n
\n {title} \n
\n )}\n
\n
- 你可以在这里描述需求 - 或者粘贴需求截图
',\n },\n className: '',\n};\n\nexport default RefRichText;\n"
},
{
"path": "packages/fusion-lowcode-materials/src/components/video/index.tsx",
"content": "import * as React from 'react';\n\nexport interface Props {\n src?: string;\n autoPlay?: boolean; //自动播放必须设置 muted=true\n loop?: boolean;\n muted?: boolean;\n controls?: boolean;\n poster?: string;\n style?: object;\n}\n\n/**\n * 视频\n */\nconst Video: React.ForwardRefRenderFunction = (props, ref) => {\n return (Video);\n\nRefVideo.defaultProps = {\n src: 'https://fusion.alicdn.com/fusion-site-2.0/fusion.mp4',\n};\n\nexport default RefVideo;\n"
},
{
"path": "packages/fusion-lowcode-materials/src/index.scss",
"content": "@import './components/note-wrapper/index.scss';\n@import './components/next-text/index.scss';\n"
},
{
"path": "packages/fusion-lowcode-materials/src/index.tsx",
"content": "import Link from './components/link';\nimport Image from './components/image';\nimport Video from './components/video';\nimport Balloon from './components/balloon';\nimport Calendar from './components/calendar';\nimport RichText from './components/rich-text';\nimport NextText from './components/next-text';\nimport NoteWrapper from './components/note-wrapper';\nimport NextTable from './components/next-table';\nimport Div from './components/div';\n\nexport {\n Affix,\n Animate,\n Badge,\n Breadcrumb,\n Button,\n Calendar2,\n Card,\n Cascader,\n CascaderSelect,\n Checkbox,\n Collapse,\n ConfigProvider,\n DatePicker,\n Dialog,\n Drawer,\n Dropdown,\n Form,\n Grid,\n Icon,\n Input,\n Loading,\n Menu,\n MenuButton,\n Message,\n Nav,\n Notification,\n NumberPicker,\n Overlay,\n Pagination,\n Paragraph,\n Progress,\n Radio,\n Range,\n Rating,\n Search,\n Select,\n Slider,\n SplitButton,\n Step,\n Switch,\n Tab,\n Table,\n Tag,\n TimePicker,\n TimePicker2,\n Timeline,\n Transfer,\n Tree,\n TreeSelect,\n Upload,\n VirtualList,\n Typography,\n Field,\n Divider,\n Avatar,\n ResponsiveGrid,\n Box,\n List,\n DatePicker2,\n} from '@alifd/next';\n\nexport { Link, Image, Video, RichText, NextText, NoteWrapper, Calendar, Balloon, NextTable, Div };"
},
{
"path": "packages/fusion-lowcode-materials/src/utils.js",
"content": "module.exports = {\n replacer(key, value) {\n if (typeof value === 'function') {\n return {\n type: 'JSFunction',\n value: String(value),\n };\n }\n return value;\n },\n isAsyncFunction: (fn) => {\n return fn[Symbol.toStringTag] === 'AsyncFunction';\n },\n reviewer(key, value) {\n if (!value) {\n return value;\n }\n if (key === 'icon') {\n if (typeof value === 'object') {\n return {\n type: 'smile',\n size: 'small',\n };\n }\n }\n if (typeof value === 'object') {\n if (value.type === 'JSFunction') {\n let _value = value.value && value.value.trim();\n let template = `\n return function lowcode() {\n const self = this;\n try {\n return (${_value}).apply(self, arguments);\n } catch(e) {\n console.log('call function which parsed by lowcode for key ${key} failed: ', e);\n return e.message;\n }\n };`;\n try {\n return Function(template)();\n } catch (e) {\n if (e && e.message.includes(\"Unexpected token '{'\")) {\n console.log('method need add funtion prefix');\n _value = 'function ' + _value;\n template = `\n return function lowcode() {\n const self = this;\n try {\n return (${_value}).apply(self, arguments);\n } catch(e) {\n console.log('call function which parsed by lowcode for key ${key} failed: ', e);\n return e.message;\n }\n };`;\n return Function(template)();\n }\n console.error('parse lowcode function error: ', e);\n console.error(value);\n return value;\n }\n }\n }\n return value;\n },\n toJson(object, replacer) {\n return JSON.stringify(object, replacer || this.replacer, 2);\n },\n parseJson(json) {\n const input = typeof json === 'string' ? json : JSON.stringify(json);\n return JSON.parse(input, this.reviewer);\n },\n calculateDependencies(schema, componentsMap) {\n function findComps(schema, componentsMap, dependencies) {\n dependencies = dependencies || {};\n if (dependencies[schema.componentName]) {\n dependencies[schema.componentName].count++;\n } else {\n dependencies[schema.componentName] = {\n count: 1,\n };\n if (componentsMap && componentsMap[schema.componentName]) {\n dependencies[schema.componentName].npm = componentsMap[schema.componentName].package;\n dependencies[schema.componentName].version = componentsMap[schema.componentName].version;\n }\n }\n if (schema.children && Array.isArray(schema.children)) {\n schema.children.forEach((child) => {\n dependencies = Object.assign(dependencies, findComps(child, componentsMap, dependencies));\n });\n }\n return dependencies;\n }\n const comps = findComps(schema, componentsMap);\n const deps = {};\n Object.keys(comps).forEach((key) => {\n const comp = comps[key];\n if (!comp.npm) comp.npm = 'BuiltIn';\n if (deps[`${comp.npm}${comp.version ? '@' + comp.version : ''}`]) {\n deps[`${comp.npm}${comp.version ? '@' + comp.version : ''}`][key] = comp.count;\n } else {\n deps[`${comp.npm}${comp.version ? '@' + comp.version : ''}`] = {\n [key]: comp.count,\n };\n }\n });\n return deps;\n },\n};\n"
},
{
"path": "packages/fusion-ui/.editorconfig",
"content": "root = true\n\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\nquote_type = single\n\n[*.md]\ntrim_trailing_whitespace = false\n"
},
{
"path": "packages/fusion-ui/.eslintignore",
"content": "node_modules/\nbuild/\ndist/\nlib/\nes/\ndocs/\nplugins/\nbuild*\n**/*.min.js\n**/*-min.js\n**/*.bundle.js\n"
},
{
"path": "packages/fusion-ui/.eslintrc.js",
"content": "module.exports = {\n extends: [\n 'eslint-config-ali/typescript/react',\n 'prettier',\n 'prettier/@typescript-eslint',\n 'prettier/react',\n ],\n rules: {\n '@typescript-eslint/ban-ts-comment': 'off',\n },\n};\n"
},
{
"path": "packages/fusion-ui/.gitignore",
"content": "lowcode_es/\r\nlowcode_lib/\r\n# See https://help.github.com/ignore-files/ for more about ignoring files.\n\n# dependencies\nnode_modules/\n\n# production\nbuild/\ndist/\ntmp/\nlib/\nes/\n\n# misc\n.idea/\n.happypack\n.DS_Store\n*.swp\n*.dia~\n.tmp\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\nyarn.lock\n\nstorybook-static/\n\ndocs/src/.umi/"
},
{
"path": "packages/fusion-ui/.markdownlint.json",
"content": "{\n \"extends\": \"markdownlint-config-ali\"\n}\n"
},
{
"path": "packages/fusion-ui/.markdownlintignore",
"content": "node_modules/\nbuild/\ndist/\n\n"
},
{
"path": "packages/fusion-ui/.prettierrc.js",
"content": "module.exports = {\n printWidth: 100,\n tabWidth: 2,\n semi: true,\n singleQuote: true,\n trailingComma: 'all',\n arrowParens: 'always',\n};\n"
},
{
"path": "packages/fusion-ui/.stylelintignore",
"content": "node_modules/\nbuild/\ndist/\nes/\nlib/\ndocs/\n**/*.min.css\n**/*-min.css\n**/*.bundle.css\n\n"
},
{
"path": "packages/fusion-ui/.stylelintrc.js",
"content": "module.exports = {\n extends: 'stylelint-config-ali',\n};\n"
},
{
"path": "packages/fusion-ui/README.md",
"content": "# README\n\n## 开发常用命令\n\n- `cnpm start` 运行所有组件的开发调试环境\n- `cnpm start page-header` 运行单个组件的开发调试环境\n- `cnpm run lowcode:dev` 启动低代码开发调试环境\n- `cnpm run lowcode:build` 构建低代码产物\n- `cnpm run build` 打包生成 lib/ es/ dist/ build/文件\n- `cnpm run materials` 生成物料中心需要的入库 JSON 文件\n- `cnpm run lint` 进行代码检查\n"
},
{
"path": "packages/fusion-ui/build.json",
"content": "{\n \"library\": \"AlifdFusionUi\",\n \"libraryTarget\": \"umd\",\n \"sourceMap\": false,\n \"alias\": {\n \"@\": \"./src\",\n \"@components\": \"./src/components\"\n },\n \"plugins\": [\n [\n \"build-plugin-component\",\n {\n \"themePackage\": \"@alifd/theme-2\"\n }\n ],\n [\n \"build-plugin-fusion\",\n {\n \"uniteBaseComponent\": \"@alifd/next\",\n \"cssVariable\": true,\n \"importOptions\": {\n \"libraryDirectory\": \"lib\"\n }\n }\n ]\n ]\n}\n"
},
{
"path": "packages/fusion-ui/build.lowcode.js",
"content": "const { library } = require('./build.json');\nconst { version, name } = require('./package.json');\n\nmodule.exports = {\n sourceMap: false,\n alias: {\n '@': './src',\n '@alifd/fusion-ui': './src',\n },\n plugins: [\n [\n '@alifd/build-plugin-lowcode',\n {\n noParse: true,\n renderUrls: [\n `https://alifd.alicdn.com/npm/${name}@${version}/dist/${library}.js`,\n `https://alifd.alicdn.com/npm/${name}@${version}/dist/${library}.css`,\n ],\n baseUrl: {\n prod: `https://alifd.alicdn.com/npm/${name}@${version}`,\n daily: `https://alifd.alicdn.com/npm/${name}@${version}`,\n },\n engineScope: '@alilc',\n },\n ],\n [\n 'build-plugin-fusion',\n {\n uniteBaseComponent: '@alifd/next',\n cssVariable: true,\n importOptions: {\n libraryDirectory: 'lib',\n },\n },\n ],\n ],\n};\n"
},
{
"path": "packages/fusion-ui/commitlint.config.js",
"content": "module.exports = {\n extends: ['ali'],\n};\n"
},
{
"path": "packages/fusion-ui/docs/.dumi/theme/builtins/API.tsx",
"content": "import React, { useContext } from 'react';\nimport type { IApiComponentProps } from 'dumi/theme';\nimport { context, useApiData } from 'dumi/theme';\n\nimport './index.scss';\n\nconst LOCALE_TEXTS = {\n 'zh-CN': {\n name: '参数',\n description: '说明',\n type: '类型',\n default: '默认值',\n required: '(必选)',\n },\n 'en-US': {\n name: 'Name',\n description: 'Description',\n type: 'Type',\n default: 'Default',\n required: '(required)',\n },\n};\n\nexport default ({ identifier, export: expt }: IApiComponentProps) => {\n const data = useApiData(identifier);\n const { locale = '' } = useContext(context);\n\n const texts = /^zh|cn$/i.test(locale) ? LOCALE_TEXTS['zh-CN'] : LOCALE_TEXTS['en-US'];\n\n const defaultComponentName = identifier\n ?.replace(/-([a-z])/g, function (all, i) {\n return i.toUpperCase();\n })\n ?.replace(/^\\S/, (s) => s.toUpperCase());\n\n return (\n <>\n {data && (\n <>\n \n \n \n {expt === 'default' ? defaultComponentName : expt}\n \n \n \n \n {texts.name} \n {texts.description} \n {texts.type} \n {texts.default} \n \n \n \n {data[expt]?.map((row) => (\n \n {row.identifier} \n {row.description || '--'} \n \n {row.type}\n \n \n {row.default || (row.required && texts.required) || '--'}\n \n \n ))}\n \n
\n \n )}\n \n );\n};\n"
},
{
"path": "packages/fusion-ui/docs/.dumi/theme/builtins/index.scss",
"content": ".apiContainer {\n border: none !important;\n .apiTitle{\n text-transform: capitalize;\n }\n thead tr {\n th {\n background: #fff;\n border: none;\n font-weight: 700;\n text-align: left;\n word-wrap: break-word;\n letter-spacing: 0.2px;\n padding: 4px 0 10px;\n border-bottom: 2px solid #333;\n font-size: 14px;\n &:first-child {\n padding-left: 8px;\n }\n }\n }\n tbody tr {\n td {\n border: none;\n border-bottom: 1px solid #ccc;\n text-align: left;\n margin: 0;\n padding: 18px 18px 18px 0;\n color: #666;\n word-wrap: break-word;\n line-height: 24px;\n letter-spacing: 0.2px;\n\t\t\tfont-size: 14px;\n code {\n color: #666;\n word-wrap: break-word;\n line-height: 24px;\n letter-spacing: 0.2px;\n\t\t\t\tfont-size: 13px;\n }\n\t\t\t&:last-child {\n min-width: 72px;\n }\n\t\t\t&:first-child{\n\t\t\t\tcolor: #595959;\n\t\t\t\tfont-weight: 600;\n\t\t\t\twhite-space: nowrap;\n\t\t\t\tpadding-left: 8px;\n\t\t\t\tfont-size: 14px;\n\t\t\t}\n }\n }\n}\n\n.__dumi-default-layout-footer-meta {\n border: none;\n}\n"
},
{
"path": "packages/fusion-ui/docs/.dumi/theme/layout.tsx",
"content": "import React from 'react';\nimport Layout from 'dumi-theme-default/es/layout';\n\nimport '@/index.scss';\nimport '@alifd/theme-2/dist/next.min.css';\n\nexport default ({ children, ...props }) => {\n return {children} ;\n};\n"
},
{
"path": "packages/fusion-ui/docs/.fatherrc.ts",
"content": "export default {\n esm: 'rollup',\n sassInRollupMode: {},\n\tsass: {\n // 默认值 Dart Sass，如果要改用 Node Sass，可安装 node-sass 依赖，然后使用该配置项\n implementation: require('node-sass'),\n // 传递给 Dart Sass 或 Node Sass 的配置项，可以是一个 Function\n sassOptions: {\n \n },\n },\n}"
},
{
"path": "packages/fusion-ui/docs/.umirc.ts",
"content": "import { defineConfig } from 'dumi';\nimport fs from 'fs';\nimport { join } from 'path';\n\nconst { version } = JSON.parse(fs.readFileSync(join(__dirname, '../package.json'), 'utf8'));\n\nconst productStyles =\n '.__dumi-default-menu{display:none} .__dumi-default-layout{padding-left:58px!important}';\n\nconst productPath = `/@alifd/fusion-ui@${version}/build/docs/`;\n\nexport default defineConfig({\n // other config entry\n chainWebpack(memo) {\n memo.module\n .rule('js')\n .include.add(join(__dirname, '../'))\n .end()\n .exclude.add(/node_modules/);\n\n // 删除 dumi 内置插件\n memo.plugins.delete('friendly-error');\n memo.plugins.delete('copy');\n // 配置文件import alias\n memo.resolve.alias.set('@', join(__dirname, '../src'));\n memo.resolve.alias.set('@components', join(__dirname, '../src/components'));\n memo.resolve.alias.set('@alifd/fusion-ui', join(__dirname, '../src'));\n },\n logo: 'https://fusion.alicdn.com/images/jdSvK6gaqaWB.png',\n exportStatic: process.env.NODE_ENV === 'production' ? { htmlSuffix: true } : {},\n base: process.env.NODE_ENV === 'production' ? productPath : '/',\n publicPath: process.env.NODE_ENV === 'production' ? productPath : '/',\n styles: process.env.NODE_ENV === 'production' ? [productStyles] : [],\n nodeModulesTransform: {\n type: 'none',\n exclude: [],\n },\n // md文件中使用@需配置alias\n alias: {\n '@': join(__dirname, '../src'),\n '@components': join(__dirname, '../src/components'),\n '@alifd/fusion-ui': join(__dirname, '../src'),\n },\n apiParser: {\n propFilter: (prop) => {\n if (prop.declarations !== undefined && prop.declarations.length > 0) {\n const hasPropAdditionalDescription = prop.declarations.find((declaration) => {\n if (declaration.fileName.includes('node_modules')) {\n return (\n declaration.fileName.includes('alifd/next') ||\n declaration.fileName.includes('bizcharts')\n );\n }\n return true;\n });\n\n return Boolean(hasPropAdditionalDescription);\n }\n return true;\n },\n },\n mfsu: {},\n locales: [\n ['zh-CN', '中文'],\n ['en-US', 'English'],\n ],\n outputPath: '../build/docs',\n});\n"
},
{
"path": "packages/fusion-ui/docs/src/BarChart/index.md",
"content": "## 何时使用\n\nBarChart 的基础用法。\n\n## 示例\n\n```tsx\nimport React from 'react';\n\nimport { BarChart } from '@alifd/fusion-ui';\n\nconst props = {\n data: [\n { year: '1991', value: 72345678 },\n { year: '1992', value: 4321132 },\n { year: '1993', value: 33121112.5 },\n { year: '1994', value: 45227221 },\n { year: '1995', value: 4321221.9 },\n { year: '1996', value: 6322121 },\n { year: '1997', value: 78312213 },\n { year: '1998', value: 4192312 },\n { year: '1999', value: 6212332 },\n { year: '2000', value: 3192312 },\n ],\n xField: 'value',\n yField: 'year',\n color: '#0079f2',\n label: {\n visible: true,\n position: 'middle',\n },\n};\n\nexport default () => {\n return (\n \n basic demo\n
\n );\n};\n```\n\n## API\n\n\n basic demo\n
\n );\n};\n```\n\n## API\n\n\n
\n );\n};\n```\n\n### 显示百分比\n\n```tsx\nimport React from 'react';\nimport { DonutChart } from '@alifd/fusion-ui';\n\nconst props = {\n legend: {\n position: 'top-left',\n },\n data: [\n { year: '1991', value: 72345678 },\n { year: '1992', value: 4321132 },\n { year: '1993', value: 33121112.5 },\n { year: '1994', value: 45227221 },\n { year: '1995', value: 4321221.9 },\n { year: '1996', value: 6322121 },\n { year: '1997', value: 78312213 },\n { year: '1998', value: 2192312 },\n { year: '1999', value: 6212332 },\n { year: '2000', value: 1192312 },\n ],\n angleField: 'value',\n colorField: 'year',\n color: ['#3BCBD1', '#47A4FE', '#EDBA42', '#F4704E', '#ED6899', '#7F62C3', '#6E7BC9'],\n};\n\nexport default () => {\n return (\n \n
\n );\n};\n```\n\n## API\n\n\n
\n );\n};\n"
},
{
"path": "packages/fusion-ui/docs/src/ExpandTable/index.md",
"content": "## 何时使用\n\nExpandTable 的基础用法，演示自己控制数据的用法。code 试一下能不能用\n\n## 示例\n\n\n
\n );\n};\n"
},
{
"path": "packages/fusion-ui/docs/src/Filter/index.md",
"content": "## 何时使用\n\nFilter 的基础用法，演示自己控制数据的用法。code 试一下能不能用\n\n## 示例\n\n\n \n \n \n \n
\n );\n};\n"
},
{
"path": "packages/fusion-ui/docs/src/LineChart/basic.tsx",
"content": "import React from 'react';\n\nimport { LineChart } from '@alifd/fusion-ui';\n\nconst props = {\n data: [\n { year: '1991', value: 72345678 },\n { year: '1992', value: 4321132 },\n { year: '1993', value: 33121112.5 },\n { year: '1994', value: 45227221 },\n { year: '1995', value: 4321221.9 },\n { year: '1996', value: 6322121 },\n { year: '1997', value: 78312213 },\n { year: '1998', value: 4192312 },\n { year: '1999', value: 6212332 },\n { year: '2000', value: 3192312 },\n ],\n xField: 'year',\n yField: 'value',\n color: '#0079f2',\n label: {\n visible: true,\n },\n};\n\nexport default () => {\n return (\n \n
\n );\n};\n"
},
{
"path": "packages/fusion-ui/docs/src/LineChart/index.md",
"content": "## 何时使用\n\nLineChart 的基础用法。\n\n## 示例\n\n### 基础用法\n\n\n
\n );\n};\n"
},
{
"path": "packages/fusion-ui/docs/src/PageHeader/basic.tsx",
"content": "import React from 'react';\nimport { PageHeader } from '@alifd/fusion-ui';\n\nexport default () => {\n return (\n \n 1 \n 2 \n 3 \n \n }\n subTitle=\"This is a subtitle\"\n />\n );\n};\n"
},
{
"path": "packages/fusion-ui/docs/src/PageHeader/index.md",
"content": "## 何时使用\n\nPageHeader 的基础用法，演示自己控制数据的用法。code 试一下能不能用\n\n## 示例\n\n### 基础用法\n\n\n
\n 点我\n \n {\n console.log('ok');\n }}\n onCancel={() => {\n console.log('cancel');\n }}\n onClose={() => {\n console.log('close');\n }}\n >\n Start your business here by searching a popular product\n \n Start your business here by searching a popular product \n ));\n return (\n \n
\n 长文本\n \n {\n console.log('ok');\n }}\n onCancel={() => {\n console.log('cancel');\n }}\n onClose={() => {\n console.log('close');\n }}\n >\n {largeContent}\n \n \n
点我 \n
{\n console.log('ok');\n }}\n onCancel={() => {\n console.log('cancel');\n }}\n onClose={() => {\n console.log('close');\n }}\n >\n Start your business here by searching a popular product\n \n \n
自定义按钮,\n { action: 'submit', type: 'primary', content: '提交' },\n ]}\n emptyContent=\"添加表单项\"\n operationConfig={{ align: 'center' }}\n labelAlign=\"top\"\n placeholderStyle={{\n border: 0,\n color: '#0088FF',\n background: '#d8d8d836',\n height: '38px',\n gridArea: 'span 4 / span 4',\n }}\n columns={3}\n placeholder=\"请在右侧面板添加表单项+\"\n labelCol={{ fixedSpan: 4 }}\n >\n \n \n 内容1 \n 内容2 \n 内容3 \n \n
\n );\n};\n"
},
{
"path": "packages/fusion-ui/docs/src/TabContainer/index.md",
"content": "## 何时使用\n\nTabContainer 的基础用法，演示自己控制数据的用法。code试一下能不能用\n\n\n## 示例\n\n### 基本用法\n\n\n basic demo\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n /test/setupTests.js'],\n};\n"
},
{
"path": "packages/fusion-ui/lowcode/anchor/meta.ts",
"content": "import { hideProp } from '../utils';\n\nconst meta = {\n components: [\n {\n componentName: 'Anchor',\n group: '精选组件',\n title: '电梯容器',\n category: '布局容器类',\n docUrl: '',\n screenshot:\n 'https://img.alicdn.com/imgextra/i3/O1CN01aDpmze26zlTZVDhtR_!!6000000007733-2-tps-112-112.png',\n devMode: 'proCode',\n npm: {\n package: '@alifd/fusion-ui',\n version: '1.0.24-5',\n exportName: 'Anchor',\n main: 'lib/index.js',\n destructuring: true,\n subName: '',\n },\n configure: {\n props: [\n {\n title: {\n label: { type: 'i18n', 'en-US': 'dataSource', 'zh-CN': '锚点列表数据源' },\n tip: 'dataSource | 锚点列表数据源',\n },\n name: 'dataSource',\n description: '锚点列表数据源',\n setter: {\n componentName: 'ArraySetter',\n props: {\n itemSetter: {\n componentName: 'ObjectSetter',\n props: {\n config: {\n items: [\n {\n title: { label: { type: 'i18n', 'en-US': 'htmlId', 'zh-CN': 'htmlId' } },\n name: 'htmlId',\n setter: {\n componentName: 'StringSetter',\n isRequired: true,\n initialValue: '',\n },\n },\n {\n title: { label: { type: 'i18n', 'en-US': 'label', 'zh-CN': 'label' } },\n name: 'label',\n setter: {\n componentName: 'StringSetter',\n isRequired: true,\n initialValue: '',\n },\n },\n {\n title: {\n label: { type: 'i18n', 'en-US': 'children', 'zh-CN': 'children' },\n },\n name: 'children',\n setter: {\n componentName: 'ArraySetter',\n props: {\n itemSetter: {\n componentName: 'ObjectSetter',\n props: {},\n isRequired: false,\n initialValue: {},\n },\n },\n initialValue: [],\n },\n },\n ],\n },\n },\n },\n },\n isRequired: true,\n initialValue: [],\n },\n },\n {\n title: {\n label: { type: 'i18n', 'en-US': 'container', 'zh-CN': '容器，默认是 win' },\n tip: 'container | 容器，默认是 window',\n },\n condition: hideProp,\n name: 'container',\n setter: { componentName: 'FunctionSetter', isRequired: false },\n },\n {\n title: {\n label: { type: 'i18n', 'en-US': 'direction', 'zh-CN': '锚点方向' },\n tip: 'direction | 锚点方向',\n },\n name: 'direction',\n defaultValue: 'ver',\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n dataSource: [\n { label: 'ver', value: 'ver' },\n { label: 'hoz', value: 'hoz' },\n ],\n options: [\n { label: 'ver', value: 'ver' },\n { label: 'hoz', value: 'hoz' },\n ],\n },\n initialValue: 'ver',\n },\n },\n {\n title: {\n label: { type: 'i18n', 'en-US': 'hasAffix', 'zh-CN': '固定在顶部' },\n tip: 'hasAffix | direction=\"hoz\" 生效',\n },\n condition: (target) => {\n return target.getProps().getPropValue('direction') === 'hoz';\n },\n name: 'hasAffix',\n setter: { componentName: 'BoolSetter', isRequired: false, initialValue: false },\n },\n {\n title: {\n label: { type: 'i18n', 'en-US': 'affixProps', 'zh-CN': '固钉配置' },\n tip: 'affixProps | hasAffix={true} 后使用',\n },\n condition: (target) => {\n const hasAffix = target.getProps().getPropValue('hasAffix');\n return typeof hasAffix === 'boolean' && hasAffix;\n },\n name: 'affixProps',\n setter: {\n componentName: 'ObjectSetter',\n props: {\n config: {\n items: [\n {\n title: {\n label: { type: 'i18n', 'en-US': 'container', 'zh-CN': 'container' },\n },\n name: 'container',\n setter: { componentName: 'FunctionSetter', isRequired: false },\n },\n {\n title: {\n label: { type: 'i18n', 'en-US': 'offsetTop', 'zh-CN': 'offsetTop' },\n },\n name: 'offsetTop',\n setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 0 },\n },\n {\n title: {\n label: { type: 'i18n', 'en-US': 'offsetBottom', 'zh-CN': 'offsetBottom' },\n },\n name: 'offsetBottom',\n setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 0 },\n },\n {\n title: { label: { type: 'i18n', 'en-US': 'onAffix', 'zh-CN': 'onAffix' } },\n name: 'onAffix',\n setter: { componentName: 'FunctionSetter' },\n },\n {\n title: {\n label: { type: 'i18n', 'en-US': 'useAbsolute', 'zh-CN': 'useAbsolute' },\n },\n name: 'useAbsolute',\n setter: {\n componentName: 'BoolSetter',\n isRequired: false,\n initialValue: false,\n },\n },\n ],\n },\n },\n },\n },\n ],\n supports: { className: true, style: true },\n component: {},\n },\n },\n ],\n};\n\nexport default meta;\n"
},
{
"path": "packages/fusion-ui/lowcode/anchor-form/meta.ts",
"content": "import { IComponentDescription } from '../types';\nimport { hideProp, mockId } from '../utils';\nimport { operationProps } from '../common';\n\nconst AnchorFormMeta: IComponentDescription = {\n componentName: 'AnchorForm',\n title: '电梯表单',\n category: '表单类',\n group: '精选组件',\n docUrl: '',\n screenshot:\n 'https://img.alicdn.com/imgextra/i1/O1CN01jnfLpK1rFJ4nPj9Pt_!!6000000005601-55-tps-56-56.svg',\n devMode: 'proCode',\n npm: {\n package: '@alifd/fusion-ui',\n version: '0.1.6-beta.22',\n exportName: 'AnchorForm',\n main: 'lib/index.js',\n destructuring: true,\n subName: '',\n },\n configure: {\n supports: { className: true, style: true, events: ['onChange'] },\n component: {\n isContainer: true,\n isMinimalRenderUnit: true,\n nestingRule: {\n childWhitelist: ['ChildForm'],\n },\n },\n props: [\n {\n name: 'anchorConfig',\n title: '电梯设置',\n type: 'group',\n display: 'accordion',\n items: [\n {\n name: 'showAnchor',\n title: '电梯显示',\n defaultValue: true,\n setter: 'BoolSetter',\n },\n {\n title: {\n label: { type: 'i18n', 'en-US': 'direction', 'zh-CN': '锚点方向' },\n tip: 'direction | 锚点方向',\n },\n name: 'anchorProps.direction',\n condition: (target) => {\n const showAnchor = target.getProps().getPropValue('showAnchor');\n return typeof showAnchor === 'undefined' || showAnchor;\n },\n defaultValue: 'ver',\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n dataSource: [\n { label: '垂直', value: 'ver' },\n { label: '水平', value: 'hoz' },\n ],\n options: [\n { label: '垂直', value: 'ver' },\n { label: '水平', value: 'hoz' },\n ],\n },\n initialValue: 'ver',\n },\n },\n {\n title: {\n label: { type: 'i18n', 'en-US': 'hasAffix', 'zh-CN': '固定在顶部' },\n tip: 'hasAffix | direction=\"hoz\" 生效',\n },\n condition: (target) => {\n const showAnchor = target.getProps().getPropValue('showAnchor');\n return (\n showAnchor && target.getProps().getPropValue('anchorProps.direction') === 'hoz'\n );\n },\n name: 'anchorProps.hasAffix',\n setter: { componentName: 'BoolSetter', isRequired: false, initialValue: false },\n },\n ],\n },\n {\n title: {\n label: { type: 'i18n', 'en-US': 'container', 'zh-CN': '容器，默认是 win' },\n tip: 'container | 容器，默认是 window',\n },\n condition: hideProp,\n name: 'container',\n setter: { componentName: 'FunctionSetter', isRequired: false },\n },\n {\n title: {\n label: { type: 'i18n', 'en-US': 'affixProps', 'zh-CN': '固钉配置' },\n tip: 'affixProps | hasAffix={true} 后使用',\n },\n condition: (target) => {\n const hasAffix = target.getProps().getPropValue('hasAffix');\n return typeof hasAffix === 'boolean' && hasAffix;\n },\n name: 'affixProps',\n setter: {\n componentName: 'ObjectSetter',\n props: {\n config: {\n items: [\n {\n title: { label: { type: 'i18n', 'en-US': 'container', 'zh-CN': 'container' } },\n name: 'container',\n setter: { componentName: 'FunctionSetter', isRequired: false },\n },\n {\n title: { label: { type: 'i18n', 'en-US': 'offsetTop', 'zh-CN': 'offsetTop' } },\n name: 'offsetTop',\n setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 0 },\n },\n {\n title: {\n label: { type: 'i18n', 'en-US': 'offsetBottom', 'zh-CN': 'offsetBottom' },\n },\n name: 'offsetBottom',\n setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 0 },\n },\n {\n title: { label: { type: 'i18n', 'en-US': 'onAffix', 'zh-CN': 'onAffix' } },\n name: 'onAffix',\n setter: { componentName: 'FunctionSetter' },\n },\n {\n title: {\n label: { type: 'i18n', 'en-US': 'useAbsolute', 'zh-CN': 'useAbsolute' },\n },\n name: 'useAbsolute',\n setter: { componentName: 'BoolSetter', isRequired: false, initialValue: false },\n },\n ],\n },\n },\n },\n },\n ...operationProps,\n {\n title: {\n label: { type: 'i18n', 'en-US': 'onChange', 'zh-CN': '点击不同锚点时的自定' },\n tip: 'onChange | 点击不同锚点时的自定义触发函数',\n },\n condition: hideProp,\n name: 'onChange',\n setter: { componentName: 'FunctionSetter' },\n },\n {\n title: {\n label: { type: 'i18n', 'en-US': 'offsetY', 'zh-CN': '垂直跳转偏移量' },\n tip: 'offsetY | 垂直跳转偏移量',\n },\n condition: hideProp,\n name: 'offsetY',\n defaultValue: 0,\n setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 0 },\n },\n {\n title: {\n label: { type: 'i18n', 'en-US': 'scrollTop', 'zh-CN': '自定义滚动到页首的方' },\n tip: 'scrollTop | 自定义滚动到页首的方法',\n },\n condition: hideProp,\n name: 'scrollTop',\n setter: { componentName: 'FunctionSetter', isRequired: false },\n },\n ],\n },\n};\nconst snippets: Snippet[] = [\n {\n title: '电梯表单',\n screenshot:\n 'https://img.alicdn.com/imgextra/i1/O1CN01jnfLpK1rFJ4nPj9Pt_!!6000000005601-55-tps-56-56.svg',\n schema: {\n componentName: 'AnchorForm',\n props: {\n showAnchor: true,\n anchorProps: {\n direction: 'hoz',\n },\n },\n children: [\n {\n componentName: 'ChildForm',\n props: {\n columns: 2,\n mode: 'independent',\n anchorItemProps: {\n htmlId: mockId(),\n label: 'Tab1',\n },\n cardSectionProps: {\n noBullet: true,\n },\n operationConfig: {},\n labelCol: {\n fixedSpan: 4,\n },\n labelAlign: 'top',\n },\n children: [...new Array(4).keys()].map(() => ({\n componentName: 'FormInput',\n props: {\n formItemProps: {\n primaryKey: mockId(),\n label: '表单项',\n size: 'medium',\n device: 'desktop',\n fullWidth: true,\n },\n placeholder: '请输入',\n },\n })),\n },\n {\n componentName: 'ChildForm',\n props: {\n mode: 'independent',\n anchorItemProps: {\n htmlId: mockId(),\n label: 'Tab2',\n },\n cardSectionProps: {\n noBullet: true,\n },\n columns: 2,\n operationConfig: {},\n labelCol: {\n fixedSpan: 4,\n },\n labelAlign: 'top',\n },\n children: [...new Array(4).keys()].map(() => ({\n componentName: 'FormInput',\n props: {\n formItemProps: {\n primaryKey: mockId(),\n label: '表单项',\n size: 'medium',\n device: 'desktop',\n fullWidth: true,\n },\n placeholder: '请输入',\n },\n })),\n },\n {\n componentName: 'ChildForm',\n props: {\n mode: 'independent',\n anchorItemProps: {\n htmlId: mockId(),\n label: 'Tab3',\n },\n cardSectionProps: {\n noBullet: true,\n },\n columns: 2,\n operationConfig: {},\n labelCol: {\n fixedSpan: 4,\n },\n labelAlign: 'top',\n },\n children: [...new Array(4).keys()].map(() => ({\n componentName: 'FormInput',\n props: {\n formItemProps: {\n primaryKey: mockId(),\n label: '表单项',\n size: 'medium',\n device: 'desktop',\n fullWidth: true,\n },\n placeholder: '请输入',\n },\n })),\n },\n {\n componentName: 'ChildForm',\n props: {\n mode: 'independent',\n anchorItemProps: {\n htmlId: mockId(),\n label: 'Tab4',\n },\n cardSectionProps: {\n noBullet: true,\n },\n columns: 2,\n operationConfig: {},\n labelCol: {\n fixedSpan: 4,\n },\n labelAlign: 'top',\n },\n children: [...new Array(4).keys()].map(() => ({\n componentName: 'FormInput',\n props: {\n formItemProps: {\n primaryKey: mockId(),\n label: '表单项',\n size: 'medium',\n device: 'desktop',\n fullWidth: true,\n },\n placeholder: '请输入',\n },\n })),\n },\n ],\n },\n },\n];\n\nexport default {\n ...AnchorFormMeta,\n snippets,\n};\n"
},
{
"path": "packages/fusion-ui/lowcode/area-chart/meta.ts",
"content": "import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';\nimport { actionConfigure } from '../common/chart-action';\nimport { plotConfigure } from '../common/chart-plot';\n\nconst AreaChartMeta: IPublicTypeComponentMetadata = {\n componentName: 'AreaChart',\n title: '面积图',\n category: '图表',\n group: '精选组件',\n docUrl: '',\n screenshot: '',\n devMode: 'proCode',\n npm: {\n package: '@alifd/fusion-ui',\n version: '0.1.3-beta.3',\n exportName: 'AreaChart',\n main: 'lib/index.js',\n destructuring: true,\n subName: '',\n },\n configure: {\n props: [\n // 数据\n {\n name: 'data',\n type: 'group',\n display: 'accordion',\n title: {\n label: '数据',\n },\n items: [\n {\n name: 'data',\n title: '图表数据',\n setter: 'JsonSetter',\n },\n {\n name: 'xField',\n title: {\n label: 'x轴字段名',\n tip: 'x 方向映射对应的数据字段名',\n },\n setter: 'StringSetter',\n },\n {\n name: 'yField',\n title: {\n label: 'y轴字段名',\n tip: 'y 方向映射所对应的数据字段名',\n },\n setter: 'StringSetter',\n },\n ],\n },\n // 图形属性\n {\n name: '',\n type: 'group',\n display: 'accordion',\n title: {\n label: '图形属性',\n },\n items: [\n {\n name: 'color',\n title: '颜色',\n setter: 'ColorSetter',\n },\n {\n name: 'line.size',\n title: '粗细',\n setter: 'NumberSetter',\n },\n {\n name: 'smooth',\n title: '平滑',\n setter: 'BoolSetter',\n },\n {\n name: 'point.visible',\n title: '显示点',\n setter: 'BoolSetter',\n },\n {\n name: 'label.visible',\n title: '显示标签',\n setter: 'BoolSetter',\n },\n ],\n },\n ...plotConfigure,\n ...actionConfigure,\n ],\n },\n};\nconst snippets: IPublicTypeSnippet[] = [\n {\n title: '面积图',\n screenshot:\n 'https://img.alicdn.com/imgextra/i2/O1CN012P76ko1dqUbwwmuF8_!!6000000003787-55-tps-56-56.svg',\n schema: {\n componentName: 'AreaChart',\n props: {\n data: [\n { year: '1991', value: 72345678 },\n { year: '1992', value: 4321132 },\n { year: '1993', value: 33121112.5 },\n { year: '1994', value: 45227221 },\n { year: '1995', value: 4321221.9 },\n { year: '1996', value: 6322121 },\n { year: '1997', value: 78312213 },\n { year: '1998', value: 4192312 },\n { year: '1999', value: 6212332 },\n { year: '2000', value: 3192312 },\n ],\n xField: 'year',\n yField: 'value',\n color: '#0079f2',\n label: {\n visible: true,\n },\n },\n },\n },\n];\n\nexport default {\n ...AreaChartMeta,\n snippets,\n};\n"
},
{
"path": "packages/fusion-ui/lowcode/bar-chart/meta.ts",
"content": "import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';\nimport { actionConfigure } from '../common/chart-action';\nimport { plotConfigure } from '../common/chart-plot';\n\nconst BarChartMeta: IPublicTypeComponentMetadata = {\n componentName: 'BarChart',\n title: '条形图',\n category: '图表',\n group: '精选组件',\n docUrl: '',\n screenshot: '',\n devMode: 'proCode',\n npm: {\n package: '@alifd/fusion-ui',\n version: '0.1.3-beta.3',\n exportName: 'BarChart',\n main: 'lib/index.js',\n destructuring: true,\n subName: '',\n },\n configure: {\n props: [\n // 数据\n {\n name: 'data',\n type: 'group',\n display: 'accordion',\n title: {\n label: '数据',\n },\n items: [\n {\n name: 'data',\n title: '图表数据',\n setter: 'JsonSetter',\n },\n {\n name: 'xField',\n title: {\n label: 'x轴字段名',\n tip: 'x 方向映射对应的数据字段名',\n },\n setter: 'StringSetter',\n },\n {\n name: 'yField',\n title: {\n label: 'y轴字段名',\n tip: 'y 方向映射所对应的数据字段名',\n },\n setter: 'StringSetter',\n },\n ],\n },\n // 图形属性\n {\n name: '',\n type: 'group',\n display: 'accordion',\n title: {\n label: '图形属性',\n },\n items: [\n {\n name: 'color',\n title: '颜色',\n setter: 'ColorSetter',\n },\n {\n name: 'barSize',\n title: '粗细',\n setter: 'NumberSetter',\n },\n {\n name: 'label',\n type: 'group',\n display: 'accordion',\n title: {\n label: '标签',\n },\n items: [\n {\n name: 'label.visible',\n title: '显示',\n setter: 'BoolSetter',\n },\n {\n name: 'label.position',\n title: '位置',\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: [\n { title: '左', value: 'left' },\n { title: '中', value: 'middle' },\n { title: '右', value: 'right' },\n ],\n },\n },\n condition: (target) => {\n return !!target.getProps().getPropValue('label.visible');\n },\n },\n ],\n },\n ],\n },\n ...plotConfigure,\n ...actionConfigure,\n ],\n },\n};\nconst snippets: IPublicTypeSnippet[] = [\n {\n title: '条形图',\n screenshot:\n 'https://img.alicdn.com/imgextra/i3/O1CN01cOF2841sYpZkxzCsv_!!6000000005779-55-tps-56-56.svg',\n schema: {\n componentName: 'BarChart',\n props: {\n data: [\n { year: '1991', value: 72345678 },\n { year: '1992', value: 4321132 },\n { year: '1993', value: 33121112.5 },\n { year: '1994', value: 45227221 },\n { year: '1995', value: 4321221.9 },\n { year: '1996', value: 6322121 },\n { year: '1997', value: 78312213 },\n { year: '1998', value: 4192312 },\n { year: '1999', value: 6212332 },\n { year: '2000', value: 3192312 },\n ],\n xField: 'value',\n yField: 'year',\n color: '#0079f2',\n label: {\n visible: true,\n position: 'middle',\n },\n },\n },\n },\n];\n\nexport default {\n ...BarChartMeta,\n snippets\n};\n"
},
{
"path": "packages/fusion-ui/lowcode/cascader-select/meta.js",
"content": "import { wrapFormItemProps } from '../utils/form-utils';\n\nexport default {\n componentName: 'FormCascaderSelect',\n isFormItemComponent: true,\n title: '级联选择器',\n docUrl: '',\n screenshot: '',\n npm: {\n package: '@alifd/fusion-ui',\n version: '{{version}}',\n exportName: 'FormCascaderSelect',\n main: '',\n destructuring: true,\n subName: '',\n },\n props: [\n {\n name: 'prefix',\n propType: 'string',\n defaultValue: 'next-',\n },\n {\n name: 'label',\n title: {\n label: 'label',\n tip: '自定义内联 label',\n },\n propType: 'string',\n description: '自定义内联 label',\n },\n {\n name: 'className',\n propType: 'string',\n },\n {\n name: 'size',\n propType: {\n type: 'oneOf',\n value: ['small', 'medium', 'large'],\n },\n description: '大小',\n defaultValue: 'medium',\n },\n {\n name: 'placeholder',\n propType: 'string',\n description: '占位符',\n },\n {\n name: 'dataSource',\n propType: {\n type: 'arrayOf',\n value: 'object',\n },\n },\n {\n name: 'disabled',\n propType: 'bool',\n description: '是否禁用',\n defaultValue: false,\n },\n {\n name: 'hasArrow',\n propType: 'bool',\n description: '下拉箭头',\n defaultValue: true,\n },\n {\n name: 'hasBorder',\n propType: 'bool',\n description: '边框',\n defaultValue: true,\n },\n {\n name: 'hasClear',\n propType: 'bool',\n description: '清除按钮',\n defaultValue: false,\n },\n {\n name: 'notFoundContent',\n title: {\n label: '无数据时显示内容',\n tip: 'notFoundContent',\n },\n propType: {\n type: 'oneOfType',\n value: ['node', 'string'],\n },\n description: '无数据时显示内容',\n defaultValue: 'Not Found',\n },\n {\n name: 'loadData',\n propType: 'func',\n description: '异步加载数据函数\\n@param {Object} data 当前点击异步加载的数据',\n },\n {\n name: 'header',\n propType: 'node',\n description: '自定义下拉框头部',\n },\n {\n name: 'footer',\n propType: 'node',\n description: '自定义下拉框底部',\n },\n {\n name: 'defaultVisible',\n title: {\n label: '初始下拉框是否显示',\n tip: 'defaultVisible',\n },\n propType: 'bool',\n description: '初始下拉框是否显示',\n defaultValue: false,\n },\n {\n name: 'visible',\n title: {\n label: '当前下拉框是否显示',\n tip: 'visible',\n },\n propType: 'bool',\n description: '当前下拉框是否显示',\n },\n {\n name: 'readOnly',\n propType: 'bool',\n description: '是否只读',\n },\n {\n name: 'onChange',\n propType: 'func',\n description:\n '选中值改变时触发的回调函数\\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 多选时半选的数据',\n },\n {\n name: 'expandTriggerType',\n propType: {\n type: 'oneOf',\n value: ['click', 'hover'],\n },\n description: '展开触发方式',\n defaultValue: 'click',\n },\n {\n name: 'onExpand',\n propType: 'func',\n },\n {\n name: 'useVirtual',\n propType: 'bool',\n description: '虚拟滚动',\n defaultValue: false,\n },\n {\n name: 'multiple',\n propType: 'bool',\n description: '是否多选',\n defaultValue: false,\n },\n {\n name: 'changeOnSelect',\n title: {\n label: '选中即改变',\n tip: 'changeOnSelect|是否选中即发生改变, 该属性仅在单选模式下有效',\n },\n propType: 'bool',\n description: '是否选中即发生改变, 该属性仅在单选模式下有效',\n defaultValue: false,\n },\n {\n name: 'canOnlyCheckLeaf',\n title: {\n label: 'canOnlyCheckLeaf',\n tip: '是否只能勾选叶子项的checkbox，该属性仅在多选模式下有效',\n },\n propType: 'bool',\n description: '是否只能勾选叶子项的checkbox，该属性仅在多选模式下有效',\n defaultValue: false,\n },\n {\n name: 'checkStrictly',\n title: {\n label: 'checkStrictly',\n tip: '父子节点是否选中不关联',\n },\n propType: 'bool',\n description: '父子节点是否选中不关联',\n defaultValue: false,\n },\n {\n name: 'listStyle',\n propType: 'object',\n description: '每列列表样式对象',\n },\n {\n name: 'resultAutoWidth',\n title: {\n label: 'resultAutoWidth',\n tip: '搜索结果列表是否和选择框等宽',\n },\n propType: 'bool',\n description: '搜索结果列表是否和选择框等宽',\n defaultValue: true,\n },\n {\n name: 'showSearch',\n propType: 'bool',\n description: '搜索框',\n defaultValue: false,\n },\n {\n name: 'filter',\n propType: 'func',\n description:\n '自定义搜索函数\\n@param {String} searchValue 搜索的关键字\\n@param {Array} path 节点路径\\n@return {Boolean} 是否匹配\\n@default 根据路径所有节点的文本值模糊匹配',\n },\n {\n name: 'onVisibleChange',\n propType: 'func',\n description:\n '下拉框显示或关闭时触发事件的回调函数\\n@param {Boolean} visible 是否显示\\n@param {String} type 触发显示关闭的操作类型, fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发',\n },\n {\n name: 'popupStyle',\n propType: 'object',\n description: '下拉框自定义样式对象',\n },\n {\n name: 'popupProps',\n propType: 'object',\n description: '透传到 Popup 的属性对象',\n },\n {\n name: 'followTrigger',\n title: {\n label: '是否跟随滚动',\n tip: 'followTrigger',\n },\n propType: 'bool',\n description: '是否跟随滚动',\n },\n {\n name: 'isPreview',\n title: {\n label: '是否为预览态',\n tip: 'isPreview',\n },\n propType: 'bool',\n description: '是否为预览态',\n },\n {\n name: 'style',\n propType: 'object',\n },\n {\n name: 'popupContainer',\n propType: 'any',\n description: '弹层容器\\n@param {Element} target 目标元素\\n@return {Element} 弹层的容器元素',\n },\n ],\n configure: {\n supports: {\n style: true,\n events: ['onChange', 'onExpand', 'onVisibleChange'],\n },\n props: wrapFormItemProps([\n {\n name: 'label',\n title: {\n label: '内联文案',\n tip: '自定义内联 label',\n },\n setter: 'StringSetter',\n },\n {\n name: 'size',\n title: '尺寸',\n setter: {\n componentName: 'RadioGroupSetter',\n props: { options: ['small', 'medium', 'large'] },\n },\n defaultValue: 'medium',\n },\n {\n name: 'placeholder',\n title: '占位提示',\n setter: 'StringSetter',\n },\n {\n name: 'dataSource',\n title: '级联数据',\n setter: 'JsonSetter',\n },\n {\n name: 'disabled',\n setter: 'BoolSetter',\n title: '是否禁用',\n defaultValue: false,\n },\n {\n name: 'hasArrow',\n setter: 'BoolSetter',\n title: '下拉箭头',\n defaultValue: true,\n },\n {\n name: 'hasBorder',\n setter: 'BoolSetter',\n title: '边框',\n defaultValue: true,\n },\n {\n name: 'hasClear',\n setter: 'BoolSetter',\n title: '清除按钮',\n defaultValue: false,\n },\n {\n name: 'readOnly',\n setter: 'BoolSetter',\n title: '是否只读',\n },\n {\n name: 'multiple',\n setter: 'BoolSetter',\n title: '是否多选',\n defaultValue: false,\n },\n {\n name: 'showSearch',\n setter: 'BoolSetter',\n title: '搜索框',\n defaultValue: false,\n },\n {\n name: 'followTrigger',\n title: {\n label: '跟随滚动',\n tip: 'followTrigger',\n },\n setter: 'BoolSetter',\n description: '是否跟随滚动',\n },\n {\n name: 'isPreview',\n title: {\n label: '预览态',\n tip: 'isPreview',\n },\n setter: 'BoolSetter',\n description: '是否为预览态',\n },\n {\n name: 'expandTriggerType',\n display: 'block',\n setter: {\n componentName: 'RadioGroupSetter',\n props: { options: ['click', 'hover'] },\n },\n title: '展开触发方式',\n defaultValue: 'click',\n },\n {\n name: 'notFoundContent',\n display: 'block',\n title: {\n label: '无数据时显示内容',\n tip: 'notFoundContent',\n },\n setter: {\n componentName: 'MixedSetter',\n props: {\n setters: ['StringSetter', 'SlotSetter'],\n },\n },\n defaultValue: 'Not Found',\n },\n {\n type: 'group',\n title: '高级',\n display: 'block',\n items: [\n {\n name: 'id',\n title: {\n label: {\n type: 'i18n',\n zh_CN: '唯一标识',\n en_US: 'ID',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: id | 说明: 唯一标识',\n en_US: 'prop: id | description: switch id',\n },\n },\n setter: 'StringSetter',\n },\n {\n name: 'name',\n title: {\n label: {\n type: 'i18n',\n zh_CN: '表单标识',\n en_US: 'Name',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: name | 说明: 表单标识',\n en_US: 'prop: name | description: switch name',\n },\n },\n setter: 'StringSetter',\n },\n ],\n },\n ]),\n },\n icon: '',\n category: '内容',\n};\n"
},
{
"path": "packages/fusion-ui/lowcode/cascader-select/snippets.js",
"content": "module.exports = [\n {\n title: '收起模式',\n screenshot:\n 'https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_cascader-select.png',\n schema: {\n componentName: 'CascaderSelect',\n props: {\n prefix: 'next-',\n size: 'medium',\n hasArrow: true,\n hasBorder: true,\n expandTriggerType: 'click',\n resultAutoWidth: true,\n notFoundContent: 'Not Found',\n dataSource: [\n {\n value: '2974',\n label: '西安',\n children: [\n {\n value: '2975',\n label: '西安市',\n },\n {\n value: '2976',\n label: '高陵县',\n },\n {\n value: '2977',\n label: '蓝田县',\n },\n ],\n },\n ],\n },\n },\n },\n {\n title: '展开模式',\n screenshot:\n 'https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_cascader.png',\n schema: {\n componentName: 'Cascader',\n props: {\n prefix: 'next-',\n expandTriggerType: 'click',\n dataSource: [\n {\n value: '2974',\n label: '西安',\n children: [\n {\n value: '2975',\n label: '西安市',\n },\n {\n value: '2976',\n label: '高陵县',\n },\n {\n value: '2977',\n label: '蓝田县',\n },\n ],\n },\n ],\n },\n },\n },\n];\n"
},
{
"path": "packages/fusion-ui/lowcode/checkbox-group/meta.js",
"content": "import { wrapFormItemProps } from '../utils/form-utils';\n\nexport default {\n componentName: 'FormCheckboxGroup',\n isFormItemComponent: true,\n title: '复选按钮组',\n docUrl: '',\n screenshot: '',\n npm: {\n package: '@alifd/fusion-ui',\n version: '{{version}}',\n exportName: 'FormCheckboxGroup',\n main: '',\n destructuring: true,\n subName: '',\n },\n configure: {\n props: wrapFormItemProps([\n {\n name: 'disabled',\n title: '是否禁用',\n setter: {\n componentName: 'MixedSetter',\n props: {\n setters: ['BoolSetter', 'ExpressionSetter'],\n },\n },\n },\n {\n name: 'itemDirection',\n title: '排列方式',\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: [\n { title: '水平排列', value: 'hoz' },\n { title: '垂直排列', value: 'ver' },\n ],\n },\n },\n defaultValue: 'hoz',\n },\n {\n name: 'isPreview',\n title: '预览态',\n setter: {\n componentName: 'BoolSetter',\n },\n },\n {\n name: 'defaultValue',\n title: '默认值',\n defaultValue: '[]',\n setter: {\n componentName: 'MixedSetter',\n props: {\n setters: ['JsonSetter', 'ExpressionSetter'],\n },\n },\n },\n {\n name: 'dataSource',\n display: 'block',\n title: '选项',\n setter: {\n componentName: 'MixedSetter',\n props: {\n setters: [\n {\n componentName: 'ArraySetter',\n props: {\n itemSetter: {\n componentName: 'ObjectSetter',\n props: {\n config: {\n items: [\n {\n name: 'label',\n title: 'label',\n setter: 'StringSetter',\n },\n {\n name: 'value',\n title: 'value',\n setter: 'StringSetter',\n },\n ],\n },\n },\n initialValue: {\n label: '选项一',\n value: '1',\n },\n },\n },\n },\n 'ExpressionSetter',\n ],\n },\n },\n },\n {\n type: 'group',\n title: '高级',\n display: 'block',\n items: [\n {\n name: 'id',\n title: {\n label: {\n type: 'i18n',\n zh_CN: '唯一标识',\n en_US: 'ID',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: id | 说明: 唯一标识',\n en_US: 'prop: id | description: switch id',\n },\n },\n setter: 'StringSetter',\n },\n {\n name: 'name',\n title: {\n label: {\n type: 'i18n',\n zh_CN: '表单标识',\n en_US: 'Name',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: name | 说明: 表单标识',\n en_US: 'prop: name | description: switch name',\n },\n },\n setter: 'StringSetter',\n },\n ],\n },\n // {\n // name: \"renderPreview\",\n // title: \"预览态模式下渲染的内容\",\n // display: \"block\",\n // setter: {\n // componentName: \"FunctionSetter\"\n // },\n // condition(target) {\n // return target.getProps().getPropValue(\"isPreview\") || false;\n // }\n // }\n ]),\n supports: {\n style: true,\n events: ['onChange'],\n },\n advanced: {\n initials: [\n {\n name: 'dataSource',\n initial: () => {\n return [\n {\n label: '选项一',\n value: '1',\n },\n {\n label: '选项二',\n value: '2',\n },\n {\n label: '选项三',\n value: '3',\n },\n ];\n },\n },\n ],\n },\n },\n icon: '',\n category: '内容',\n};\n"
},
{
"path": "packages/fusion-ui/lowcode/child-form/meta.ts",
"content": "import { ComponentMetadata, Snippet } from '@ali/lowcode-types';\nimport { default as formBaseProps } from '../pro-form/common/form-base-props';\n\nconst ChildFormMeta: ComponentMetadata = {\n componentName: 'ChildForm',\n title: '子表单',\n docUrl: '',\n screenshot: '',\n category: '表单类',\n group: '精选组件',\n devMode: 'proCode',\n hidden: true,\n npm: {\n package: '@alifd/fusion-ui',\n version: '0.1.6-beta.24',\n exportName: 'ChildForm',\n main: 'lib/index.js',\n destructuring: true,\n subName: '',\n },\n configure: {\n props: formBaseProps,\n supports: {\n className: true,\n style: true,\n },\n component: {\n isContainer: true,\n isMinimalRenderUnit: true,\n nestingRule: {\n childWhitelist: new RegExp('form.*', 'i'),\n },\n },\n },\n};\nconst snippets: Snippet[] = [\n {\n title: '子表单',\n screenshot:\n 'https://img.alicdn.com/imgextra/i1/O1CN01MJT0lc1pXVaHIcoBy_!!6000000005370-55-tps-56-56.svg',\n schema: {\n componentName: 'ChildForm',\n props: {\n primaryKey: String(Math.floor(Math.random() * 10000)),\n placeholder: '请在右侧面板添加表单项+',\n placeholderStyle: {\n height: '38px',\n color: '#0088FF',\n background: '#d8d8d836',\n border: 0,\n gridArea: 'span 4 / span 4',\n },\n columns: 3,\n labelCol: {\n fixedSpan: 4,\n },\n labelAlign: 'top',\n emptyContent: '添加表单项',\n },\n children: [...new Array(3).keys()].map((item) => ({\n componentName: 'FormInput',\n props: {\n formItemProps: {\n primaryKey: String(Math.floor(Math.random() * 10000) + item),\n label: '表单项',\n size: 'medium',\n device: 'desktop',\n fullWidth: true,\n },\n placeholder: '请输入',\n },\n })),\n },\n },\n];\n\nexport default {\n ...ChildFormMeta,\n snippets,\n};\n"
},
{
"path": "packages/fusion-ui/lowcode/column-chart/meta.ts",
"content": "import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';\nimport { actionConfigure } from '../common/chart-action';\nimport { plotConfigure } from '../common/chart-plot';\n\nconst ColumnChartMeta: IPublicTypeComponentMetadata = {\n componentName: 'ColumnChart',\n title: '柱状图',\n category: '图表',\n group: '精选组件',\n docUrl: '',\n screenshot: '',\n devMode: 'proCode',\n npm: {\n package: '@alifd/fusion-ui',\n version: '0.1.3-beta.3',\n exportName: 'ColumnChart',\n main: 'lib/index.js',\n destructuring: true,\n subName: '',\n },\n configure: {\n props: [\n // 数据\n {\n name: 'data',\n type: 'group',\n display: 'accordion',\n title: {\n label: '数据',\n },\n items: [\n {\n name: 'data',\n title: '图表数据',\n setter: 'JsonSetter',\n },\n {\n name: 'xField',\n title: {\n label: 'x轴字段名',\n tip: 'x 方向映射对应的数据字段名',\n },\n setter: 'StringSetter',\n },\n {\n name: 'yField',\n title: {\n label: 'y轴字段名',\n tip: 'y 方向映射所对应的数据字段名',\n },\n setter: 'StringSetter',\n },\n ],\n },\n // 图形属性\n {\n name: '',\n type: 'group',\n display: 'accordion',\n title: {\n label: '图形属性',\n },\n items: [\n {\n name: 'color',\n title: '颜色',\n setter: 'ColorSetter',\n },\n {\n name: 'columnSize',\n title: '粗细',\n setter: 'NumberSetter',\n },\n {\n name: 'label',\n type: 'group',\n display: 'accordion',\n title: {\n label: '标签',\n },\n items: [\n {\n name: 'label.visible',\n title: '显示',\n setter: 'BoolSetter',\n },\n {\n name: 'label.position',\n title: '位置',\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: [\n { title: '上', value: 'top' },\n { title: '中', value: 'middle' },\n { title: '下', value: 'bottom' },\n ],\n },\n },\n condition: (target) => {\n return !!target.getProps().getPropValue('label.visible');\n },\n },\n ],\n },\n ],\n },\n ...plotConfigure,\n ...actionConfigure,\n ],\n },\n};\n\nconst snippets: IPublicTypeSnippet[] = [\n {\n title: '柱状图',\n screenshot:\n 'https://img.alicdn.com/imgextra/i1/O1CN01mz7siK1JIn9XZmCF6_!!6000000001006-55-tps-56-56.svg',\n schema: {\n componentName: 'ColumnChart',\n props: {\n data: [\n { year: '1991', value: 72345678 },\n { year: '1992', value: 4321132 },\n { year: '1993', value: 33121112.5 },\n { year: '1994', value: 45227221 },\n { year: '1995', value: 4321221.9 },\n { year: '1996', value: 6322121 },\n { year: '1997', value: 78312213 },\n { year: '1998', value: 4192312 },\n { year: '1999', value: 6212332 },\n { year: '2000', value: 3192312 },\n ],\n xField: 'year',\n yField: 'value',\n color: '#0079f2',\n label: {\n visible: true,\n position: 'middle',\n },\n\n // data: [\n // {\n // name: 'London',\n // 月份: 'Jan.',\n // 月均降雨量: 18.9,\n // },\n // {\n // name: 'London',\n // 月份: 'Feb.',\n // 月均降雨量: 28.8,\n // },\n // {\n // name: 'London',\n // 月份: 'Mar.',\n // 月均降雨量: 39.3,\n // },\n // {\n // name: 'London',\n // 月份: 'Apr.',\n // 月均降雨量: 81.4,\n // },\n // {\n // name: 'London',\n // 月份: 'May',\n // 月均降雨量: 47,\n // },\n // {\n // name: 'London',\n // 月份: 'Jun.',\n // 月均降雨量: 20.3,\n // },\n // {\n // name: 'London',\n // 月份: 'Jul.',\n // 月均降雨量: 24,\n // },\n // {\n // name: 'London',\n // 月份: 'Aug.',\n // 月均降雨量: 35.6,\n // },\n // {\n // name: 'Berlin',\n // 月份: 'Jan.',\n // 月均降雨量: 12.4,\n // },\n // {\n // name: 'Berlin',\n // 月份: 'Feb.',\n // 月均降雨量: 23.2,\n // },\n // {\n // name: 'Berlin',\n // 月份: 'Mar.',\n // 月均降雨量: 34.5,\n // },\n // {\n // name: 'Berlin',\n // 月份: 'Apr.',\n // 月均降雨量: 99.7,\n // },\n // {\n // name: 'Berlin',\n // 月份: 'May',\n // 月均降雨量: 52.6,\n // },\n // {\n // name: 'Berlin',\n // 月份: 'Jun.',\n // 月均降雨量: 35.5,\n // },\n // {\n // name: 'Berlin',\n // 月份: 'Jul.',\n // 月均降雨量: 37.4,\n // },\n // {\n // name: 'Berlin',\n // 月份: 'Aug.',\n // 月均降雨量: 42.4,\n // },\n // ],\n // xField: '月份',\n // yField: '月均降雨量',\n // seriesField: 'name',\n // legend: {\n // position: 'top-left',\n // }\n },\n },\n },\n];\n\nexport default {\n ...ColumnChartMeta,\n snippets,\n};\n"
},
{
"path": "packages/fusion-ui/lowcode/common/actions.ts",
"content": "export const commonActions = [\n {\n name: 'actionType',\n title: '操作类型',\n display: 'inline',\n editable: true,\n initialValue: 'link',\n setter: {\n componentName: 'SelectSetter',\n props: {\n options: [\n {\n value: 'formDialog',\n title: '打开表单弹窗',\n },\n {\n value: 'link',\n title: '链接',\n },\n ],\n },\n },\n },\n {\n name: 'text',\n title: '标题',\n editable: true,\n initialValue: '详情',\n display: 'inline',\n setter: {\n componentName: 'TextSetter',\n },\n },\n {\n name: 'key',\n title: '标识',\n display: 'none',\n initialValue: (currentValue, defaultValue) => {\n return currentValue || defaultValue || `data-${Math.random().toString(36).substr(-6)}`;\n },\n setter: {\n componentName: 'TextSetter',\n },\n },\n {\n name: '_redirect_url',\n title: '跳转页面',\n display: 'inline',\n accessor() {\n const _redirect = this.parent.getParam('_redirect').getValue() || {};\n return _redirect.url;\n },\n mutator(value) {\n this.parent.getParam('_redirect').setValue({\n externalLink: true,\n openType: 'current',\n url: value,\n });\n },\n setter() {\n const pages = this.node.getProp('_pages_').getValue();\n const data = pages.map((item) => {\n return {\n title: item.title.zh_CN,\n value: `/${item.navUuid}`,\n };\n });\n return {\n componentName: 'SelectSetter',\n props: {\n options: data,\n },\n };\n },\n hidden() {\n return this.parent.getParam('actionType').getValue() !== 'link';\n },\n },\n {\n name: '_redirect',\n title: '跳转页面',\n display: 'none',\n hidden: true,\n },\n {\n title: '关联弹窗',\n name: '_bindFormDialog',\n display: 'inline',\n hidden() {\n const actionType = this.parent.getParam('actionType').toData();\n return actionType !== 'formDialog';\n },\n setter() {\n // 兼容Vision低版本\n const nodeDocument = this.node.document || this.node.page;\n const { nodeList } = nodeDocument.getRootNodeVisitor('NodeCache');\n\n const options = nodeList\n .filter((x) => x.componentName.includes('Dialog'))\n .map((x) => ({\n title:\n x.propsData && x.propsData.title\n ? `${x.propsData.title}(${x.id})`\n : `${x.id}(${x.componentName})`,\n value: x.id,\n }));\n\n return {\n componentName: 'SelectSetter',\n props: {\n options,\n hasClear: true,\n },\n };\n },\n },\n];\n"
},
{
"path": "packages/fusion-ui/lowcode/common/button-groups.ts",
"content": "import { IProps } from '../types/index';\nimport { hideProp } from '../utils';\n\nexport const buttonConfigureProps: IProps[] = [\n {\n name: 'children',\n title: '名称',\n display: 'inline',\n initialValue: '操作',\n isRequired: true,\n setter: 'StringSetter',\n },\n {\n name: 'type',\n title: '按钮样式',\n display: 'inline',\n isRequired: true,\n initialValue: 'primary',\n setter: {\n componentName: 'SelectSetter',\n props: {\n options: [\n {\n title: '普通按钮',\n value: 'normal',\n },\n {\n title: '主按钮',\n value: 'primary',\n },\n {\n title: '次按钮',\n value: 'secondary',\n },\n ],\n },\n },\n },\n {\n name: 'key',\n title: '标识',\n condition: hideProp,\n initialValue: (currentValue, defaultValue) =>\n currentValue || defaultValue || `data-${Math.random().toString(36).substr(-6)}`,\n setter: {\n componentName: 'StringSetter',\n },\n },\n {\n name: 'disabled',\n title: '是否禁用',\n display: 'inline',\n initialValue: false,\n setter: 'BoolSetter',\n },\n {\n name: 'hidden',\n title: '是否隐藏',\n display: 'inline',\n initialValue: false,\n setter: 'BoolSetter',\n },\n {\n name: 'actionType',\n title: '操作类型(TODO)',\n condition: hideProp,\n display: 'inline',\n initialValue: 'batch',\n setter: {\n componentName: 'SelectSetter',\n props: {\n options: [\n // {\n // title: '批量',\n // value: 'batch',\n // },\n {\n title: '表单弹窗',\n value: 'formDialog',\n },\n {\n title: '链接',\n value: 'link',\n },\n {\n title: '导入',\n value: 'import',\n },\n // {\n // title: '同步',\n // value: 'sync',\n // },\n {\n title: '导出',\n value: 'export',\n },\n // {\n // title: '解析导出',\n // value: 'analysisExport',\n // },\n ],\n },\n },\n },\n {\n name: 'onClick',\n title: '点击事件',\n setter: 'FunctionSetter',\n },\n];\nexport const buttonGroupConfigureProp: IProps = {\n type: 'field',\n name: 'buttonGroup',\n title: '按钮组',\n extraProps: {\n display: 'accordion',\n },\n setter: {\n componentName: 'ObjectSetter',\n props: {\n config: {\n items: [\n {\n name: 'text',\n title: {\n label: '文字模式',\n tip: '是否设定按钮为文字模式',\n },\n setter: 'BoolSetter',\n },\n {\n name: 'visibleButtonCount',\n title: {\n label: '可见数量',\n tip: '超过会收起到”更多“菜单中',\n },\n extraProps: {\n defaultValue: 3,\n },\n setter: {\n componentName: 'NumberSetter',\n props: {\n max: 6,\n min: 1,\n },\n },\n },\n {\n name: 'dataSource',\n title: '按钮组',\n extraProps: {\n display: 'plain',\n },\n setter: {\n componentName: 'ArraySetter',\n props: {\n hideDescription: true,\n itemSetter: {\n componentName: 'ObjectSetter',\n props: {\n config: {\n items: buttonConfigureProps,\n },\n },\n initialValue: () => ({\n children: '操作',\n type: 'normal',\n }),\n },\n },\n },\n },\n ],\n },\n },\n },\n};\n"
},
{
"path": "packages/fusion-ui/lowcode/common/chart-action.ts",
"content": "import { IPublicTypeConfigure } from '@alilc/lowcode-types';\n\nexport const actionConfigure: NonNullable = [\n {\n type: 'field',\n name: 'cardProps.actionButtons',\n title: '操作配置',\n extraProps: {\n display: 'accordion',\n },\n setter: {\n componentName: 'ArraySetter',\n props: {\n itemSetter: {\n componentName: 'ObjectSetter',\n props: {\n config: {\n items: [\n {\n name: 'children',\n title: '名称',\n display: 'inline',\n initialValue: '操作',\n important: true,\n setter: 'StringSetter',\n },\n {\n name: 'onClick',\n title: '点击事件',\n display: 'inline',\n important: true,\n setter: 'FunctionSetter',\n },\n ],\n },\n },\n initialValue: () => {\n return {\n children: '操作',\n };\n },\n },\n },\n },\n },\n {\n name: 'cardProps.text',\n title: {\n label: '文字模式',\n tip: '是否设定按钮为文字模式',\n },\n setter: 'BoolSetter',\n },\n {\n name: 'cardProps.visibleButtonCount',\n title: {\n label: '可见数量',\n tip: '超过会收起到”更多“菜单中',\n },\n extraProps: {\n defaultValue: 3,\n },\n setter: {\n componentName: 'NumberSetter',\n props: {\n max: 6,\n min: 1,\n },\n },\n },\n];\n"
},
{
"path": "packages/fusion-ui/lowcode/common/chart-plot.ts",
"content": "import { IPublicTypeConfigure } from '@alilc/lowcode-types';\n\nexport const plotConfigure: NonNullable = [\n {\n name: 'autoFit',\n title: '自适应宽高',\n display: 'block',\n defaultValue: true,\n setter: 'BoolSetter',\n },\n {\n name: 'height',\n title: '高度',\n display: \"block\",\n defaultValue: 300,\n setter: {\n componentName: 'NumberSetter',\n },\n }\n];\n"
},
{
"path": "packages/fusion-ui/lowcode/common/index.ts",
"content": "export * from './actions';\nexport * from './chart-action';\nexport * from './operations';\n"
},
{
"path": "packages/fusion-ui/lowcode/common/operations.ts",
"content": "import { IProps } from '../types';\nimport { hideProp } from '../utils';\nimport { IPublicModelSettingField } from '@alilc/lowcode-types';\n\nexport const operationConfig: IProps = {\n name: 'operationConfig',\n display: 'accordion',\n title: '底部操作',\n setter: {\n componentName: 'ObjectSetter',\n props: {\n config: {\n items: [\n {\n name: 'visibleButtonCount',\n title: {\n label: '可见数量',\n tip: '超过会收起到”更多“菜单中',\n },\n extraProps: {\n defaultValue: 3,\n },\n setter: {\n componentName: 'NumberSetter',\n props: {\n max: 6,\n min: 1,\n },\n },\n },\n {\n name: 'fixed',\n title: '吸底',\n setter: 'BoolSetter',\n },\n {\n name: 'showSaveTime',\n title: '显示时间',\n setter: {\n componentName: 'BoolSetter',\n },\n },\n {\n name: 'align',\n title: '布局',\n defaultValue: 'center',\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: [\n {\n title: '居左',\n value: 'left',\n },\n {\n title: '居中',\n value: 'center',\n },\n {\n title: '居右',\n value: 'right',\n },\n ],\n },\n },\n },\n ],\n },\n },\n },\n};\n\nexport const operations: IProps = {\n name: 'operations',\n display: 'block',\n title: '操作项',\n getValue: (target, value) => {\n return value || [];\n },\n setter: {\n componentName: 'MixedSetter',\n props: {\n setters: [\n {\n componentName: 'SlotSetter',\n defaultValue: {\n type: 'JSSlot',\n value: [],\n },\n },\n {\n componentName: 'ArraySetter',\n props: {\n itemSetter: {\n componentName: 'ObjectSetter',\n props: {\n config: {\n items: [\n {\n name: 'id',\n condition: hideProp,\n setter: (target: IPublicModelSettingField) => {\n if (!target.getValue()) {\n target.setValue(`${target.id}`);\n }\n return 'StringSetter';\n },\n },\n {\n name: 'content',\n display: 'inline',\n title: '文本',\n setter: 'StringSetter',\n important: true,\n },\n {\n name: 'action',\n display: 'inline',\n title: '操作',\n important: true,\n setValue: (target: IPublicModelSettingField, value: any) => {\n const actionNameMap: any = {\n submit: '提交',\n reset: '重置',\n custom: '自定义',\n };\n const actionName = actionNameMap[value] || '自定义';\n target.parent.setPropValue('content', actionName);\n },\n setter: {\n componentName: 'SelectSetter',\n props: {\n options: [\n {\n title: '提交',\n value: 'submit',\n },\n {\n title: '重置',\n value: 'reset',\n },\n {\n title: '自定义',\n value: 'custom',\n },\n ],\n },\n },\n },\n {\n name: 'type',\n display: 'inline',\n title: '样式',\n important: true,\n setter: {\n componentName: 'SelectSetter',\n props: {\n options: [\n {\n title: '主要',\n value: 'primary',\n },\n {\n title: '次要',\n value: 'secondary',\n },\n {\n title: '普通',\n value: 'normal',\n },\n ],\n },\n },\n },\n {\n name: 'behavior',\n title: '交互设置',\n display: 'block',\n condition: (target: IPublicModelSettingField) => {\n const action = target.parent.getPropValue('action');\n return !action || action === 'custom';\n },\n setter: {\n componentName: 'BehaviorSetter',\n props: (target: IPublicModelSettingField) => ({\n actions: ['onClick'],\n enableTooltipAction: true,\n enableMessageAction: true,\n extendedOptions: {\n tooltip: {\n id: target.parent.getPropValue('id'),\n defaultTriggerType: 'click',\n },\n message: {\n types: ['notice', 'success', 'loading', 'warning', 'error'],\n defaultType: 'notice',\n library: 'Next',\n component: 'Message',\n },\n },\n }),\n },\n },\n {\n name: 'onClick',\n display: 'inline',\n title: '点击事件',\n condition: hideProp,\n setter: 'FunctionSetter',\n extraProps: {\n supportVariable: true,\n },\n },\n {\n name: 'htmlType',\n condition: hideProp,\n },\n {\n name: '!autoSubmit',\n display: 'inline',\n virtual: true,\n title: '自动提交',\n setter: {\n componentName: 'BoolSetter',\n },\n extraProps: {\n setValue: (target: IPublicModelSettingField, value: any) => {\n target.parent.setPropValue('htmlType', value ? 'submit' : '');\n },\n getValue: (target: IPublicModelSettingField, value: any) => {\n return value === 'submit';\n },\n },\n condition: (target: IPublicModelSettingField) => {\n return target.parent.getPropValue('action') !== 'submit';\n },\n },\n ],\n },\n },\n initialValue: () => {\n return {\n content: '提交',\n action: 'submit',\n type: 'normal',\n };\n },\n },\n },\n },\n ],\n },\n },\n};\n\nexport const operationProps = [operationConfig, operations];\n"
},
{
"path": "packages/fusion-ui/lowcode/date-picker/meta.ts",
"content": "import { hideProp } from '../utils';\nimport { wrapFormItemProps } from '../utils/form-utils';\nimport { IComponentDescription } from '../types';\n\nconst meta: IComponentDescription = {\n componentName: 'FormDatePicker',\n isFormItemComponent: true,\n title: '日期选择框',\n docUrl: '',\n screenshot: '',\n npm: {\n package: '@alifd/fusion-ui',\n version: '{{version}}',\n exportName: 'FormDatePicker',\n main: '',\n destructuring: true,\n subName: '',\n },\n configure: {\n supports: {\n events: ['onChange', 'onOk'],\n },\n props: wrapFormItemProps([\n {\n name: 'label',\n title: {\n label: '标签',\n tip: 'label|表单项内置标签',\n },\n setter: 'StringSetter',\n },\n {\n name: 'state',\n title: {\n label: '状态',\n tip: 'state|表单项状态',\n },\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: ['success', 'loading', 'error'],\n },\n },\n },\n {\n name: 'placeholder',\n title: {\n label: '占位提示',\n tip: 'placeholder|输入提示',\n },\n setter: 'StringSetter',\n },\n {\n name: 'value',\n title: {\n label: 'value',\n tip: 'value|日期值（受控）',\n },\n setter: 'DateSetter',\n condition: hideProp,\n },\n {\n name: 'format',\n title: {\n label: '格式',\n tip: 'format|日期值的格式（用于限定用户输入和展示）',\n },\n setter: 'StringSetter',\n defaultValue: 'YYYY-MM-DD',\n },\n {\n name: 'size',\n title: {\n label: '尺寸',\n tip: 'size|表单项尺寸',\n },\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: ['small', 'medium', 'large'],\n },\n },\n defaultValue: 'medium',\n },\n {\n name: 'disabled',\n title: {\n label: '是否禁用',\n tip: 'disabled|是否禁用',\n },\n setter: 'BoolSetter',\n },\n {\n name: 'hasClear',\n title: {\n label: '清除按钮',\n tip: 'hasClear|是否显示清空按钮',\n },\n setter: 'BoolSetter',\n defaultValue: true,\n },\n {\n name: 'followTrigger',\n setter: 'BoolSetter',\n title: '跟随滚动',\n },\n {\n name: 'defaultValue',\n title: {\n label: '默认值',\n tip: 'defaultValue|初始日期值，moment 对象',\n },\n setter: 'DateSetter',\n },\n {\n name: 'form',\n type: 'group',\n title: '高级',\n display: 'block',\n items: [\n {\n name: 'id',\n title: {\n label: {\n type: 'i18n',\n zh_CN: '唯一标识',\n en_US: 'ID',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: id | 说明: 唯一标识',\n en_US: 'prop: id | description: switch id',\n },\n },\n setter: 'StringSetter',\n },\n {\n name: 'name',\n title: {\n label: {\n type: 'i18n',\n zh_CN: '表单标识',\n en_US: 'Name',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: name | 说明: 表单标识',\n en_US: 'prop: name | description: switch name',\n },\n },\n setter: 'StringSetter',\n },\n ],\n },\n ]),\n },\n icon: '',\n category: '内容',\n};\n\nexport default meta;\n"
},
{
"path": "packages/fusion-ui/lowcode/date-picker/snippets.js",
"content": "module.exports = [\n {\n title: '日期选择框',\n screenshot:\n 'https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_date-picker.png',\n schema: {\n componentName: 'DatePicker',\n props: {\n prefix: 'next-',\n format: 'YYYY-MM-DD',\n size: 'medium',\n hasClear: false,\n popupTriggerType: 'click',\n popupAlign: 'tl tl',\n followTrigger: true,\n },\n },\n },\n {\n title: '日期区间',\n screenshot:\n 'https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_date-picker.png',\n schema: {\n componentName: 'RangePicker',\n props: {\n prefix: 'next-',\n format: 'YYYY-MM-DD',\n size: 'medium',\n type: 'date',\n hasClear: false,\n popupTriggerType: 'click',\n popupAlign: 'tl tl',\n followTrigger: true,\n },\n },\n },\n];\n"
},
{
"path": "packages/fusion-ui/lowcode/donut-chart/meta.ts",
"content": "import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';\nimport { actionConfigure } from '../common/chart-action';\nimport { plotConfigure } from '../common/chart-plot';\n\nconst DonutChartMeta: IPublicTypeComponentMetadata = {\n componentName: 'DonutChart',\n title: '环形图',\n category: '图表',\n group: '精选组件',\n docUrl: '',\n screenshot: '',\n devMode: 'proCode',\n npm: {\n package: '@alifd/fusion-ui',\n version: '0.1.3-beta.3',\n exportName: 'DonutChart',\n main: 'lib/index.js',\n destructuring: true,\n subName: '',\n },\n configure: {\n props: [\n // 图例\n {\n name: 'legend',\n type: 'group',\n display: 'accordion',\n title: {\n label: '图例',\n },\n items: [\n {\n name: 'legend.position',\n title: '位置',\n setter: {\n componentName: 'SelectSetter',\n props: {\n options: [\n { title: '左', value: 'left' },\n { title: '左上', value: 'left-top' },\n { title: '左下', value: 'left-bottom' },\n { title: '右', value: 'right' },\n { title: '右上', value: 'right-top' },\n { title: '右下', value: 'right-bottom' },\n { title: '上', value: 'top' },\n { title: '上左', value: 'top-left' },\n { title: '上右', value: 'top-right' },\n { title: '下', value: 'bottom' },\n { title: '下左', value: 'bottom-left' },\n { title: '下右', value: 'bottom-right' },\n ],\n },\n },\n },\n ],\n },\n // 数据\n {\n name: 'data',\n type: 'group',\n display: 'accordion',\n title: {\n label: '数据',\n },\n items: [\n {\n name: 'data',\n title: '图表数据',\n setter: 'JsonSetter',\n },\n {\n name: 'angleField',\n title: {\n label: '值字段名',\n tip: '扇形切片大小（弧度）所对应的数据字段名',\n },\n setter: 'StringSetter',\n },\n {\n name: 'colorField',\n title: {\n label: '分类字段名',\n tip: '扇形颜色映射对应的数据字段名',\n },\n setter: 'StringSetter',\n },\n ],\n },\n // 图形属性\n {\n name: '',\n type: 'group',\n display: 'accordion',\n title: {\n label: '图形属性',\n },\n items: [\n {\n name: 'color',\n title: '颜色',\n setter: {\n componentName: 'ArraySetter',\n props: {\n itemSetter: {\n componentName: 'ColorSetter',\n initialValue: '#0079f2',\n },\n },\n },\n },\n {\n name: 'label',\n type: 'group',\n display: 'accordion',\n title: {\n label: '标签',\n },\n items: [\n {\n name: 'label.visible',\n title: '显示',\n setter: 'BoolSetter',\n },\n {\n name: 'label.type',\n title: '位置',\n setter: {\n componentName: 'SelectSetter',\n props: {\n options: [\n { title: '内部', value: 'inner' },\n { title: '外部', value: 'outer' },\n { title: '外部圆形排布', value: 'outer-center' },\n { title: '蜘蛛布局', value: 'spider' },\n ],\n },\n },\n },\n ],\n },\n ],\n },\n ...plotConfigure,\n ...actionConfigure,\n ],\n },\n};\nconst snippets: IPublicTypeSnippet[] = [\n {\n title: '环形图',\n screenshot:\n 'https://img.alicdn.com/imgextra/i3/O1CN01pLbt7T1Mh0woqKEN1_!!6000000001465-55-tps-56-56.svg',\n schema: {\n componentName: 'DonutChart',\n props: {\n legend: {\n position: 'top-left',\n },\n data: [\n { year: '1991', value: 72345678 },\n { year: '1992', value: 4321132 },\n { year: '1993', value: 33121112.5 },\n { year: '1994', value: 45227221 },\n { year: '1995', value: 4321221.9 },\n { year: '1996', value: 6322121 },\n { year: '1997', value: 78312213 },\n { year: '1998', value: 2192312 },\n { year: '1999', value: 6212332 },\n { year: '2000', value: 1192312 },\n ],\n angleField: 'value',\n colorField: 'year',\n label: {\n visible: true,\n type: 'spider',\n },\n color: ['#3BCBD1', '#47A4FE', '#EDBA42', '#F4704E', '#ED6899', '#7F62C3', '#6E7BC9'],\n },\n },\n },\n];\n\nexport default {\n ...DonutChartMeta,\n snippets,\n};\n"
},
{
"path": "packages/fusion-ui/lowcode/edit-table/meta.ts",
"content": "import { IComponentDescription } from '../types/index';\nimport { ProTableProps } from '../pro-table/pro-table-meta';\n\nfunction editTablePropsFilter(prop: any) {\n const ignorePropNames: string[] = ['dataSource'];\n return !ignorePropNames.includes(prop?.name);\n}\n\nconst EditTableProps = ProTableProps.filter(editTablePropsFilter).map((item) => {\n if (item.name === 'advanced') {\n return {\n type: 'group',\n title: '高级',\n name: 'other',\n extraProps: {\n display: 'accordion',\n defaultCollapsed: true,\n },\n items: [\n {\n name: 'addPosition',\n title: '新增行位置',\n defaultValue: 'end',\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: [\n {\n label: '上',\n value: 'start',\n },\n {\n label: '下',\n value: 'end',\n },\n ],\n },\n },\n },\n {\n type: 'field',\n name: '!选择模式',\n title: '选择模式',\n display: 'inline',\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: [\n {\n title: '无',\n value: 'none',\n tip: 'none',\n },\n {\n title: '多选',\n value: 'multiple',\n tip: 'multiple',\n },\n {\n title: '单选',\n value: 'single',\n tip: 'single',\n },\n ],\n },\n },\n defaultValue: 'none',\n getValue: (target) => {\n const rowSelection = target.parent.getPropValue('rowSelection');\n if (!rowSelection) {\n return 'none';\n }\n return rowSelection.mode === 'single' ? 'single' : 'multiple';\n },\n setValue: (field, value) => {\n const { node } = field;\n if (['single', 'multiple'].includes(value)) {\n node.setPropValue('rowSelection', {\n ...node.getPropValue('rowSelection'),\n mode: value,\n });\n } else {\n node.setPropValue('rowSelection', undefined);\n }\n },\n },\n {\n type: 'field',\n name: 'indexColumn',\n title: '开启序号列',\n extraProps: {\n display: 'inline',\n defaultValue: false,\n },\n setter: {\n componentName: 'BoolSetter',\n },\n },\n {\n type: 'field',\n name: 'settingButtons',\n title: '开启设置按钮',\n extraProps: {\n display: 'inline',\n defaultValue: false,\n },\n setter: {\n componentName: 'BoolSetter',\n },\n },\n {\n type: 'field',\n name: 'primaryKey',\n title: {\n label: '数据主键',\n tip: '数据主键用于区分数据中不同的行，对行选择和行编辑功能非常重要，不同的行主键值不可重复，一般采用数据库中自增 ID 字段',\n },\n extraProps: {\n display: 'inline',\n defaultValue: 'id',\n condition: () => false,\n },\n },\n {\n name: 'cellDefault',\n title: {\n label: '单元格缺省填充',\n tip: '当单元格值为空时，显示内容',\n },\n setter: 'StringSetter',\n },\n ],\n };\n }\n return { ...item };\n});\n\nexport const editTableMeta: IComponentDescription = {\n componentName: 'EditTable',\n title: '可编辑表格',\n docUrl: '',\n icon: 'https://img.alicdn.com/imgextra/i4/O1CN01dtjMvv1heoyqst9u5_!!6000000004303-55-tps-56-56.svg',\n devMode: 'procode',\n group: '精选组件',\n category: '表格类',\n tags: ['业务组件'],\n npm: {\n package: '@alifd/fusion-ui',\n version: '1.0.24-21',\n exportName: 'EditTable',\n main: 'lib/index.js',\n destructuring: true,\n subName: '',\n },\n\n configure: {\n props: EditTableProps,\n component: {\n isContainer: false,\n nestingRule: {},\n },\n supports: {\n events: ['onSave', 'onRemove'],\n },\n },\n snippets: [\n {\n title: '可编辑表格',\n screenshot:\n 'https://img.alicdn.com/imgextra/i4/O1CN01dtjMvv1heoyqst9u5_!!6000000004303-55-tps-56-56.svg',\n schema: {\n componentName: 'EditTable',\n props: {\n dataSource: [\n {\n id: 'id-2f5DdE2b-0',\n date: '2013-06-12',\n percent: 1.862,\n documentAmount: 2022,\n currency: 'CNY',\n company: '支付宝科技有限公司',\n },\n {\n id: 'id-2f5DdE2b-1',\n date: '2013-06-12',\n percent: 1.862,\n documentAmount: 2022,\n currency: 'CNY',\n company: '支付宝科技有限公司',\n },\n {\n id: 'id-2f5DdE2b-2',\n date: '2013-06-12',\n percent: 1.862,\n documentAmount: 2022,\n currency: 'CNY',\n company: '支付宝科技有限公司',\n },\n {\n id: 'id-2f5DdE2b-3',\n date: '2013-06-12',\n percent: 1.862,\n documentAmount: 2022,\n currency: 'CNY',\n company: '支付宝科技有限公司',\n },\n {\n id: 'id-2f5DdE2b-4',\n date: '2013-06-12',\n percent: 1.862,\n documentAmount: 2022,\n currency: 'CNY',\n company: '支付宝科技有限公司',\n },\n ],\n actionColumnButtons: {\n text: true,\n visibleButtonCount: 3,\n },\n actionBarButtons: {\n dataSource: [\n {\n type: 'primary',\n children: '操作一',\n },\n {\n type: 'normal',\n children: '操作二',\n },\n ],\n visibleButtonCount: 3,\n },\n paginationProps: {\n pageSize: 20,\n current: 1,\n },\n settingButtons: true,\n columns: [\n {\n title: '公司',\n dataIndex: 'company',\n width: 160,\n formatType: 'link',\n searchable: true,\n },\n {\n title: '单据金额',\n dataIndex: 'documentAmount',\n formatType: 'money',\n },\n {\n title: '币种',\n dataIndex: 'currency',\n formatType: 'currency',\n filters: [\n {\n label: 'CNY',\n value: 'CNY',\n },\n {\n label: 'USD',\n value: 'USD',\n },\n {\n label: 'JPY',\n value: 'JPY',\n },\n {\n label: 'HKD',\n value: 'HKD',\n },\n ],\n filterMode: 'multiple',\n explanation: '提示信息',\n width: 110,\n },\n {\n title: '完成进度',\n dataIndex: 'percent',\n formatType: 'progress',\n },\n {\n title: '到账日期',\n dataIndex: 'date',\n formatType: 'date',\n },\n ],\n },\n },\n },\n ],\n};\n\nexport default editTableMeta;\n"
},
{
"path": "packages/fusion-ui/lowcode/expand-table/meta.ts",
"content": "import { ComponentMetadata, Snippet } from '@ali/lowcode-types';\nimport { proTableMeta } from '../pro-table/pro-table-meta';\nimport { mockProTableRow, mockId } from '../pro-table/utils';\nimport { isJSExpression } from '../utils';\n\nconst childProps = proTableMeta.configure.props.map((item) => {\n if (item.name === 'dataSource') {\n return {\n type: 'field',\n name: 'dataSource',\n title: '表格数据源',\n display: 'accordion',\n setter: (target) => {\n const dataSource = target.getProps().getPropValue('dataSource');\n if (isJSExpression(dataSource)) {\n return {\n componentName: 'ExpressionSetter',\n };\n }\n const current = dataSource[target.path[1]];\n const columns = current?.childTableProps?.columns;\n if (!columns || isJSExpression(columns)) {\n return {\n componentName: 'ExpressionSetter',\n };\n }\n const mockRow = mockProTableRow(columns);\n const primaryKey = target.getProps().getPropValue('primaryKey') || 'id';\n return {\n componentName: 'MixedSetter',\n props: {\n setters: [\n {\n componentName: 'ArraySetter',\n props: {\n itemSetter: {\n componentName: 'ObjectSetter',\n props: {\n config: {\n items: columns.map((column, index) => {\n return {\n title: {\n label: {\n type: 'i18n',\n 'en-US': column.dataIndex,\n 'zh-CN': column.title,\n },\n },\n name: column.dataIndex,\n setter: {\n isRequired: index < 2,\n componentName: 'StringSetter',\n },\n defaultValue: mockRow[column.dataIndex],\n };\n }),\n },\n },\n initialValue: () => {\n return {\n ...mockRow,\n [primaryKey]: mockId(),\n };\n },\n },\n },\n },\n 'ExpressionSetter',\n ],\n },\n };\n },\n };\n }\n return item;\n});\n\nconst props = proTableMeta.configure.props.map((item) => {\n if (item.name === 'dataSource') {\n return {\n type: 'field',\n name: 'dataSource',\n title: '表格数据源',\n display: 'accordion',\n setter: (target) => {\n const columns = target.getProps().getPropValue('columns');\n if (!columns || isJSExpression(columns)) {\n return {\n componentName: 'ExpressionSetter',\n };\n }\n const mockRow = mockProTableRow(columns);\n const primaryKey = target.getProps().getPropValue('primaryKey') || 'id';\n return {\n componentName: 'MixedSetter',\n props: {\n setters: [\n {\n componentName: 'ArraySetter',\n props: {\n itemSetter: {\n componentName: 'ObjectSetter',\n props: {\n config: {\n items: [\n ...columns.map((column, index) => {\n return {\n title: {\n label: {\n type: 'i18n',\n 'en-US': column.dataIndex,\n 'zh-CN': column.title,\n },\n },\n name: column.dataIndex,\n setter: {\n isRequired: index < 2,\n componentName: 'StringSetter',\n },\n defaultValue: mockRow[column.dataIndex],\n };\n }),\n {\n title: {\n label: { type: 'i18n', 'en-US': 'ChildTable', 'zh-CN': '子表格配置' },\n },\n display: 'accordion',\n name: 'childTableProps',\n setter: {\n componentName: 'ObjectSetter',\n props: {\n config: {\n items: childProps,\n },\n },\n },\n },\n ],\n },\n },\n initialValue: () => {\n return {\n ...mockRow,\n [primaryKey]: mockId(),\n };\n },\n },\n },\n },\n 'ExpressionSetter',\n ],\n },\n };\n },\n };\n }\n return item;\n});\n\nconst ExpandTableMeta: ComponentMetadata = {\n componentName: 'ExpandTable',\n title: '母子表格',\n docUrl: '',\n screenshot:\n 'https://img.alicdn.com/imgextra/i4/O1CN01N3gxxr1cjKnzi9iBU_!!6000000003636-55-tps-56-56.svg',\n devMode: 'proCode',\n group: '精选组件',\n category: '表格类',\n tags: ['业务组件'],\n npm: {\n package: '@alifd/fusion-ui',\n version: '0.1.6-beta.8',\n exportName: 'ExpandTable',\n main: 'lib/index.js',\n destructuring: true,\n subName: '',\n },\n configure: {\n props,\n supports: {\n className: true,\n style: true,\n events: [\n {\n name: 'onBodyScroll',\n description: '在内容区域滚动的时候触发的函数',\n },\n ],\n },\n component: {},\n },\n};\nconst snippets: Snippet[] = [\n {\n title: '母子表格',\n screenshot:\n 'https://img.alicdn.com/imgextra/i4/O1CN01N3gxxr1cjKnzi9iBU_!!6000000003636-55-tps-56-56.svg',\n schema: {\n componentName: 'ExpandTable',\n props: {\n dataSource: [\n {\n id: 'id-2f5DdE2b-0',\n date: '2013-06-12',\n percent: 1.862,\n documentAmount: 2022,\n currency: 'CNY',\n company: '支付宝科技有限公司',\n childTableProps: {\n dataSource: [],\n columns: [\n {\n title: '公司',\n dataIndex: 'company',\n width: 160,\n formatType: 'link',\n searchable: true,\n },\n {\n title: '单据金额',\n dataIndex: 'documentAmount',\n formatType: 'money',\n },\n {\n title: '币种',\n dataIndex: 'currency',\n formatType: 'currency',\n filters: [\n {\n label: 'CNY',\n value: 'CNY',\n },\n {\n label: 'USD',\n value: 'USD',\n },\n {\n label: 'JPY',\n value: 'JPY',\n },\n {\n label: 'HKD',\n value: 'HKD',\n },\n ],\n filterMode: 'multiple',\n explanation: '提示信息',\n width: 110,\n },\n {\n title: '完成进度',\n dataIndex: 'percent',\n formatType: 'progress',\n },\n {\n title: '到账日期',\n dataIndex: 'date',\n formatType: 'date',\n },\n ],\n },\n },\n {\n id: 'id-2f5DdE2b-1',\n date: '2013-06-12',\n percent: 1.862,\n documentAmount: 2022,\n currency: 'CNY',\n company: '支付宝科技有限公司',\n childTableProps: {\n dataSource: [],\n columns: [\n {\n title: '公司',\n dataIndex: 'company',\n width: 160,\n formatType: 'link',\n searchable: true,\n },\n {\n title: '单据金额',\n dataIndex: 'documentAmount',\n formatType: 'money',\n },\n {\n title: '币种',\n dataIndex: 'currency',\n formatType: 'currency',\n filters: [\n {\n label: 'CNY',\n value: 'CNY',\n },\n {\n label: 'USD',\n value: 'USD',\n },\n {\n label: 'JPY',\n value: 'JPY',\n },\n {\n label: 'HKD',\n value: 'HKD',\n },\n ],\n filterMode: 'multiple',\n explanation: '提示信息',\n width: 110,\n },\n {\n title: '完成进度',\n dataIndex: 'percent',\n formatType: 'progress',\n },\n {\n title: '到账日期',\n dataIndex: 'date',\n formatType: 'date',\n },\n ],\n },\n },\n {\n id: 'id-2f5DdE2b-2',\n date: '2013-06-12',\n percent: 1.862,\n documentAmount: 2022,\n currency: 'CNY',\n company: '支付宝科技有限公司',\n childTableProps: {\n dataSource: [],\n columns: [\n {\n title: '公司',\n dataIndex: 'company',\n width: 160,\n formatType: 'link',\n searchable: true,\n },\n {\n title: '单据金额',\n dataIndex: 'documentAmount',\n formatType: 'money',\n },\n {\n title: '币种',\n dataIndex: 'currency',\n formatType: 'currency',\n filters: [\n {\n label: 'CNY',\n value: 'CNY',\n },\n {\n label: 'USD',\n value: 'USD',\n },\n {\n label: 'JPY',\n value: 'JPY',\n },\n {\n label: 'HKD',\n value: 'HKD',\n },\n ],\n filterMode: 'multiple',\n explanation: '提示信息',\n width: 110,\n },\n {\n title: '完成进度',\n dataIndex: 'percent',\n formatType: 'progress',\n },\n {\n title: '到账日期',\n dataIndex: 'date',\n formatType: 'date',\n },\n ],\n },\n },\n ],\n actionColumnButtons: {\n dataSource: [\n {\n children: '查看',\n type: 'primary',\n },\n {\n children: '编辑',\n type: 'primary',\n disabled: true,\n },\n {\n children: '删除',\n type: 'primary',\n },\n ],\n text: true,\n visibleButtonCount: 3,\n },\n actionBarButtons: {\n dataSource: [\n {\n type: 'primary',\n children: '操作一',\n },\n {\n type: 'normal',\n children: '操作二',\n },\n ],\n visibleButtonCount: 3,\n },\n paginationProps: {\n pageSize: 20,\n current: 1,\n },\n settingButtons: true,\n columns: [\n {\n title: '公司',\n dataIndex: 'company',\n width: 160,\n formatType: 'link',\n searchable: true,\n },\n {\n title: '单据金额',\n dataIndex: 'documentAmount',\n formatType: 'money',\n },\n {\n title: '币种',\n dataIndex: 'currency',\n formatType: 'currency',\n filters: [\n {\n label: 'CNY',\n value: 'CNY',\n },\n {\n label: 'USD',\n value: 'USD',\n },\n {\n label: 'JPY',\n value: 'JPY',\n },\n {\n label: 'HKD',\n value: 'HKD',\n },\n ],\n filterMode: 'multiple',\n explanation: '提示信息',\n width: 110,\n },\n {\n title: '完成进度',\n dataIndex: 'percent',\n formatType: 'progress',\n },\n {\n title: '到账日期',\n dataIndex: 'date',\n formatType: 'date',\n },\n ],\n },\n },\n },\n];\n\nexport default {\n ...ExpandTableMeta,\n snippets,\n};\n"
},
{
"path": "packages/fusion-ui/lowcode/filter/meta.ts",
"content": "import { ComponentMetadata, Snippet } from '@ali/lowcode-types';\nimport { formItemsProps } from '../pro-form/common/form-base-props';\nimport { showWithLabelAlign } from '../utils';\nimport { operations } from '../common';\n\nconst operationConfig = {\n name: 'operationConfig',\n display: 'accordion',\n title: '底部操作',\n setter: {\n componentName: 'ObjectSetter',\n props: {\n config: {\n items: [\n {\n name: 'visibleButtonCount',\n title: {\n label: '可见数量',\n tip: '超过会收起到”更多“菜单中',\n },\n extraProps: {\n defaultValue: 3,\n },\n setter: {\n componentName: 'NumberSetter',\n props: {\n max: 6,\n min: 1,\n },\n },\n },\n ],\n },\n },\n },\n};\n\nconst FilterMeta: ComponentMetadata = {\n componentName: 'Filter',\n title: '查询筛选',\n group: '精选组件',\n category: '表格类',\n tags: ['业务组件'],\n docUrl: '',\n icon: 'https://img.alicdn.com/imgextra/i1/O1CN01O4Oshp1RA6Z0sFZ6h_!!6000000002070-55-tps-56-56.svg',\n devMode: 'proCode',\n npm: {\n package: '@alifd/fusion-ui',\n version: '0.1.6-beta.8',\n exportName: 'Filter',\n main: 'lib/index.js',\n destructuring: true,\n subName: '',\n },\n configure: {\n props: [\n {\n name: 'globalConfig',\n title: '全局配置',\n type: 'group',\n display: 'accordion',\n items: [\n {\n name: 'enableFilterConfiguration',\n title: '开启筛选项',\n setter: 'BoolSetter',\n },\n {\n name: 'status',\n title: '状态',\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: [\n {\n title: '只读态',\n value: 'readonly',\n },\n {\n title: '编辑态',\n value: 'editable',\n },\n ],\n },\n },\n getValue: (target) => {\n const isPreview = target.getProps().getPropValue('isPreview');\n return isPreview ? 'readonly' : 'editable';\n },\n setValue: (target, value) => {\n target.getProps().setPropValue('isPreview', value === 'readonly');\n },\n defaultValue: 'editable',\n },\n {\n name: 'isPreview',\n condition: () => false,\n title: {\n label: {\n type: 'i18n',\n zh_CN: '预览态',\n en_US: 'Preview Mode',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: isPreview | 说明: 是否开启预览态',\n en_US: 'prop: isPreview | description: preview mode',\n },\n },\n setter: 'BoolSetter',\n },\n {\n name: 'cols',\n title: '布局',\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: [\n {\n title: '一列',\n value: 1,\n },\n {\n title: '二列',\n value: 2,\n },\n {\n title: '三列',\n value: 3,\n },\n {\n title: '四列',\n value: 4,\n },\n ],\n },\n },\n defaultValue: 4,\n },\n {\n name: 'labelAlign',\n title: {\n label: {\n type: 'i18n',\n zh_CN: '标签位置',\n en_US: 'Label Align',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: labelAlign | 说明: 标签的位置\\n@enum desc 上, 左, 内',\n en_US: 'prop: labelAlign | description: label align',\n },\n },\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: [\n {\n title: '上',\n value: 'top',\n },\n {\n title: '左',\n value: 'left',\n },\n {\n title: '内',\n value: 'inset',\n },\n ],\n },\n },\n setValue: (target, value) => {\n if (value === 'inset') {\n target.getProps().setPropValue('labelCol', null);\n target.getProps().setPropValue('wrapperCol', null);\n } else if (value === 'left') {\n target.getProps().setPropValue('labelCol', { fixedSpan: 4 });\n target.getProps().setPropValue('wrapperCol', null);\n }\n return target.getProps().setPropValue('labelAlign', value);\n },\n defaultValue: 'top',\n },\n {\n name: 'labelCol.fixedSpan',\n title: '标题宽度',\n condition: showWithLabelAlign,\n setter: {\n componentName: 'NumberSetter',\n props: {\n min: 0,\n max: 24,\n },\n },\n },\n {\n name: 'labelCol.offset',\n title: '标题偏移',\n condition: showWithLabelAlign,\n setter: {\n componentName: 'NumberSetter',\n props: {\n min: 0,\n max: 24,\n },\n },\n },\n {\n name: 'wrapperCol.span',\n title: '内容宽度',\n condition: showWithLabelAlign,\n setter: {\n componentName: 'NumberSetter',\n props: {\n min: 0,\n max: 24,\n },\n },\n },\n {\n name: 'wrapperCol.offset',\n title: '内容偏移',\n condition: showWithLabelAlign,\n setter: {\n componentName: 'NumberSetter',\n props: {\n min: 0,\n max: 24,\n },\n },\n },\n {\n name: 'labelTextAlign',\n condition: showWithLabelAlign,\n title: {\n label: {\n type: 'i18n',\n zh_CN: '标签对齐',\n en_US: 'Text Align',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: labelTextAlign | 说明: 标签的左右对齐方式\\n@enumdesc 左, 右',\n en_US: 'prop: labelTextAlign | description: label text align',\n },\n },\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: ['left', 'right'],\n },\n },\n defaultValue: 'right',\n },\n ],\n },\n formItemsProps,\n operationConfig,\n operations,\n ],\n supports: {\n style: true,\n className: true,\n events: ['onExpand', 'onSearch', 'onReset'],\n },\n component: {\n isMinimalRenderUnit: true,\n },\n },\n};\nconst snippets: Snippet[] = [\n {\n title: '查询筛选',\n screenshot:\n 'https://img.alicdn.com/imgextra/i1/O1CN01O4Oshp1RA6Z0sFZ6h_!!6000000002070-55-tps-56-56.svg',\n schema: {\n componentName: 'Filter',\n id: 'node_ockt5mo4jj1',\n props: {\n labelAlign: 'top',\n },\n children: [...new Array(4).keys()].map((item) => ({\n componentName: 'FormInput',\n props: {\n formItemProps: {\n primaryKey: String(Math.floor(Math.random() * 10000) + item),\n label: '表单项',\n size: 'medium',\n device: 'desktop',\n fullWidth: true,\n },\n placeholder: '请输入',\n },\n })),\n },\n },\n];\n\nexport default {\n ...FilterMeta,\n snippets,\n};\n"
},
{
"path": "packages/fusion-ui/lowcode/filter-item/meta.ts",
"content": "import { ComponentMetadata } from '@ali/lowcode-types';\n\nconst FilterItemMeta: ComponentMetadata = {\n componentName: 'FilterItem',\n title: 'FilterItem',\n docUrl: '',\n screenshot: '',\n devMode: 'proCode',\n npm: {\n package: '@alifd/fusion-ui',\n version: '0.1.6-beta.8',\n exportName: 'FilterItem',\n main: 'lib/index.js',\n destructuring: true,\n subName: '',\n },\n configure: {\n props: [\n {\n title: {\n label: {\n type: 'i18n',\n 'en-US': 'prefix',\n 'zh-CN': '样式前缀',\n },\n tip: 'prefix | 样式前缀',\n },\n name: 'prefix',\n description: '样式前缀',\n setter: {\n componentName: 'StringSetter',\n isRequired: false,\n initialValue: '',\n },\n },\n {\n title: {\n label: {\n type: 'i18n',\n 'en-US': 'label',\n 'zh-CN': 'label 标签的文',\n },\n tip: 'label | label 标签的文本',\n },\n name: 'label',\n description: 'label 标签的文本',\n setter: {\n componentName: 'StringSetter',\n isRequired: false,\n initialValue: '',\n },\n },\n {\n title: {\n label: {\n type: 'i18n',\n 'en-US': 'labelCol',\n 'zh-CN': 'label 标签布局',\n },\n tip: 'labelCol | label 标签布局，通 `) => void',\n },\n },\n {\n name: 'className',\n propType: 'string',\n },\n {\n name: 'ghost',\n propType: 'bool',\n },\n ],\n },\n },\n {\n name: 'defaultDom',\n propType: 'node',\n },\n ],\n raw: '(props: PageHeaderProps, defaultDom: ReactNode) => ReactNode',\n },\n },\n {\n name: 'tags',\n propType: {\n type: 'oneOfType',\n value: [\n 'object',\n {\n type: 'arrayOf',\n value: 'object',\n },\n ],\n },\n },\n {\n name: 'footer',\n propType: 'node',\n },\n {\n name: 'extra',\n propType: 'node',\n },\n {\n name: 'avatar',\n propType: 'object',\n },\n {\n name: 'onBack',\n propType: {\n type: 'func',\n params: [\n {\n name: 'e',\n propType: 'object',\n },\n ],\n raw: '(e?: MouseEvent) => void',\n },\n },\n {\n name: 'className',\n propType: 'string',\n },\n {\n name: 'ghost',\n propType: 'bool',\n },\n ],\n configure: {\n component: {\n isContainer: true,\n },\n props,\n },\n snippets: [\n {\n title: 'PageHeader',\n screenshot:\n 'https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_message.png',\n schema: {\n title: 'PageHeader',\n componentName: 'PageHeader',\n props: {\n placeholderStyle: {\n height: '38px',\n color: '#0088FF',\n background: '#d8d8d836',\n border: 0,\n },\n placeholder: '',\n title: 'This is a designer title',\n subTitle: '',\n breadcrumb: ['首页', '列表'],\n },\n },\n },\n ],\n};\n"
},
{
"path": "packages/fusion-ui/lowcode/page-header/meta.ts",
"content": "import { ComponentMetadata, Snippet } from '@ali/lowcode-types';\nimport { operations } from '../common';\nimport props from './common/props';\n\nconst PageHeaderMeta: ComponentMetadata = {\n componentName: 'PageHeader',\n category: '布局容器类',\n group: '精选组件',\n title: '页头',\n docUrl: '',\n icon: 'https://img.alicdn.com/imgextra/i2/O1CN01q3ZRHx24rrQ9ysyU8_!!6000000007445-55-tps-56-56.svg',\n devMode: 'procode',\n npm: {\n package: '@alifd/fusion-ui',\n version: '1.0.0',\n exportName: 'PageHeader',\n main: 'lib/index.js',\n destructuring: true,\n subName: '',\n },\n props: [\n {\n name: 'backIcon',\n propType: 'node',\n },\n {\n name: 'prefixCls',\n propType: 'string',\n },\n {\n name: 'title',\n propType: 'node',\n },\n {\n name: 'subTitle',\n propType: 'node',\n },\n {\n name: 'style',\n propType: 'object',\n },\n {\n name: 'breadcrumb',\n propType: {\n type: 'oneOfType',\n value: ['object'],\n },\n },\n {\n name: 'breadcrumbRender',\n propType: {\n type: 'func',\n params: [\n {\n name: 'props',\n propType: {\n type: 'shape',\n value: [\n {\n name: 'backIcon',\n propType: 'node',\n },\n {\n name: 'prefixCls',\n propType: 'string',\n },\n {\n name: 'title',\n propType: 'node',\n },\n {\n name: 'subTitle',\n propType: 'node',\n },\n {\n name: 'style',\n propType: 'object',\n },\n {\n name: 'breadcrumb',\n propType: {\n type: 'oneOfType',\n value: ['object'],\n },\n },\n {\n name: 'breadcrumbRender',\n propType: 'object',\n },\n {\n name: 'tags',\n propType: {\n type: 'oneOfType',\n value: [\n 'object',\n {\n type: 'arrayOf',\n value: 'object',\n },\n ],\n },\n },\n {\n name: 'footer',\n propType: 'node',\n },\n {\n name: 'extra',\n propType: 'node',\n },\n {\n name: 'avatar',\n propType: 'object',\n },\n {\n name: 'onBack',\n propType: {\n type: 'func',\n params: [\n {\n name: 'e',\n propType: 'object',\n },\n ],\n raw: '(e?: MouseEvent) => void',\n },\n },\n {\n name: 'className',\n propType: 'string',\n },\n {\n name: 'ghost',\n propType: 'bool',\n },\n ],\n },\n },\n {\n name: 'defaultDom',\n propType: 'node',\n },\n ],\n raw: '(props: PageHeaderProps, defaultDom: ReactNode) => ReactNode',\n },\n },\n {\n name: 'tags',\n propType: {\n type: 'oneOfType',\n value: [\n 'object',\n {\n type: 'arrayOf',\n value: 'object',\n },\n ],\n },\n },\n {\n name: 'footer',\n propType: 'node',\n },\n {\n name: 'extra',\n propType: 'node',\n },\n {\n name: 'avatar',\n propType: 'object',\n },\n {\n name: 'onBack',\n propType: {\n type: 'func',\n params: [\n {\n name: 'e',\n propType: 'object',\n },\n ],\n raw: '(e?: MouseEvent) => void',\n },\n },\n {\n name: 'className',\n propType: 'string',\n },\n {\n name: 'ghost',\n propType: 'bool',\n },\n ],\n configure: {\n component: {\n isContainer: false,\n },\n props: [\n ...props,\n Object.assign({}, operations, {\n condition: (target) => {\n const showAction = target.getProps().getPropValue('showActions');\n return !!showAction;\n },\n }),\n ],\n },\n};\n\nconst snippets: Snippet[] = [\n {\n title: '页头',\n screenshot:\n 'https://img.alicdn.com/imgextra/i2/O1CN01q3ZRHx24rrQ9ysyU8_!!6000000007445-55-tps-56-56.svg',\n schema: {\n componentName: 'PageHeader',\n title: '页头',\n props: {\n title: 'This is a designer title',\n subTitle: '',\n breadcrumb: ['首页', '列表'],\n operations: [\n {\n content: '自定义',\n action: 'custom',\n type: 'secondary',\n },\n {\n content: '自定义',\n action: 'custom',\n type: 'secondary',\n },\n ],\n },\n },\n },\n];\n\nexport default {\n ...PageHeaderMeta,\n snippets,\n};\n"
},
{
"path": "packages/fusion-ui/lowcode/pie-chart/meta.ts",
"content": "import { IPublicTypeComponentMetadata, IPublicTypeConfigure } from '@alilc/lowcode-types';\nimport { actionConfigure } from '../common/chart-action';\nimport { plotConfigure } from '../common/chart-plot';\n\nconst pieChartMeta: IPublicTypeComponentMetadata = {\n componentName: 'PieChart',\n title: '饼图',\n category: '图表',\n group: '精选组件',\n docUrl: '',\n screenshot: '',\n devMode: 'proCode',\n npm: {\n package: '@alifd/fusion-ui',\n version: '0.1.3-beta.3',\n exportName: 'PieChart',\n main: 'lib/index.js',\n destructuring: true,\n subName: '',\n },\n configure: {\n props: [\n // 图例\n {\n name: 'legend',\n type: 'group',\n display: 'accordion',\n title: {\n label: '图例',\n },\n items: [\n {\n name: 'legend.position',\n title: '位置',\n setter: {\n componentName: 'SelectSetter',\n props: {\n options: [\n { title: '左', value: 'left' },\n { title: '左上', value: 'left-top' },\n { title: '左下', value: 'left-bottom' },\n { title: '右', value: 'right' },\n { title: '右上', value: 'right-top' },\n { title: '右下', value: 'right-bottom' },\n { title: '上', value: 'top' },\n { title: '上左', value: 'top-left' },\n { title: '上右', value: 'top-right' },\n { title: '下', value: 'bottom' },\n { title: '下左', value: 'bottom-left' },\n { title: '下右', value: 'bottom-right' },\n ],\n },\n },\n },\n ],\n },\n // 数据\n {\n name: 'data',\n type: 'group',\n display: 'accordion',\n title: {\n label: '数据',\n },\n items: [\n {\n name: 'data',\n title: '图表数据',\n setter: 'JsonSetter',\n },\n {\n name: 'angleField',\n title: {\n label: '值字段名',\n tip: '扇形切片大小（弧度）所对应的数据字段名',\n },\n setter: 'StringSetter',\n },\n {\n name: 'colorField',\n title: {\n label: '分类字段名',\n tip: '扇形颜色映射对应的数据字段名',\n },\n setter: 'StringSetter',\n },\n ],\n },\n // 图形属性\n {\n name: '',\n type: 'group',\n display: 'accordion',\n title: {\n label: '图形属性',\n },\n items: [\n {\n name: 'color',\n title: '颜色',\n setter: {\n componentName: 'ArraySetter',\n props: {\n itemSetter: {\n componentName: 'ColorSetter',\n initialValue: '#0079f2',\n },\n },\n },\n },\n {\n name: 'label',\n type: 'group',\n display: 'accordion',\n title: {\n label: '标签',\n },\n items: [\n {\n name: 'label.visible',\n title: '显示',\n setter: 'BoolSetter',\n },\n {\n name: 'label.type',\n title: '位置',\n setter: {\n componentName: 'SelectSetter',\n props: {\n options: [\n { title: '内部', value: 'inner' },\n { title: '外部', value: 'outer' },\n { title: '外部圆形排布', value: 'outer-center' },\n { title: '蜘蛛布局', value: 'spider' },\n ],\n },\n },\n },\n ],\n },\n ...plotConfigure,\n ...actionConfigure,\n ],\n },\n ],\n },\n};\n\nconst snippets = [\n {\n title: '饼图',\n name: 'PieChart',\n screenshot:\n 'https://img.alicdn.com/imgextra/i4/O1CN018rBRGK24fx7hzkITN_!!6000000007419-55-tps-56-56.svg',\n schema: {\n componentName: 'PieChart',\n title: '饼图',\n props: {\n legend: {\n position: 'top-left',\n },\n data: [\n { year: '1991', value: 72345678 },\n { year: '1992', value: 4321132 },\n { year: '1993', value: 33121112.5 },\n { year: '1994', value: 45227221 },\n { year: '1995', value: 4321221.9 },\n { year: '1996', value: 6322121 },\n { year: '1997', value: 78312213 },\n { year: '1998', value: 2192312 },\n { year: '1999', value: 6212332 },\n { year: '2000', value: 1192312 },\n ],\n angleField: 'value',\n colorField: 'year',\n label: {\n visible: true,\n type: 'spider',\n },\n color: ['#3BCBD1', '#47A4FE', '#EDBA42', '#F4704E', '#ED6899', '#7F62C3', '#6E7BC9'],\n },\n },\n },\n];\nexport default {\n ...pieChartMeta,\n snippets\n};\n"
},
{
"path": "packages/fusion-ui/lowcode/pro-dialog/meta.ts",
"content": "import { ComponentMetadata, Snippet } from '@ali/lowcode-types';\nimport { hideProp } from '../utils';\nimport { operationProps } from '../common';\n\nconst ProDialogMeta: ComponentMetadata = {\n componentName: 'ProDialog',\n title: '对话框',\n group: '精选组件',\n docUrl: '',\n screenshot:\n 'https://img.alicdn.com/imgextra/i1/O1CN01n5JLZG1aBmYZlckSx_!!6000000003292-55-tps-56-56.svg',\n devMode: 'proCode',\n npm: {\n package: '@alifd/fusion-ui',\n version: '0.1.6-beta.23',\n exportName: 'ProDialog',\n main: 'lib/index.js',\n destructuring: true,\n subName: '',\n },\n configure: {\n component: {\n isContainer: true,\n isModal: true,\n rootSelector: 'div.next-dialog',\n nestingRule: {\n parentWhitelist: ['Page'],\n },\n },\n props: [\n {\n name: 'ref',\n condition: hideProp,\n setter: (target) => {\n if (!target?.getValue()) {\n target?.setValue(`pro-dialog-${target?.id}`);\n }\n return 'StringSetter';\n },\n },\n {\n name: 'dialogType',\n title: '弹窗类型',\n defaultValue: 'normal',\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: [\n {\n title: '提示弹窗',\n value: 'notice',\n },\n {\n title: '普通弹窗',\n value: 'normal',\n },\n ],\n },\n },\n },\n {\n name: 'status',\n title: '提示状态',\n condition: (target) => {\n return target.getProps().getPropValue('dialogType') === 'notice';\n },\n defaultValue: 'success',\n setter: {\n componentName: 'SelectSetter',\n props: {\n options: [\n {\n title: '提醒',\n value: 'notice',\n },\n {\n title: '警告',\n value: 'warning',\n },\n {\n title: '确认',\n value: 'help',\n },\n {\n title: '成功',\n value: 'success',\n },\n {\n title: '失败',\n value: 'error',\n },\n {\n title: '加载中',\n value: 'loading',\n },\n ],\n },\n },\n },\n {\n name: 'title',\n title: '标题',\n setter: () => {\n const hasTitleSetter = AliLowCodeEngine.setters.getSetter('TitleSetter');\n return hasTitleSetter\n ? {\n componentName: 'TitleSetter',\n props: {\n defaultChecked: true,\n },\n }\n : 'StringSetter';\n },\n defaultValue: 'Title',\n },\n {\n name: 'size',\n title: '弹窗尺寸',\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: [\n {\n title: '大',\n value: 'large',\n },\n {\n title: '中',\n value: 'medium',\n },\n {\n title: '小',\n value: 'small',\n },\n ],\n },\n },\n },\n {\n name: 'visible',\n title: '默认显示',\n setter: 'BoolSetter',\n defaultValue: false,\n },\n {\n name: 'hasTips',\n title: '提示信息',\n setter: 'BoolSetter',\n defaultValue: false,\n },\n {\n name: 'iconType',\n title: '提示图标',\n setter: {\n componentName: 'IconSetter',\n },\n condition: (target) => {\n const showExplanation = target.getProps().getPropValue('hasTips');\n return !!showExplanation;\n },\n },\n {\n name: 'explanation',\n title: '解释文案',\n setter: {\n componentName: 'StringSetter',\n },\n condition: (target) => {\n const showExplanation = target.getProps().getPropValue('hasTips');\n return !!showExplanation;\n },\n },\n {\n name: 'hasMask',\n title: '显示遮罩',\n setter: 'BoolSetter',\n defaultValue: true,\n },\n {\n name: 'closeMode',\n title: '关闭方式',\n setter: {\n componentName: 'SelectSetter',\n props: {\n mode: 'tag',\n options: [\n {\n title: '点击按钮',\n value: 'close',\n },\n {\n title: '点击遮罩',\n value: 'mask',\n },\n {\n title: 'ESC',\n value: 'esc',\n },\n ],\n },\n },\n defaultValue: ['close'],\n },\n {\n name: 'autoFocus',\n title: '自动聚焦',\n setter: 'BoolSetter',\n defaultValue: false,\n },\n ...operationProps,\n {\n name: 'buttons',\n title: '底部按钮配置',\n type: 'group',\n condition: hideProp,\n extraProps: {\n display: 'block',\n },\n items: [\n {\n name: 'footer',\n title: '是否显示',\n setter: 'BoolSetter',\n initialValue: true,\n },\n {\n name: 'footerAlign',\n title: '对齐方式',\n initialValue: 'right',\n condition: (target) => {\n return target.getProps().getPropValue('footer');\n },\n setter: {\n componentName: 'RadioGroupSetter',\n initialValue: 'right',\n props: {\n options: [\n {\n title: 'left',\n value: 'left',\n },\n {\n title: 'center',\n value: 'center',\n },\n {\n title: 'right',\n value: 'right',\n },\n ],\n },\n },\n },\n {\n name: 'footerActions',\n title: '排列方式',\n initialValue: ['ok', 'cancel'],\n condition: (target) => {\n return target.getProps().getPropValue('footer');\n },\n setter: {\n componentName: 'SelectSetter',\n initialValue: ['ok', 'cancel'],\n props: {\n options: [\n {\n title: 'ok, cancel',\n value: ['ok', 'cancel'],\n },\n {\n title: 'cancel, ok',\n value: ['cancel', 'ok'],\n },\n {\n title: 'cancel',\n value: ['cancel'],\n },\n {\n title: 'ok',\n value: ['ok'],\n },\n ],\n },\n },\n },\n ],\n },\n ],\n supports: {\n events: ['onOk', 'onCancel', 'onClose'],\n style: true,\n },\n advanced: {\n callbacks: {\n // 与 next-page 的 onNodeAdd 一模一样\n onNodeAdd: (dragment, currentNode) => {\n // 拖入的组件为 P、Block、Slot（把NextPage拖入到面板里时，NextPage的Slot也会触发onNodeAdd事件） 时,不进行包裹\n // 拖入的组件 isModal为true时（例如drawer dialog 这类有单独组件树结构的），不进行包裹\n if (\n !dragment ||\n ['NextP', 'NextBlock', 'Slot'].includes(dragment.componentName) ||\n (dragment.componentMeta.isModal && dragment.componentMeta.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.exportSchema()],\n };\n\n // 为目标元素包裹一层 Block\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.canvas;\n\n if (!dropLocation) {\n // 没有 dropLocation 一般是 slot, slot 元素不用特殊处理 不做任何包裹\n return;\n }\n const dropTarget = dropLocation.target;\n const dropTargetName = dropLocation.target.componentName || '';\n\n // 找到要拖入进去的节点 ID\n const targetId = (dropLocation && dropLocation.target.id) || '';\n // 找到要拖入进去的节点\n const slotTarget =\n currentNode.slots.length > 0 && currentNode.slots.find((item) => item.id === targetId);\n\n const layoutPNode = currentNode.document.createNode(layoutPSchema);\n\n // 是否为 aside slot\n const isAsideSlot = slotTarget && ['aside'].indexOf(slotTarget._slotFor.key) > -1;\n // 是否为需要被 P 包裹的 Slot\n const isNeedPSlot =\n slotTarget && ['header', 'footer', 'nav'].indexOf(slotTarget._slotFor.key) > -1;\n\n const wrapWithBlock = (curDragMent, node, curDropTargetName, blockLen) => {\n setTimeout(() => {\n console.log(\n `[${curDragMent.componentName}] to [${curDropTargetName}] need to wrap with NextBlock > NextBlockCell > NextP [from NextPage2]`,\n );\n const newNode = node.document.createNode(layoutBlockNode(blockLen).exportSchema());\n node.insertBefore(newNode, curDragMent, false);\n curDragMent.remove(false);\n newNode.children.get(0).children.get(0).children.get(0).select();\n }, 1);\n };\n\n const wrapWithP = (curDragMent, node, curDropTargetName) => {\n setTimeout(() => {\n // const dragmentTarget = dropTarget;\n // 要拖入的地方如果是 NextP 那就 不再自动包裹 P了\n if (dropTargetName === 'NextP') {\n console.log(\n `[${curDragMent.componentName}] to [${curDropTargetName}] does't need to wrap with NextP. [from NextPage3]`,\n );\n return;\n }\n\n console.log(\n `[${curDragMent.componentName}] to [${dropTargetName}] need to wrap with NextP [from NextPage3]`,\n );\n const newNode = node.document.createNode(Object.assign(layoutPNode.exportSchema()));\n node.insertBefore(newNode, curDragMent, false);\n curDragMent.remove(false);\n newNode.children.get(0).select();\n }, 1);\n };\n\n // 需要包裹 Block BlockCell P 的情况：\n // 1. 组件拖入到 NextPage，的直接子元素下(不包括slot), 此时Block宽度为12\n if (['NextPage'].includes(dropTargetName) && currentNode.children.has(dragment)) {\n wrapWithBlock(dragment, currentNode, dropTargetName, 12);\n\n // 需要包裹 Block BlockCell P 的情况：\n // 2. 组件拖入到 NextPage 的 aside slot, 的直接子元素下 （不包括slot下的进一步内容），此时Block宽度为1\n } else if (isAsideSlot && slotTarget && slotTarget.children.has(dragment)) {\n wrapWithBlock(dragment, slotTarget, dropTargetName, 1);\n\n // 需要包裹 P 的情况：\n // 1. 如果是处于，开启了自然布局模式的容器组件中 (或者Tab里)\n // 这里的Tab主要是给纪元epoch使用的，因为他们用到了 @ali/vc-deep 的TabLayout组件，没办法在这个组件上再增加属性 isAutoContainer\n } else if (dropTarget.getPropValue('isAutoContainer') || dropTargetName === 'Tab.Item') {\n wrapWithP(dragment, dropTarget, dropTargetName);\n\n // 需要包裹 P 的情况：\n // 2. 如果是处于，Page 的 nav header footer 中\n } else if (isNeedPSlot && slotTarget) {\n wrapWithP(dragment, slotTarget, dropTargetName);\n }\n\n // 其他维持原状，不进行其他设置\n },\n },\n },\n },\n icon: 'https://img.alicdn.com/imgextra/i1/O1CN01n5JLZG1aBmYZlckSx_!!6000000003292-55-tps-56-56.svg',\n category: '布局容器类',\n};\nconst snippets: Snippet[] = [\n {\n title: '高级对话框',\n screenshot:\n 'https://img.alicdn.com/imgextra/i1/O1CN01n5JLZG1aBmYZlckSx_!!6000000003292-55-tps-56-56.svg',\n schema: {\n componentName: 'ProDialog',\n props: {\n status: 'success',\n size: 'medium',\n prefix: 'next-',\n footerAlign: 'right',\n title: 'Title',\n closeMode: ['esc', 'close'],\n hasMask: true,\n align: 'cc cc',\n minMargin: 40,\n isAutoContainer: true,\n visible: true,\n iconType: 'prompt',\n explanation: '提示文案',\n operationConfig: {\n align: 'right',\n },\n operations: [\n {\n action: 'ok',\n type: 'primary',\n content: '确认',\n },\n {\n action: 'cancel',\n type: 'normal',\n content: '取消',\n },\n ],\n },\n },\n },\n];\n\nexport default {\n ...ProDialogMeta,\n snippets,\n};\n"
},
{
"path": "packages/fusion-ui/lowcode/pro-drawer/meta.ts",
"content": "import { hideProp } from '../utils';\n\nimport { operationProps } from '../common';\n\nconst wrapWithBlock = (dragment, node, dropTargetName, blockLen, layoutBlockNode) => {\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(layoutBlockNode(blockLen).exportSchema());\n node.insertBefore(newNode, dragment, false);\n dragment.remove(false);\n newNode.children.get(0).children.get(0).children.get(0).select();\n }, 1);\n};\n\nconst wrapWithP = (dragment, node, dropTargetName, layoutPNode) => {\n setTimeout(() => {\n // const dragmentTarget = dropTarget;\n // 要拖入的地方如果是 NextP 那就 不再自动包裹 P了\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(Object.assign(layoutPNode.exportSchema()));\n node.insertBefore(newNode, dragment, false);\n dragment.remove(false);\n newNode.children.get(0).select();\n }, 1);\n};\n\nconst meta = {\n componentName: 'Drawer',\n title: '抽屉',\n group: '精选组件',\n docUrl: '',\n screenshot: '',\n npm: {\n package: '@alifd/fusion-ui',\n version: '0.1.6-beta.23',\n exportName: 'ProDrawer',\n main: 'lib/index.js',\n destructuring: true,\n subName: '',\n },\n configure: {\n component: {\n isContainer: true,\n isModal: true,\n rootSelector: '.next-drawer',\n nestingRule: {\n parentWhitelist: (testNode) => {\n return testNode.componentName === 'Page';\n },\n },\n },\n props: [\n {\n name: 'ref',\n condition: hideProp,\n setter: (target) => {\n if (!target?.getValue()) {\n target?.setValue(`pro-drawer-${target?.id}`);\n }\n return 'StringSetter';\n },\n },\n {\n name: 'title',\n title: {\n label: {\n type: 'i18n',\n zh_CN: '标题',\n en_US: 'Title',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: title | 说明: 标题',\n en_US: 'prop: title | description: title',\n },\n },\n setter: {\n componentName: 'StringSetter',\n },\n description: '标题',\n },\n {\n name: 'titleTip.enable',\n title: '标题提示',\n condition: (target) => {\n console.log('title: ', target.getProps().getPropValue('title'));\n return !!target.getProps().getPropValue('title');\n },\n setter: {\n componentName: 'BoolSetter',\n },\n },\n {\n name: 'titleTip.content',\n condition: (target) => {\n return target.getProps().getPropValue('titleTip.enable') === true;\n },\n title: '提示内容',\n setter: {\n componentName: 'StringSetter',\n },\n },\n {\n name: 'titleTip.icon',\n condition: (target) => {\n return target.getProps().getPropValue('titleTip.enable') === true;\n },\n title: '提示图标',\n setter: {\n componentName: 'IconSetter',\n },\n },\n {\n name: 'width',\n condition: hideProp,\n title: {\n label: {\n type: 'i18n',\n zh_CN: '宽度',\n en_US: 'width',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: width | 说明: 宽度',\n en_US: 'prop: width | description: 仅在 placement是 left right 的时候生效',\n },\n },\n setter: {\n componentName: 'NumberSetter',\n },\n description: '宽度，仅在 placement是 left right 的时候生效',\n },\n {\n name: 'height',\n condition: hideProp,\n title: {\n label: {\n type: 'i18n',\n zh_CN: '高度',\n en_US: 'height',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: height | 说明: 高度',\n en_US: 'prop: height | description: 仅在 placement是 top bottom 的时候生效',\n },\n },\n setter: {\n componentName: 'NumberSetter',\n },\n description: '高度，仅在 placement是 top bottom 的时候生效',\n },\n {\n name: 'placement',\n title: {\n label: {\n type: 'i18n',\n zh_CN: '弹出位置',\n en_US: 'height',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: placement | 说明: 位于页面的位置',\n en_US: 'prop: placement | description: drawer placement',\n },\n },\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: [\n {\n title: '上',\n value: 'top',\n },\n {\n title: '右',\n value: 'right',\n },\n {\n title: '下',\n value: 'bottom',\n },\n {\n title: '左',\n value: 'left',\n },\n ],\n },\n },\n description: '位于页面的位置',\n defaultValue: 'right',\n },\n {\n name: 'size',\n title: '尺寸',\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: [\n {\n title: '大',\n value: 'large',\n },\n {\n title: '中',\n value: 'medium',\n },\n {\n title: '小',\n value: 'small',\n },\n ],\n },\n },\n },\n {\n name: 'visible',\n title: {\n label: {\n type: 'i18n',\n zh_CN: '默认显示',\n en_US: 'visible',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: visible | 说明: 默认显示',\n en_US: 'prop: visible | description: drawer visible',\n },\n },\n setter: 'BoolSetter',\n },\n {\n name: 'hasMask',\n title: {\n label: {\n type: 'i18n',\n zh_CN: '显示遮罩',\n en_US: 'hasMask',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: hasMask | 说明: 是否显示遮罩',\n en_US: 'prop: hasMask | description: drawer hasMask',\n },\n },\n setter: {\n componentName: 'BoolSetter',\n },\n description: '是否显示遮罩',\n defaultValue: true,\n },\n {\n name: 'closeMode',\n title: '关闭方式',\n setter: {\n componentName: 'SelectSetter',\n props: {\n mode: 'multiple',\n options: [\n {\n title: '点击按钮',\n value: 'close',\n },\n {\n title: '点击遮罩',\n value: 'mask',\n },\n {\n title: 'ESC',\n value: 'esc',\n },\n ],\n },\n },\n defaultValue: ['close'],\n },\n ...operationProps,\n ],\n },\n advanced: {\n callbacks: {\n // 与 next-page 的 onNodeAdd 一模一样\n onNodeAdd: (dragment, currentNode) => {\n // 拖入的组件为 P、Block、Slot（把NextPage拖入到面板里时，NextPage的Slot也会触发onNodeAdd事件） 时,不进行包裹\n // 拖入的组件 isModal为true时（例如drawer dialog 这类有单独组件树结构的），不进行包裹\n if (\n !dragment ||\n ['NextP', 'NextBlock', 'Slot'].includes(dragment.componentName) ||\n (dragment.componentMeta.isModal && dragment.componentMeta.isModal())\n ) {\n console.log(\n `[${dragment.componentName}] does not 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.exportSchema()],\n };\n\n // 为目标元素包裹一层 Block\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.canvas;\n\n if (!dropLocation) {\n // 没有 dropLocation 一般是 slot, slot 元素不用特殊处理 不做任何包裹\n return;\n }\n const dropTarget = dropLocation.target;\n const dropTargetName = dropLocation.target.componentName || '';\n\n // 找到要拖入进去的节点 ID\n const targetId = (dropLocation && dropLocation.target.id) || '';\n // 找到要拖入进去的节点\n const slotTarget =\n currentNode.slots.length > 0 && currentNode.slots.find((item) => item.id === targetId);\n\n const layoutPNode = currentNode.document.createNode(layoutPSchema);\n\n // 是否为 aside slot\n const isAsideSlot = slotTarget && ['aside'].indexOf(slotTarget._slotFor.key) > -1;\n // 是否为需要被 P 包裹的 Slot\n const isNeedPSlot =\n slotTarget && ['header', 'footer', 'nav'].indexOf(slotTarget._slotFor.key) > -1;\n\n // 需要包裹 Block BlockCell P 的情况：\n // 1. 组件拖入到 NextPage，的直接子元素下(不包括slot), 此时Block宽度为12\n if (['NextPage'].includes(dropTargetName) && currentNode.children.has(dragment)) {\n wrapWithBlock(dragment, currentNode, dropTargetName, 12, layoutBlockNode);\n\n // 需要包裹 Block BlockCell P 的情况：\n // 2. 组件拖入到 NextPage 的 aside slot, 的直接子元素下 （不包括slot下的进一步内容），此时Block宽度为1\n } else if (isAsideSlot && slotTarget && slotTarget.children.has(dragment)) {\n wrapWithBlock(dragment, slotTarget, dropTargetName, 1, layoutBlockNode);\n\n // 需要包裹 P 的情况：\n // 1. 如果是处于，开启了自然布局模式的容器组件中 (或者Tab里)\n // 这里的Tab主要是给纪元epoch使用的，因为他们用到了 @ali/vc-deep 的TabLayout组件，没办法在这个组件上再增加属性 isAutoContainer\n } else if (dropTarget.getPropValue('isAutoContainer') || dropTargetName === 'Tab.Item') {\n wrapWithP(dragment, dropTarget, dropTargetName, layoutPNode);\n\n // 需要包裹 P 的情况：\n // 2. 如果是处于，Page 的 nav header footer 中\n } else if (isNeedPSlot && slotTarget) {\n wrapWithP(dragment, slotTarget, dropTargetName, layoutPNode);\n }\n\n // 其他维持原状，不进行其他设置\n },\n },\n },\n icon: '',\n category: '布局容器类',\n};\n\nconst snippets = [\n {\n title: '高级抽屉',\n screenshot:\n 'https://img.alicdn.com/imgextra/i3/O1CN01PIbHBa1dxMY8m44cf_!!6000000003802-55-tps-56-56.svg',\n schema: {\n componentName: 'Drawer',\n props: {\n prefix: 'next-',\n title: '高级抽屉',\n triggerType: 'click',\n closeable: true,\n placement: 'right',\n hasMask: true,\n isAutoContainer: true,\n visible: true,\n size: 'medium',\n operationConfig: {\n align: 'right',\n fixed: true,\n },\n operations: [\n {\n action: 'ok',\n type: 'primary',\n content: '确认',\n },\n {\n action: 'cancel',\n type: 'normal',\n content: '取消',\n },\n ],\n },\n },\n },\n];\n\nexport default { ...meta, snippets };\n"
},
{
"path": "packages/fusion-ui/lowcode/pro-form/common/form-base-props.ts",
"content": "import { isEqual, throttle } from 'lodash';\nimport { IPublicModelSettingField } from '@alilc/lowcode-types';\nimport { material } from '@alilc/lowcode-engine'\n\nimport { IProps } from '../../types';\nimport { formItemShortcutProps as baseFormItemProps } from './form-item-props';\nimport { hideProp, showWithLabelAlign } from '../../utils';\n\nfunction getInitialPropsForFormItem(componentName, currentComponentProps) {\n const component = material?.getAssets()?.components.filter((item) => item.componentName === componentName)[0];\n const defaultProps = {};\n const initials = component?.advanced?.initials;\n if (initials && Array.isArray(initials) && initials.length) {\n initials.forEach((initial) => {\n if (initial && initial.name && initial.initial) {\n defaultProps[initial.name] =\n typeof initial.initial === 'function' ? initial.initial() : initial.initial;\n }\n });\n }\n const props = { ...currentComponentProps };\n\n Object.keys(defaultProps).forEach((item) => {\n const propValue = currentComponentProps[item];\n if (!propValue && defaultProps[item]) {\n props[item] = defaultProps[item];\n }\n });\n return props;\n}\n\nconst itemSetValue = throttle((target: IPublicModelSettingField, value) => {\n const { node } = target;\n const mergedValueMap = {};\n const mergedValues: any = [];\n const map = {};\n if (!Array.isArray(value)) {\n value = [];\n }\n value.forEach((item) => {\n if (item.primaryKey === undefined) return;\n if (!mergedValueMap[item.primaryKey]) {\n mergedValueMap[item.primaryKey] = item;\n mergedValues.push(item);\n }\n const FormItem = Object.assign({}, item);\n if (!FormItem.componentName) {\n // 新增表单项时初始化\n FormItem.componentName = 'FormInput';\n }\n map[item.primaryKey] = FormItem;\n });\n const children = node?.children?.filter((child) => {\n if (!mergedValueMap[child.propsData?.['primaryKey']]) {\n mergedValueMap[child.propsData?.['primaryKey']] = child.propsData;\n mergedValues.push(child.propsData);\n }\n return true;\n });\n const preValue = children.map((child) => {\n return child.propsData;\n });\n if (isEqual(preValue, value)) {\n return;\n }\n node?.children?.mergeChildren(\n (child) => {\n const primaryKey =\n child.getPropValue('formItemProps')?.primaryKey || child.getPropValue('primaryKey');\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n const { componentName, componentProps, ...otherProps } = map[primaryKey];\n const newComponentProps = getInitialPropsForFormItem(componentName, componentProps);\n let newProps;\n if (child.componentName === 'ProFormItem') {\n const formItemProps = { ...(child.propsData || {}), ...otherProps };\n delete formItemProps.componentProps;\n delete formItemProps.componentName;\n newProps = {\n formItemProps,\n ...newComponentProps,\n };\n delete newProps.componentName;\n } else {\n newProps = {\n ...(child.propsData || {}),\n ...newComponentProps,\n formItemProps: otherProps,\n };\n }\n\n node.replaceChild(child, {\n componentName,\n props: newProps,\n });\n delete map[primaryKey];\n return false;\n }\n return true;\n },\n () => {\n const items: any[] = [];\n for (const primaryKey in map) {\n if (Object.hasOwnProperty.call(map, primaryKey)) {\n const { componentName, componentProps, ...otherProps } = map[primaryKey];\n const newProps = {\n formItemProps: otherProps,\n ...componentProps,\n };\n items.push({\n componentName,\n props: newProps,\n });\n }\n }\n return items;\n },\n (child1, child2) => {\n const a = mergedValues.findIndex(\n (item) =>\n String(item.primaryKey) ===\n String(\n child1.getPropValue('formItemProps')?.primaryKey || child1.getPropValue('primaryKey'),\n ),\n );\n const b = mergedValues.findIndex(\n (item) =>\n String(item.primaryKey) ===\n String(\n child2.getPropValue('formItemProps')?.primaryKey || child2.getPropValue('primaryKey'),\n ),\n );\n return a - b;\n },\n );\n});\n\nexport const formItemsProps = {\n name: '!items',\n title: '表单项',\n display: 'accordion',\n virtual: true,\n setter: {\n componentName: 'ArraySetter',\n props: {\n itemSetter: {\n componentName: 'ObjectSetter',\n props: {\n config: {\n items: [\n {\n name: 'componentName',\n title: '表单项组件',\n display: 'inline',\n defaultValue: 'FormInput',\n important: true,\n setter: () => {\n return {\n componentName: 'SelectSetter',\n props: {\n options: AliLowCodeEngine.material\n .getAssets()\n .components.filter((item) => item.isFormItemComponent)\n .map((item) => {\n return {\n title: item.title || item.componentName,\n value: item.componentName,\n };\n }),\n },\n };\n },\n },\n ...baseFormItemProps,\n ],\n },\n },\n initialValue: () => {\n const mockProps = {};\n baseFormItemProps.forEach((item) => {\n if (item.defaultValue) {\n if (typeof item.defaultValue === 'function') {\n mockProps[item.name] = item.defaultValue();\n } else {\n mockProps[item.name] = item.defaultValue;\n }\n }\n });\n return {\n componentName: 'FormInput',\n ...mockProps,\n };\n },\n },\n },\n },\n getValue: (target: IPublicModelSettingField) => {\n const hotValue = target.node?.children?.map((child) => {\n const { propsData } = child;\n // 兼容 FroFromItem -> Input 的数据结构\n if (child.componentName === 'ProFormItem') {\n const { componentProps, ...formItemProps } = propsData || {};\n return {\n ...formItemProps,\n componentProps,\n };\n } else {\n const { formItemProps, ...componentProps } = propsData || {};\n return {\n ...formItemProps,\n componentName: child.componentName,\n componentProps,\n };\n }\n });\n return hotValue;\n },\n setValue: itemSetValue,\n};\n\nconst props: IProps[] = [\n {\n name: 'ref',\n condition: hideProp,\n setter: (target) => {\n if (!target?.getValue()) {\n target?.setValue(`pro-form-${target?.id}`);\n }\n return 'StringSetter';\n },\n },\n {\n name: 'globalConfig',\n title: '全局配置',\n type: 'group',\n display: 'accordion',\n items: [\n {\n name: 'inline',\n condition: hideProp,\n title: {\n label: {\n type: 'i18n',\n zh_CN: '内联表单',\n en_US: 'Inline',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: inline | 说明: 内联表单',\n en_US: 'prop: inline | description: inline form',\n },\n },\n setter: {\n componentName: 'MixedSetter',\n props: {\n setters: ['BoolSetter', 'ExpressionSetter'],\n },\n },\n setValue: (target, value) => {\n if (value === true) {\n target.getProps().setPropValue('labelCol', null);\n target.getProps().setPropValue('wrapperCol', null);\n } else {\n target.getProps().setPropValue('labelCol', { fixedSpan: 4 });\n target.getProps().setPropValue('wrapperCol', null);\n }\n return target.getProps().setPropValue('inline', value);\n },\n },\n {\n name: 'fullWidth',\n condition: hideProp,\n title: {\n label: {\n type: 'i18n',\n zh_CN: '宽度占满',\n en_US: 'FullWidth',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: fullWidth | 说明: 单个 Item 中表单类组件宽度是否是100%',\n en_US: 'prop: fullWidth | description: full width',\n },\n },\n setter: 'BoolSetter',\n },\n {\n name: 'status',\n virtual: true,\n title: '状态',\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: [\n {\n title: '只读态',\n value: 'readonly',\n },\n {\n title: '编辑态',\n value: 'editable',\n },\n ],\n },\n },\n getValue: (target) => {\n const isPreview = target.getProps().getPropValue('isPreview');\n return isPreview ? 'readonly' : 'editable';\n },\n setValue: (target, value) => {\n target.getProps().setPropValue('isPreview', value === 'readonly');\n },\n defaultValue: 'editable',\n },\n {\n name: 'isPreview',\n condition: () => false,\n title: {\n label: {\n type: 'i18n',\n zh_CN: '预览态',\n en_US: 'Preview Mode',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: isPreview | 说明: 是否开启预览态',\n en_US: 'prop: isPreview | description: preview mode',\n },\n },\n setter: 'BoolSetter',\n description: '是否开启预览态',\n },\n {\n name: 'columns',\n title: '布局',\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: [\n {\n title: '一列',\n value: 1,\n },\n {\n title: '二列',\n value: 2,\n },\n {\n title: '三列',\n value: 3,\n },\n {\n title: '四列',\n value: 4,\n },\n ],\n },\n },\n },\n {\n name: 'labelAlign',\n title: {\n label: {\n type: 'i18n',\n zh_CN: '标签位置',\n en_US: 'Label Align',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: labelAlign | 说明: 标签的位置\\n@enumdesc 上, 左, 内',\n en_US: 'prop: labelAlign | description: label align',\n },\n },\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: [\n {\n title: '上',\n value: 'top',\n },\n {\n title: '左',\n value: 'left',\n },\n {\n title: '内',\n value: 'inset',\n },\n ],\n },\n },\n extraProps: {\n setValue: (target, value) => {\n if (value === 'inset') {\n target.getProps().setPropValue('labelCol.fixedSpan', 0);\n target.getProps().setPropValue('wrapperCol', null);\n } else if (value === 'left') {\n target.getProps().setPropValue('labelCol.fixedSpan', 4);\n target.getProps().setPropValue('wrapperCol', null);\n }\n return target.getProps().setPropValue('labelAlign', value);\n },\n },\n defaultValue: 'top',\n },\n {\n name: 'labelCol.fixedSpan',\n title: '标题宽度',\n condition: showWithLabelAlign,\n setter: {\n componentName: 'NumberSetter',\n props: {\n min: 0,\n max: 24,\n },\n },\n },\n {\n name: 'labelCol.offset',\n title: '标题偏移',\n condition: showWithLabelAlign,\n setter: {\n componentName: 'NumberSetter',\n props: {\n min: 0,\n max: 24,\n },\n },\n },\n {\n name: 'wrapperCol.span',\n title: '内容宽度',\n condition: showWithLabelAlign,\n setter: {\n componentName: 'NumberSetter',\n props: {\n min: 0,\n max: 24,\n },\n },\n },\n {\n name: 'wrapperCol.offset',\n title: '内容偏移',\n condition: showWithLabelAlign,\n setter: {\n componentName: 'NumberSetter',\n props: {\n min: 0,\n max: 24,\n },\n },\n },\n {\n name: 'labelTextAlign',\n condition: showWithLabelAlign,\n title: {\n label: {\n type: 'i18n',\n zh_CN: '标签对齐',\n en_US: 'Text Align',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: labelTextAlign | 说明: 标签的左右对齐方式\\n@enumdesc 左, 右',\n en_US: 'prop: labelTextAlign | description: label text align',\n },\n },\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: ['left', 'right'],\n },\n },\n defaultValue: 'right',\n },\n ],\n },\n {\n name: 'field',\n condition: hideProp,\n title: {\n label: {\n type: 'i18n',\n zh_CN: 'Field 实例',\n en_US: 'Field',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: field | 说明: 传入 Field 实例',\n en_US: 'prop: field | description: field instance',\n },\n docUrl:\n 'https://fusion.alibaba-inc.com/pc/component/basic/form#%E5%A4%8D%E6%9D%82%E5%8A%9F%E8%83%BD(Field)',\n },\n setter: {\n componentName: 'ExpressionSetter',\n },\n },\n {\n name: 'value',\n condition: hideProp,\n title: {\n label: {\n type: 'i18n',\n zh_CN: '表单值',\n en_US: 'value',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: value | 说明: 表单值',\n en_US: 'prop: value | description: value instance',\n },\n },\n setter: {\n componentName: 'MixedSetter',\n props: {\n setters: ['JsonSetter', 'ExpressionSetter'],\n },\n },\n },\n {\n name: 'size',\n condition: hideProp,\n title: {\n label: {\n type: 'i18n',\n zh_CN: '尺寸',\n en_US: 'Size',\n },\n tip: {\n type: 'i18n',\n zh_CN:\n '属性: size | 说明: 单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。\\n@enumdesc 大, 中, 小',\n en_US: 'prop: size | description: size',\n },\n },\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: ['large', 'medium', 'small'],\n },\n },\n defaultValue: 'medium',\n },\n {\n name: 'device',\n condition: hideProp,\n title: {\n label: {\n type: 'i18n',\n zh_CN: '设备',\n en_US: 'Device',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: device | 说明: 预设屏幕宽度',\n en_US: 'prop: device | description: device',\n },\n },\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: ['phone', 'tablet', 'desktop'],\n },\n },\n defaultValue: 'desktop',\n },\n formItemsProps,\n];\n\nexport default props;\n"
},
{
"path": "packages/fusion-ui/lowcode/pro-form/common/form-item-props.ts",
"content": "import React from 'react';\nimport { IProps } from '../../types';\n\nimport {\n showWithLabelAlign,\n showWithLabelAlignShortcut,\n hideProp,\n getParentValue,\n mockId,\n} from '../../utils';\n\nconst primaryKeyConfig = {\n name: 'primaryKey',\n title: '编号',\n display: 'none',\n condition: hideProp,\n defaultValue: (val: any) => {\n if (val) return val;\n return mockId();\n },\n setter: 'StringSetter',\n};\n\nconst columnSpanConfig = {\n name: 'columnSpan',\n title: '表单项宽度',\n defaultValue: 1,\n setter: (target) => {\n const parentColumns = target.parent.getPropValue('columns');\n const options = [\n {\n title: '一列',\n value: 1,\n },\n {\n title: '二列',\n value: 2,\n },\n {\n title: '三列',\n value: 3,\n },\n {\n title: '四列',\n value: 4,\n },\n ].slice(0, parentColumns);\n return {\n componentName: 'RadioGroupSetter',\n props: {\n options,\n },\n };\n },\n};\n\nconst labelConfig = {\n name: 'label',\n title: '标题',\n display: 'inline',\n defaultValue: '表单项',\n setter: 'StringSetter',\n important: true,\n supportVariable: true,\n};\n\nconst idConfig = {\n name: 'id',\n condition: hideProp,\n title: {\n label: {\n type: 'i18n',\n zh_CN: '唯一标识',\n en_US: 'ID',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: id | 说明: 唯一标识',\n en_US: 'prop: id | description: switch id',\n },\n },\n setter: 'StringSetter',\n};\n\nconst nameConfig = {\n name: 'name',\n title: {\n label: {\n type: 'i18n',\n zh_CN: '表单标识',\n en_US: 'Name',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: name | 说明: 表单标识，用于表单校验',\n en_US: 'prop: name | description: form item name',\n },\n },\n setter: 'StringSetter',\n};\n\nconst helpConfig = {\n name: 'help',\n title: {\n label: {\n type: 'i18n',\n zh_CN: '错误提示',\n en_US: 'Help Info',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: help | 说明: 自定义提示信息, 如不设置，则会根据校验规则自动生成.',\n en_US: 'prop: help | description: help infomation',\n },\n },\n setter: 'StringSetter',\n};\n\nconst extraConfig = {\n name: 'extra',\n title: {\n label: {\n type: 'i18n',\n zh_CN: '帮助提示',\n en_US: 'Extra Info',\n },\n tip: {\n type: 'i18n',\n zh_CN:\n '属性: extra | 说明: 额外的提示信息, 和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 位于错误信息后面',\n en_US: 'prop: extra | description: extra infomation',\n },\n },\n setter: 'StringSetter',\n};\n\nconst validateStateConfig = {\n name: 'validateState',\n title: {\n label: '校验状态',\n tip: '如不设置，则会根据校验规则自动生成\\n@enumdesc 失败, 成功, 校验中, 警告',\n },\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: ['error', 'success', 'loading', 'warning'],\n },\n },\n};\n\nconst sizeConfig = {\n name: 'size',\n title: {\n label: '尺寸',\n tip: '单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。',\n },\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: ['small', 'medium', 'large'],\n },\n },\n defaultValue: 'medium',\n};\n\nconst labelAlignConfig = {\n name: 'labelAlign',\n title: {\n label: '标签位置',\n tip: '上, 左, 内',\n },\n condition: hideProp,\n getValue: getParentValue,\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: [\n {\n title: '上',\n value: 'top',\n },\n {\n title: '左',\n value: 'left',\n },\n {\n title: '内',\n value: 'inset',\n },\n {\n title: '默认',\n value: '',\n },\n ],\n },\n },\n};\n\nconst labelColFixedSpanConfig = {\n name: 'labelCol.fixedSpan',\n title: '标题宽度',\n condition: showWithLabelAlign,\n getValue: getParentValue,\n setter: {\n componentName: 'NumberSetter',\n props: {\n min: 0,\n max: 24,\n },\n },\n};\n\nconst labelColOffsetConfig = {\n name: 'labelCol.offset',\n title: '标题偏移',\n condition: showWithLabelAlign,\n getValue: getParentValue,\n setter: {\n componentName: 'NumberSetter',\n props: {\n min: 0,\n max: 24,\n },\n },\n};\n\nconst wrapperColSpanConfig = {\n name: 'wrapperCol.span',\n title: '内容宽度',\n condition: showWithLabelAlign,\n getValue: getParentValue,\n setter: {\n componentName: 'NumberSetter',\n props: {\n min: 0,\n max: 24,\n },\n },\n};\n\nconst wrapperColOffsetConfig = {\n name: 'wrapperCol.offset',\n title: '内容偏移',\n condition: showWithLabelAlign,\n getValue: getParentValue,\n setter: {\n componentName: 'NumberSetter',\n props: {\n min: 0,\n max: 24,\n },\n },\n};\n\nconst labelTipEnableConfig = {\n name: 'labelTip.enable',\n title: '标题提示',\n condition: showWithLabelAlign,\n setter: {\n componentName: 'BoolSetter',\n },\n};\n\nconst labelTipContentConfig = {\n name: 'labelTip.content',\n title: '提示内容',\n condition: showWithLabelAlign,\n setter: {\n componentName: 'StringSetter',\n },\n};\n\nconst labelTipIconConfig = {\n name: 'labelTip.icon',\n title: '提示图标',\n condition: showWithLabelAlign,\n setter: {\n componentName: 'IconSetter',\n },\n};\n\nconst labelTextAlignConfig = {\n name: 'labelTextAlign',\n condition: showWithLabelAlign,\n title: {\n label: '标签对齐',\n tip: '左, 右',\n },\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: [\n {\n title: '左',\n value: 'left',\n },\n {\n title: '右',\n value: 'right',\n },\n {\n title: '默认',\n value: '',\n },\n ],\n },\n },\n defaultValue: 'right',\n};\n\nconst deviceConfig = {\n name: 'device',\n title: {\n label: '设备',\n },\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: ['phone', 'tablet', 'desktop'],\n },\n },\n defaultValue: 'desktop',\n};\n\nconst requiredConfig = {\n name: 'required',\n defaultValue: false,\n title: {\n label: '是否必填',\n tip: 'required | 是否必填',\n },\n setter: {\n componentName: 'BoolSetter',\n },\n extraProps: {\n setValue: (target, value) => {\n if (value === true) {\n const name = target.parent.getPropValue('name');\n if (!name) {\n target.parent.setPropValue('name', mockId());\n }\n }\n target.parent.setValue(target.parent.getValue());\n },\n },\n};\n\nconst fullWidthConfig = {\n name: 'fullWidth',\n defaultValue: true,\n title: {\n label: '宽度占满',\n tip: '单个 Item 中表单类组件宽度是否是100%',\n },\n setter: {\n componentName: 'BoolSetter',\n },\n};\n\nconst isPreviewConfig = {\n name: 'isPreview',\n title: {\n label: '预览态',\n tip: '是否开启预览态',\n },\n setter: 'BoolSetter',\n};\n\nconst autoValidateConfig = {\n name: 'autoValidate',\n title: {\n label: '自动校验',\n tip: '是否修改数据时自动触发校验',\n },\n setter: 'BoolSetter',\n};\n\nconst validationConfig = {\n type: 'group',\n name: 'validation',\n display: 'accordion',\n defaultCollapsed: true,\n title: '校验',\n items: [\n {\n type: 'group',\n name: 'notNullValidation',\n display: 'popup',\n title: '非空校验',\n items: [\n {\n name: 'required',\n title: {\n label: '不能为空',\n tip: '[表单校验] 不能为空',\n },\n setter: 'BoolSetter',\n },\n {\n name: 'requiredMessage',\n title: {\n label: '错误信息',\n tip: '[表单校验]为空时自定义错误信息',\n },\n setter: 'StringSetter',\n },\n ],\n },\n {\n type: 'group',\n name: 'maxValidation',\n display: 'popup',\n title: '最大/最小值校验',\n items: [\n {\n name: 'min',\n title: {\n label: '最小值',\n tip: '[表单校验] 最小值',\n },\n setter: 'NumberSetter',\n },\n {\n name: 'max',\n title: {\n label: '最大值',\n tip: '[表单校验] 最大值',\n },\n setter: 'NumberSetter',\n },\n {\n name: 'minmaxMessage',\n title: {\n label: '错误信息',\n tip: '[表单校验] min/max 自定义错误信息',\n },\n setter: 'StringSetter',\n },\n ],\n },\n {\n type: 'group',\n name: 'maxLenValidation',\n display: 'popup',\n title: '最大/最小长度校验',\n items: [\n {\n name: 'minLength',\n title: {\n label: '最小长度',\n tip: '[表单校验] 字符串最小长度 / 数组最小个数',\n },\n setter: 'NumberSetter',\n },\n {\n name: 'maxLength',\n title: {\n label: '最大长度',\n tip: '[表单校验] 字符串最大长度 / 数组最大个数',\n },\n setter: 'NumberSetter',\n },\n {\n name: 'minmaxLengthMessage',\n title: {\n label: '错误信息',\n tip: '[表单校验] minLength/maxLength 自定义错误信息',\n },\n setter: 'StringSetter',\n },\n ],\n },\n {\n type: 'group',\n name: 'lengthValidation',\n display: 'popup',\n title: '长度校验',\n items: [\n {\n name: 'length',\n title: {\n label: '长度',\n tip: '[表单校验] 字符串精确长度 / 数组精确个数',\n },\n setter: 'NumberSetter',\n },\n {\n name: 'lengthMessage',\n title: {\n label: '错误信息',\n tip: '[表单校验] minLength/maxLength 自定义错误信息',\n },\n setter: 'StringSetter',\n },\n ],\n },\n {\n type: 'group',\n name: 'regValidation',\n display: 'popup',\n title: '正则校验',\n items: [\n {\n name: 'pattern',\n title: {\n label: '正则',\n tip: '[表单校验] 正则校验',\n },\n setter: 'StringSetter',\n },\n {\n name: 'patternMessage',\n title: {\n label: '错误信息',\n tip: '[表单校验] pattern 自定义错误信息',\n },\n setter: 'StringSetter',\n },\n ],\n },\n {\n type: 'group',\n name: 'formatValidation',\n display: 'popup',\n title: '格式化校验',\n items: [\n {\n name: 'format',\n title: {\n label: 'format',\n tip: '[表单校验] 四种常用的 pattern',\n },\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: ['number', 'email', 'url', 'tel'],\n },\n },\n },\n {\n name: 'formatMessage',\n title: {\n label: '错误信息',\n tip: '[表单校验] format 自定义错误信息',\n },\n setter: 'StringSetter',\n },\n ],\n },\n {\n name: 'validator',\n display: 'popup',\n title: {\n label: '自定义校验函数',\n },\n setter: 'FunctionSetter',\n },\n ],\n};\n\nconst childFormConfig = {\n name: 'childForm',\n title: '开启子表单',\n setter: {\n componentName: 'SlotSetter',\n initialValue: {\n type: 'JSSlot',\n visible: false,\n value: [\n {\n componentName: 'ChildForm',\n props: {\n primaryKey: String(Math.floor(Math.random() * 10000)),\n placeholder: '请在右侧面板添加表单项+',\n placeholderStyle: {\n height: '38px',\n color: '#0088FF',\n background: '#d8d8d836',\n border: 0,\n gridArea: 'span 4 / span 4',\n },\n columns: 3,\n labelCol: {\n fixedSpan: 4,\n },\n labelAlign: 'top',\n emptyContent: '添加表单项',\n },\n children: [...new Array(3).keys()].map((item) => ({\n componentName: 'FormInput',\n props: {\n formItemProps: {\n primaryKey: String(Math.floor(Math.random() * 10000) + item),\n label: '表单项',\n size: 'medium',\n device: 'desktop',\n fullWidth: true,\n },\n placeholder: '请输入',\n },\n })),\n },\n ],\n },\n },\n};\n\nexport const formItemProps = [\n primaryKeyConfig,\n idConfig,\n nameConfig,\n columnSpanConfig,\n labelConfig,\n childFormConfig,\n helpConfig,\n extraConfig,\n validateStateConfig,\n sizeConfig,\n labelAlignConfig,\n labelColFixedSpanConfig,\n labelColOffsetConfig,\n wrapperColSpanConfig,\n wrapperColOffsetConfig,\n labelTipEnableConfig,\n labelTipIconConfig,\n labelTipContentConfig,\n labelTextAlignConfig,\n deviceConfig,\n requiredConfig,\n fullWidthConfig,\n isPreviewConfig,\n autoValidateConfig,\n validationConfig,\n];\n\nexport const formItemShortcutProps = [\n primaryKeyConfig,\n nameConfig,\n labelConfig,\n sizeConfig,\n columnSpanConfig,\n childFormConfig,\n {\n name: 'labelTip.enable',\n title: '标题提示',\n condition: showWithLabelAlignShortcut,\n setter: {\n componentName: 'BoolSetter',\n },\n },\n {\n name: 'labelTip.icon',\n title: '提示图标',\n condition: showWithLabelAlignShortcut,\n setter: {\n componentName: 'IconSetter',\n },\n },\n {\n name: 'labelTip.content',\n title: '提示内容',\n condition: showWithLabelAlignShortcut,\n setter: {\n componentName: 'StringSetter',\n },\n },\n requiredConfig,\n fullWidthConfig,\n isPreviewConfig,\n autoValidateConfig,\n {\n name: '!entry',\n title: '组件详细配置',\n display: 'block',\n setter: (target) => {\n return React.createElement(\n Next.Button,\n {\n onClick: () => {\n const { node } = target;\n node.children.get(target.parent.key).select();\n },\n },\n '点击配置',\n );\n },\n },\n];\n\nconst props: IProps[] = [\n {\n name: 'formItemProps',\n title: '表单项配置',\n extraProps: {\n display: 'accordion',\n defaultCollapsed: true,\n },\n setter: {\n componentName: 'ObjectSetter',\n props: {\n config: {\n items: formItemProps,\n },\n },\n },\n },\n];\n\nexport default props;\n"
},
{
"path": "packages/fusion-ui/lowcode/pro-form/common/props.ts",
"content": "import { IProps } from '../../types';\n\nimport { operationProps } from '../../common';\nimport FormItemProps from './form-item-props';\nimport FormBaseProps from './form-base-props';\n\nexport { FormItemProps, FormBaseProps };\n\nconst props: IProps[] = [...FormBaseProps, ...operationProps];\n\nexport default props;\n"
},
{
"path": "packages/fusion-ui/lowcode/pro-form/components/index.ts",
"content": "import { default as PasswordMeta } from './password';\nimport { default as TextAreaMeta } from './text-area';\n\nexport default [PasswordMeta, TextAreaMeta];\n"
},
{
"path": "packages/fusion-ui/lowcode/pro-form/components/password.ts",
"content": "import { IProps } from '../../types';\nimport { wrapFormItemProps } from '../../utils/form-utils';\n\nconst props: IProps[] = wrapFormItemProps([\n {\n name: 'rows',\n title: {\n label: {\n type: 'i18n',\n zh_CN: '行数',\n en_US: 'Rows',\n },\n tip: {\n type: 'i18n',\n zh_CN:\n '属性: rows | 说明: 多行文本框高度 } value 日期值',\n },\n {\n name: 'onOk',\n propType: 'func',\n description:\n '点击确认按钮时的回调 返回开始时间和结束时间`[ MomentObject|String, MomentObject|String ]`\\n@return {Array} 日期范围',\n },\n {\n name: 'label',\n propType: 'string',\n description: '表单项内置标签',\n },\n {\n name: 'state',\n propType: {\n type: 'oneOf',\n value: ['error', 'loading', 'success'],\n },\n description: '表单项状态',\n },\n {\n name: 'size',\n propType: {\n type: 'oneOf',\n value: ['small', 'medium', 'large'],\n },\n description: '表单项尺寸',\n defaultValue: 'medium',\n },\n {\n name: 'disabled',\n propType: 'bool',\n description: '是否禁用',\n },\n {\n name: 'hasClear',\n propType: 'bool',\n description: '是否显示清空按钮',\n defaultValue: true,\n },\n {\n name: 'visible',\n propType: 'bool',\n description: '弹层显示状态',\n },\n {\n name: 'defaultVisible',\n propType: 'bool',\n description: '弹层默认是否显示',\n defaultValue: false,\n },\n {\n name: 'onVisibleChange',\n propType: 'func',\n description:\n '弹层展示状态变化时的回调\\n@param {Boolean} visible 弹层是否显示\\n@param {String} type 触发弹层显示和隐藏的来源 okBtnClick 表示由确认按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发',\n },\n {\n name: 'popupTriggerType',\n propType: {\n type: 'oneOf',\n value: ['click', 'hover'],\n },\n description: '弹层触发方式',\n defaultValue: 'click',\n },\n {\n name: 'popupAlign',\n propType: 'string',\n description: '弹层对齐方式, 具体含义见 OverLay文档',\n defaultValue: 'tl tl',\n },\n {\n name: 'popupContainer',\n propType: 'node',\n description: '弹层容器\\n@param {Element} target 目标元素\\n@return {Element} 弹层的容器元素',\n },\n {\n name: 'popupClassName',\n propType: 'string',\n description: '弹层自定义样式类',\n },\n {\n name: 'followTrigger',\n propType: 'bool',\n description: '是否跟随滚动',\n },\n {\n name: 'startDateInputAriaLabel',\n propType: 'string',\n description: '开始日期表单项的 aria-label 属性',\n },\n {\n name: 'startTimeInputAriaLabel',\n propType: 'string',\n description: '开始时间表单项的 aria-label 属性',\n },\n {\n name: 'endDateInputAriaLabel',\n propType: 'string',\n description: '结束日期表单项的 aria-label 属性',\n },\n {\n name: 'endTimeInputAriaLabel',\n propType: 'string',\n description: '结束时间表单项的 aria-label 属性',\n },\n {\n name: 'isPreview',\n propType: 'bool',\n description: '是否为预览态',\n },\n {\n name: 'locale',\n propType: 'object',\n },\n {\n name: 'className',\n propType: 'string',\n },\n {\n name: 'name',\n propType: 'string',\n },\n {\n name: 'popupComponent',\n propType: 'string',\n },\n {\n name: 'popupContent',\n propType: 'node',\n },\n {\n name: 'style',\n propType: 'object',\n },\n ],\n configure: {\n supports: {\n style: true,\n events: ['onVisibleMonthChange', 'onChange', 'onOk', 'onVisibleChange'],\n },\n props: wrapFormItemProps([\n {\n name: 'defaultValue',\n title: {\n label: '默认值',\n tip: '初始的日期范围值数组 [moment, moment]',\n },\n setter: {\n componentName: 'ObjectSetter',\n props: {\n config: {\n items: [\n {\n name: 0,\n title: '开始时间',\n setter: 'DateSetter',\n },\n {\n name: 1,\n title: '结束时间',\n setter: 'DateSetter',\n },\n ],\n },\n },\n },\n },\n {\n name: 'type',\n title: '日期类型',\n setter: {\n setter: 'RadioGroupSetter',\n props: { options: ['date', 'month', 'year'] },\n },\n description: '日期范围类型',\n defaultValue: 'date',\n },\n {\n name: 'label',\n title: '内置标签',\n setter: 'StringSetter',\n description: '表单项内置标签',\n },\n {\n name: 'state',\n title: '输入状态',\n setter: {\n setter: 'RadioGroupSetter',\n props: { options: ['error', 'loading', 'success'] },\n },\n description: '表单项状态',\n },\n {\n name: 'size',\n title: '尺寸',\n setter: {\n setter: 'RadioGroupSetter',\n props: { options: ['small', 'medium', 'large'] },\n },\n description: '表单项尺寸',\n defaultValue: 'medium',\n },\n {\n name: 'disabled',\n setter: 'BoolSetter',\n title: '是否禁用',\n },\n {\n name: 'hasClear',\n setter: 'BoolSetter',\n title: '清空按钮',\n defaultValue: true,\n },\n {\n name: 'defaultVisible',\n setter: 'BoolSetter',\n title: '显示弹层',\n defaultValue: false,\n },\n {\n type: 'group',\n title: '高级',\n display: 'block',\n items: [\n {\n name: 'id',\n title: {\n label: {\n type: 'i18n',\n zh_CN: '唯一标识',\n en_US: 'ID',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: id | 说明: 唯一标识',\n en_US: 'prop: id | description: switch id',\n },\n },\n setter: 'StringSetter',\n },\n {\n name: 'name',\n title: {\n label: {\n type: 'i18n',\n zh_CN: '表单标识',\n en_US: 'Name',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: name | 说明: 表单标识',\n en_US: 'prop: name | description: switch name',\n },\n },\n setter: 'StringSetter',\n },\n ],\n },\n ]),\n },\n category: '内容',\n icon: '',\n};\n"
},
{
"path": "packages/fusion-ui/lowcode/rating/meta.js",
"content": "import { wrapFormItemProps } from '../utils/form-utils';\n\nexport default {\n componentName: 'FormRating',\n isFormItemComponent: true,\n title: '评分',\n docUrl: '',\n screenshot: '',\n npm: {\n package: '@alifd/fusion-ui',\n version: '{{version}}',\n exportName: 'FormRating',\n main: '',\n destructuring: true,\n subName: '',\n },\n props: [\n {\n name: 'id',\n propType: 'string',\n },\n {\n name: 'name',\n propType: 'string',\n description: 'name',\n },\n {\n name: 'className',\n propType: 'string',\n },\n {\n name: 'style',\n propType: 'object',\n },\n {\n name: 'defaultValue',\n propType: 'number',\n description: '默认值',\n defaultValue: 0,\n },\n {\n name: 'value',\n propType: 'number',\n description: '值',\n },\n {\n name: 'size',\n propType: {\n type: 'oneOf',\n value: ['small', 'medium', 'large'],\n },\n description: '尺寸',\n defaultValue: 'medium',\n },\n {\n name: 'count',\n propType: 'number',\n description: '评分的总数',\n defaultValue: 5,\n },\n {\n name: 'showGrade',\n propType: 'bool',\n description: '是否显示 grade',\n defaultValue: false,\n },\n {\n name: 'allowHalf',\n propType: 'bool',\n description: '是否允许半星评分',\n defaultValue: false,\n },\n {\n name: 'disabled',\n propType: 'bool',\n description: '是否禁用',\n defaultValue: false,\n },\n {\n name: 'rtl',\n propType: 'bool',\n },\n {\n name: 'isPreview',\n propType: 'bool',\n description: '是否为预览态',\n defaultValue: false,\n },\n {\n name: 'renderPreview',\n propType: 'func',\n description: '预览态模式下渲染的内容',\n },\n {\n name: 'readOnly',\n propType: 'bool',\n description: '是否为只读态，效果上同 disabeld',\n defaultValue: false,\n },\n {\n name: 'onChange',\n propType: 'func',\n description: '用户点击评分时触发的回调\\n@param {String} value 评分值',\n },\n {\n name: 'onHoverChange',\n propType: 'func',\n description: '用户hover评分时触发的回调\\n@param {String} value 评分值',\n },\n ],\n configure: {\n props: wrapFormItemProps([\n {\n name: 'value',\n title: '当前值',\n setter: ['NumberSetter', 'ExpressionSetter'],\n },\n {\n name: 'defaultValue',\n title: '默认值',\n setter: ['NumberSetter', 'ExpressionSetter'],\n },\n {\n name: 'size',\n title: {\n label: {\n type: 'i18n',\n zh_CN: '尺寸',\n en_US: 'Size',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: size | 说明: 尺寸\\n@enumdesc 小, 中, 大',\n en_US: 'prop: size | description: size',\n },\n },\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: ['small', 'medium', 'large'],\n },\n },\n defaultValue: 'medium',\n },\n {\n name: 'count',\n title: '评分总数',\n setter: ['NumberSetter', 'ExpressionSetter'],\n },\n {\n name: 'allowHalf',\n title: '半星评分',\n setter: ['BoolSetter', 'ExpressionSetter'],\n },\n {\n name: 'showGrade',\n title: '显示分数',\n setter: ['BoolSetter', 'ExpressionSetter'],\n },\n {\n name: 'readAs',\n title: '评分文案生成方法',\n display: 'block',\n setter: {\n componentName: 'FunctionSetter',\n // props: {\n // defaultActionName=\"readAs\",\n // defaultCode=`function readAs(val) {\n // return val + 'source';\n // }`,\n // }\n },\n },\n {\n type: 'group',\n title: '高级',\n display: 'block',\n items: [\n {\n name: 'id',\n title: {\n label: {\n type: 'i18n',\n zh_CN: '唯一标识',\n en_US: 'ID',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: id | 说明: 唯一标识',\n en_US: 'prop: id | description: switch id',\n },\n },\n setter: 'StringSetter',\n },\n {\n name: 'name',\n title: {\n label: {\n type: 'i18n',\n zh_CN: '表单标识',\n en_US: 'Name',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: name | 说明: 表单标识',\n en_US: 'prop: name | description: switch name',\n },\n },\n setter: 'StringSetter',\n },\n ],\n },\n ]),\n supports: {\n style: true,\n events: ['onChange', 'onHoverChange'],\n },\n },\n icon: '',\n category: '内容',\n};\n"
},
{
"path": "packages/fusion-ui/lowcode/rating/snippets.js",
"content": "module.exports = [\n {\n title: '评分',\n screenshot:\n 'https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_rating.png',\n schema: {\n componentName: 'Rating',\n props: {\n prefix: 'next-',\n count: 5,\n size: 'medium',\n },\n },\n },\n];\n"
},
{
"path": "packages/fusion-ui/lowcode/select/meta.js",
"content": "import { wrapFormItemProps } from '../utils/form-utils';\n\nexport default {\n componentName: 'FormSelect',\n isFormItemComponent: true,\n title: '选择器',\n docUrl: '',\n screenshot: '',\n npm: {\n package: '@alifd/fusion-ui',\n version: '{{version}}',\n exportName: 'FormSelect',\n main: '',\n destructuring: true,\n subName: '',\n },\n configure: {\n props: wrapFormItemProps([\n {\n name: 'placeholder',\n title: {\n label: '占位提示',\n tip: '属性: placeholder',\n },\n defaultValue: '请选择', // 不生效\n setter: 'StringSetter',\n },\n {\n name: 'hasClear',\n title: {\n label: '清除按钮',\n tip: '属性: hasClear',\n },\n setter: 'BoolSetter',\n defaultValue: false,\n },\n {\n name: 'showSearch',\n title: {\n label: '可搜索',\n tip: '属性: showSearch',\n },\n setter: 'BoolSetter',\n defaultValue: false,\n },\n {\n name: 'dataSource',\n display: 'block',\n title: '选项',\n tip: {\n title: '数据格式',\n url: '',\n },\n setter: {\n componentName: 'MixedSetter',\n props: {\n setters: [\n {\n componentName: 'ArraySetter',\n props: {\n itemSetter: {\n componentName: 'ObjectSetter',\n props: {\n config: {\n items: [\n {\n name: 'label',\n title: 'label',\n setter: 'StringSetter',\n },\n {\n name: 'value',\n title: 'value',\n setter: 'StringSetter',\n },\n ],\n },\n },\n initialValue: {\n title: 'Title',\n },\n },\n },\n },\n 'ExpressionSetter',\n ],\n },\n },\n },\n {\n name: 'mode',\n title: {\n label: '模式',\n tip: '属性: mode',\n },\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n defaultValue: 'single',\n options: [\n { value: 'single', title: '单选' },\n { value: 'multiple', title: '多选' },\n { value: 'tag', title: '标签' },\n ],\n },\n },\n },\n\n {\n type: 'group',\n title: '其他配置',\n display: 'block',\n items: [\n {\n name: 'notFoundContent',\n title: {\n label: '空文案',\n tip: 'notFoundContent|弹层内容为空的文案',\n },\n setter: 'StringSetter',\n },\n {\n name: 'hasBorder',\n title: {\n label: '边框',\n tip: '是否有边框',\n },\n setter: 'BoolSetter',\n },\n {\n name: 'autoWidth',\n title: '下拉等宽',\n setter: 'BoolSetter',\n },\n {\n name: 'hasArrow',\n title: '下拉箭头',\n setter: 'BoolSetter',\n defaultValue: true,\n },\n ],\n },\n {\n type: 'group',\n title: '高级',\n display: 'block',\n items: [\n {\n name: 'id',\n title: {\n label: {\n type: 'i18n',\n zh_CN: '唯一标识',\n en_US: 'ID',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: id | 说明: 唯一标识',\n en_US: 'prop: id | description: switch id',\n },\n },\n setter: 'StringSetter',\n },\n {\n name: 'name',\n title: {\n label: {\n type: 'i18n',\n zh_CN: '表单标识',\n en_US: 'Name',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: name | 说明: 表单标识',\n en_US: 'prop: name | description: switch name',\n },\n },\n setter: 'StringSetter',\n },\n ],\n },\n ]),\n supports: {\n style: true,\n events: [\n {\n name: 'onChange',\n propType: 'func',\n description: '值发生变化',\n },\n {\n name: 'onVisibleChange',\n propType: 'func',\n description: '弹层显示隐藏变化',\n },\n {\n name: 'onRemove',\n propType: 'func',\n description: 'Tag 被删除',\n },\n {\n name: 'onSearch',\n propType: 'func',\n description: '搜索',\n },\n ],\n },\n },\n icon: '',\n category: '内容',\n};\n"
},
{
"path": "packages/fusion-ui/lowcode/select/snippets.js",
"content": "module.exports = [\n {\n title: '选择器',\n screenshot:\n 'https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_select.png',\n schema: {\n componentName: 'Select',\n props: {\n mode: 'single',\n hasArrow: true,\n cacheValue: true,\n dataSource: [\n {\n value: '1',\n label: '选项1',\n },\n {\n value: '2',\n label: '选项2',\n },\n {\n value: '3',\n label: '选项3',\n },\n ],\n },\n },\n },\n];\n"
},
{
"path": "packages/fusion-ui/lowcode/step-form/meta.ts",
"content": "import { operationConfig } from '../common';\nimport { IComponentDescription, ISnippet } from '../types';\nimport { hideProp } from '../utils';\n\nimport stepProps, { operations } from './step-props';\n\nconst snippets: ISnippet[] = [\n {\n title: '步骤表单',\n screenshot:\n 'https://img.alicdn.com/imgextra/i4/O1CN01HFWZfM24k4gYve7im_!!6000000007428-55-tps-56-56.svg',\n schema: {\n componentName: 'StepForm',\n props: {\n current: 0,\n operations: [\n {\n content: '上一步',\n action: 'previous',\n type: 'secondary',\n },\n {\n content: '下一步',\n action: 'next',\n type: 'primary',\n },\n ],\n },\n children: [\n {\n componentName: 'ProForm',\n props: {\n stepItemProps: {\n title: 'StepItem',\n },\n },\n children: [...new Array(3).keys()].map((item) => ({\n componentName: 'FormInput',\n props: {\n formItemProps: {\n primaryKey: String(Math.floor(Math.random() * 10000) + item),\n label: '表单项',\n size: 'medium',\n device: 'desktop',\n fullWidth: true,\n },\n placeholder: '请输入',\n },\n })),\n },\n {\n componentName: 'ProForm',\n props: {\n stepItemProps: {\n title: 'StepItem',\n },\n },\n children: [\n {\n componentName: 'ProFormItem',\n props: {\n primaryKey: String(Math.floor(Math.random() * 10000)),\n\n label: '表单项',\n size: 'medium',\n device: 'desktop',\n },\n },\n {\n componentName: 'ProFormItem',\n props: {\n primaryKey: String(Math.floor(Math.random() * 10000)),\n\n label: '表单项',\n size: 'medium',\n device: 'desktop',\n },\n },\n {\n componentName: 'ProFormItem',\n props: {\n primaryKey: String(Math.floor(Math.random() * 10000)),\n\n label: '表单项',\n size: 'medium',\n device: 'desktop',\n },\n },\n ],\n },\n ],\n },\n },\n];\n\nconst ProFormMeta: IComponentDescription[] = [\n {\n componentName: 'StepForm',\n category: '表单类',\n title: '步骤表单',\n group: '精选组件',\n docUrl: '',\n screenshot: '',\n devMode: 'procode',\n npm: {\n package: '@alifd/fusion-ui',\n version: '0.1.4',\n exportName: 'StepForm',\n main: 'lib/index.js',\n destructuring: true,\n subName: '',\n },\n configure: {\n component: {\n isContainer: false,\n },\n supports: {\n style: true,\n events: ['saveField', 'onSubmit', 'onChange'],\n },\n props: [...stepProps, operationConfig, operations],\n },\n snippets,\n },\n {\n componentName: 'Step.Item',\n title: '步骤项',\n docUrl: '',\n screenshot: '',\n npm: {\n package: '@alifd/next',\n version: '{{version}}',\n exportName: 'Step',\n main: '',\n destructuring: true,\n subName: 'Item',\n },\n props: [\n {\n name: 'icon',\n propType: 'string',\n description: '图标',\n },\n {\n name: 'title',\n propType: {\n type: 'instanceOf',\n value: 'node',\n },\n defaultValue: '步骤项',\n description: '标题',\n },\n {\n name: 'content',\n title: {\n label: '内容',\n tip: 'content|内容填充, shape为 arrow 时无效',\n },\n propType: {\n type: 'instanceOf',\n value: 'node',\n },\n description: '内容填充, shape为 arrow 时无效',\n },\n {\n name: 'status',\n title: {\n label: '状态',\n tip: 'status|步骤的状态，如不传，会根据外层的 Step 的 current 属性生成，可选值为 `wait`, `process`, `finish`',\n },\n propType: {\n type: 'oneOf',\n value: ['wait', 'process', 'finish'],\n },\n description:\n '步骤的状态，如不传，会根据外层的 Step 的 current 属性生成，可选值为 `wait`, `process`, `finish`',\n },\n {\n name: 'percent',\n propType: 'number',\n description: '百分比',\n },\n {\n name: 'disabled',\n propType: 'bool',\n description: '是否禁用',\n },\n {\n name: 'onClick',\n propType: 'func',\n description: '点击步骤时的回调\\n@param {Number} index 节点索引',\n },\n {\n name: 'className',\n propType: 'string',\n description: '自定义样式',\n },\n {\n name: 'style',\n propType: 'object',\n },\n ],\n configure: {\n props: {\n isExtends: true,\n override: [\n {\n name: 'icon',\n title: {\n label: '图标',\n tip: 'icon|图标',\n },\n setter: {\n componentName: 'IconSetter',\n },\n },\n {\n name: 'title',\n setter: {\n componentName: 'StringSetter',\n },\n defaultValue: '步骤项',\n title: '标题',\n },\n {\n name: 'content',\n condition: hideProp,\n title: {\n label: '内容',\n tip: 'content|内容',\n },\n setter: {\n componentName: 'TextAreaSetter',\n },\n },\n {\n name: 'status',\n title: {\n label: '状态',\n tip: 'status|状态',\n },\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: [\n {\n title: '等待',\n value: 'wait',\n },\n {\n title: '进行中',\n value: 'process',\n },\n {\n title: '结束',\n value: 'finish',\n },\n {\n title: '默认',\n value: '',\n },\n ],\n },\n },\n },\n ],\n },\n },\n category: 'null',\n icon: '',\n },\n];\n\nexport default ProFormMeta;\n"
},
{
"path": "packages/fusion-ui/lowcode/step-form/step-props.ts",
"content": "import { hideProp } from '../utils';\n\nexport default [\n {\n name: '!items',\n title: '步骤项',\n setter: {\n componentName: 'ArraySetter',\n props: {\n itemSetter: {\n componentName: 'ObjectSetter',\n props: {\n config: {\n items: [\n {\n name: 'icon',\n title: '图标',\n important: true,\n setter: 'IconSetter',\n },\n {\n name: 'title',\n title: '标题',\n important: true,\n setter: 'StringSetter',\n },\n {\n name: 'status',\n title: {\n label: '状态',\n tip: '步骤的状态，如不传，会根据外层的 Step 的 current 属性生成，可选值为 `wait`, `process`, `finish`',\n },\n setter: {\n componentName: 'RadioGroupSetter',\n props: { options: ['wait', 'process', 'finish'] },\n },\n },\n {\n name: 'content',\n title: {\n label: '内容',\n tip: 'content|内容填充, shape为 arrow 时无效',\n },\n condition: hideProp,\n setter: 'TextAreaSetter',\n description: '内容填充, shape为 arrow 时无效',\n },\n {\n name: 'percent',\n title: '百分比',\n setter: 'NumberSetter',\n description: '百分比',\n },\n {\n name: 'disabled',\n title: '是否禁用',\n setter: 'BoolSetter',\n description: '是否禁用',\n },\n ],\n },\n },\n initialValue: () => {\n return {\n primaryKey: String(Math.floor(Math.random() * 10000)),\n title: 'StepItem',\n };\n },\n },\n },\n },\n getValue(target) {\n // const node = target.node;\n // const children = node.children;\n const map = target.node.children.map((child) => {\n const stepItemProps = child.getPropValue('stepItemProps') || {};\n const primaryKey = stepItemProps.primaryKey ? stepItemProps.primaryKey : child.id;\n return {\n ...stepItemProps,\n primaryKey,\n };\n });\n return map;\n },\n setValue(target, value) {\n const { node } = target;\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('stepItemProps', map[primaryKey]);\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: 'ProForm',\n props: {\n columns: 1,\n primaryKey,\n stepItemProps: map[primaryKey],\n },\n children: [...new Array(3).keys()].map((item) => ({\n componentName: 'FormInput',\n props: {\n formItemProps: {\n primaryKey: String(Math.floor(Math.random() * 10000) + item),\n label: '表单项',\n size: 'medium',\n device: 'desktop',\n fullWidth: true,\n },\n placeholder: '请输入',\n },\n })),\n });\n }\n }\n return items;\n },\n (child1, child2) => {\n const a = value.findIndex(\n (item) => String(item.primaryKey) === String(child1.getPropValue('primaryKey')),\n );\n const b = value.findIndex(\n (item) => String(item.primaryKey) === String(child2.getPropValue('primaryKey')),\n );\n return a - b;\n },\n );\n },\n },\n {\n name: 'current',\n setter: (target) => {\n return {\n componentName: 'MixedSetter',\n props: {\n setters: [\n {\n componentName: 'SelectSetter',\n props: () => {\n const items = target.getProps().getPropValue('!items') || [];\n return {\n options: items.map((item, index: number) => {\n return {\n title: `第 ${index + 1} 步: ${item.title}`,\n value: `${index}`,\n };\n }),\n };\n },\n },\n 'ExpressionSetter',\n ],\n },\n };\n },\n setValue: (target, value) => {\n target.parent.setPropValue('current', +value);\n },\n title: '当前步骤',\n defaultValue: 0,\n },\n {\n name: 'shape',\n title: '类型',\n setter: (target) => {\n const options =\n target.getProps().getPropValue('direction') === 'ver'\n ? ['circle', 'dot']\n : ['circle', 'arrow', 'dot'];\n return {\n componentName: 'RadioGroupSetter',\n props: {\n options,\n },\n };\n },\n defaultValue: 'circle',\n },\n {\n name: 'direction',\n condition: (target) => {\n return target.getProps().getPropValue('shape') !== 'arrow';\n },\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: [\n { value: 'hoz', title: '横向' },\n { value: 'ver', title: '纵向' },\n ],\n },\n },\n title: '展示方向',\n defaultValue: 'hoz',\n },\n {\n name: 'showAll',\n condition: (target) => {\n return target.getProps().getPropValue('direction') === 'ver';\n },\n title: '展示所有表单',\n setter: {\n componentName: 'BoolSetter',\n },\n },\n {\n name: 'labelPlacement',\n condition: hideProp,\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: ['hoz', 'ver'],\n },\n },\n title: '内容排列',\n defaultValue: 'ver',\n },\n {\n name: 'readOnly',\n setter: 'BoolSetter',\n title: '是否只读',\n },\n {\n name: 'animation',\n setter: 'BoolSetter',\n title: '开启动效',\n defaultValue: true,\n },\n];\n\nexport const operations = {\n name: 'operations',\n display: 'block',\n title: '操作项',\n getValue: (target, value) => {\n return value || [];\n },\n setter: {\n componentName: 'MixedSetter',\n props: {\n setters: [\n {\n componentName: 'SlotSetter',\n defaultValue: {\n type: 'JSSlot',\n value: [],\n },\n },\n {\n componentName: 'ArraySetter',\n props: {\n itemSetter: {\n componentName: 'ObjectSetter',\n props: {\n config: {\n items: [\n {\n name: 'content',\n display: 'inline',\n title: '文本',\n setter: 'StringSetter',\n important: true,\n extraProps: {\n supportVariable: true,\n },\n },\n {\n name: 'action',\n display: 'inline',\n title: '操作',\n important: true,\n setValue: (target, value) => {\n const actionNameMap = {\n submit: '提交',\n reset: '重置',\n custom: '自定义',\n };\n const actionName = actionNameMap[value] || '自定义';\n target.parent.setPropValue('content', actionName);\n },\n setter: {\n componentName: 'SelectSetter',\n props: {\n options: [\n {\n title: '提交',\n value: 'submit',\n action: 'submit',\n },\n {\n title: '重置',\n value: 'reset',\n action: 'reset',\n },\n {\n title: '上一步',\n value: 'previous',\n action: 'previous',\n },\n {\n title: '下一步',\n value: 'next',\n action: 'next',\n },\n {\n title: '自定义',\n value: 'custom',\n },\n ],\n },\n },\n },\n {\n name: 'type',\n display: 'inline',\n title: '样式',\n important: true,\n setter: {\n componentName: 'SelectSetter',\n props: {\n options: [\n {\n title: '主要',\n value: 'primary',\n },\n {\n title: '次要',\n value: 'secondary',\n },\n {\n title: '普通',\n value: 'normal',\n },\n ],\n },\n },\n },\n {\n name: 'behavior',\n title: '交互设置',\n display: 'block',\n condition: (target) => {\n const action = target.parent.getPropValue('action');\n return !action || action === 'custom';\n },\n setter: {\n componentName: 'BehaviorSetter',\n props: {\n actions: ['onClick'],\n },\n },\n },\n {\n name: 'onClick',\n display: 'inline',\n title: '点击事件',\n condition: hideProp,\n setter: 'FunctionSetter',\n extraProps: {\n supportVariable: true,\n },\n },\n {\n name: 'htmlType',\n condition: hideProp,\n },\n {\n name: '!autoSubmit',\n display: 'inline',\n virtual: true,\n title: '自动提交',\n setter: {\n componentName: 'BoolSetter',\n },\n extraProps: {\n setValue: (target, value) => {\n target.parent.setPropValue('htmlType', value ? 'submit' : '');\n },\n getValue: (target, value) => {\n return value === 'submit';\n },\n },\n condition: (target) => {\n return target.parent.getPropValue('action') !== 'submit';\n },\n },\n ],\n },\n },\n initialValue: () => {\n return {\n content: '提交',\n action: 'submit',\n type: 'secondary',\n };\n },\n },\n },\n },\n ],\n },\n },\n};\n"
},
{
"path": "packages/fusion-ui/lowcode/story-placeholder/meta.ts",
"content": "import { IPublicModelNode } from '@alilc/lowcode-types';\nimport { IComponentDescription, ISnippet } from '../types';\n\nconst snippets: ISnippet[] = [\n {\n title: '需求占位',\n screenshot: 'https://img.alicdn.com/tfs/TB160cKkP39YK4jSZPcXXXrUFXa-112-64.png',\n schema: {\n title: '需求占位',\n componentName: 'StoryPlaceholder',\n props: {\n title: '需求占位描述',\n content: {\n subject: '需求标题',\n hideTitle: false,\n description:\n '- 你可以在这里描述需求 - 或者粘贴需求截图
',\n },\n },\n },\n },\n];\n\ninterface INode extends IPublicModelNode {\n startRect: any;\n beforeSpan: number;\n parentRect: any;\n}\n\nconst meta: IComponentDescription = {\n componentName: 'StoryPlaceholder',\n title: '需求占位',\n npm: {\n package: '@alifd/fusion-ui',\n version: 'latest',\n exportName: 'StoryPlaceholder',\n main: '',\n destructuring: true,\n subName: '',\n },\n configure: {\n supports: {\n style: true,\n },\n props: [\n {\n name: 'maxHeight',\n title: '最大高度',\n propType: 'number',\n setter: 'NumberSetter',\n description: '最大高度',\n },\n {\n name: 'content',\n title: '需求关联',\n display: 'inline',\n supportVariable: true,\n setter: {\n componentName: 'EditSetter',\n props: {\n title: '编辑内容',\n },\n },\n },\n ],\n },\n advanced: {\n getResizingHandlers: () => {\n return ['e'];\n },\n callbacks: {\n onResizeStart: (e, currentNode: INode) => {\n const parent = currentNode.parent;\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 },\n onResize: (e, currentNode: INode) => {\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); // 不能小于0\n width = Math.min(width, currentNode.parentRect.width); // 不能大于父容器宽度\n currentNode.getDOMNode().style.width = `${Math.round(width)}px`;\n },\n onResizeEnd: (e, currentNode) => {\n currentNode.setPropValue('style.width', currentNode.getDOMNode().style.width);\n },\n },\n },\n icon: 'https://img.alicdn.com/imgextra/i3/O1CN01G7Lc8e1pZL7p4cdKc_!!6000000005374-2-tps-112-112.png',\n category: '基础元素',\n group: '精选组件',\n hidden: true,\n};\n\nexport default {\n ...meta,\n snippets,\n};\n"
},
{
"path": "packages/fusion-ui/lowcode/tab-container/meta.ts",
"content": "import { ComponentMetadata, Snippet } from '@ali/lowcode-types';\n\nimport props from './props';\n\nconst snippets: Snippet[] = [\n {\n title: '选项卡',\n screenshot:\n 'https://img.alicdn.com/imgextra/i4/O1CN01mh9LPG268B90t8DaA_!!6000000007616-55-tps-56-56.svg',\n schema: {\n componentName: 'TabContainer',\n props: {\n shape: 'pure',\n size: 'medium',\n excessMode: 'slide',\n },\n children: [\n {\n componentName: 'TabContainer.Item',\n props: {\n title: '标签项1',\n primaryKey: 'tab-item-1',\n },\n },\n {\n componentName: 'TabContainer.Item',\n props: {\n title: '标签项2',\n primaryKey: 'tab-item-2',\n },\n },\n ],\n },\n },\n];\n\nconst tabItemMeta = {\n componentName: 'TabContainer.Item',\n title: '选项卡',\n docUrl: '',\n screenshot: '',\n devMode: 'proCode',\n npm: {\n package: '@alifd/fusion-ui',\n version: '{{version}}',\n exportName: 'TabContainer',\n main: 'lib/index.js',\n destructuring: true,\n subName: 'Item',\n },\n configure: {\n props: [\n {\n title: {\n label: {\n type: 'i18n',\n 'en-US': 'title',\n 'zh-CN': '选项卡标题',\n },\n tip: 'title | 选项卡标题',\n },\n name: 'title',\n description: '选项卡标题',\n setter: {\n componentName: 'StringSetter',\n isRequired: false,\n initialValue: '',\n },\n },\n {\n title: {\n label: {\n type: 'i18n',\n 'en-US': 'closeable',\n 'zh-CN': '单个选项卡是否可关闭',\n },\n tip: 'closeable | 单个选项卡是否可关闭',\n },\n name: 'closeable',\n description: '单个选项卡是否可关闭',\n setter: {\n componentName: 'StringSetter',\n isRequired: false,\n initialValue: '',\n },\n },\n {\n title: {\n label: {\n type: 'i18n',\n 'en-US': 'disabled',\n 'zh-CN': '选项卡是否被禁用',\n },\n tip: 'disabled | 选项卡是否被禁用',\n },\n name: 'disabled',\n description: '选项卡是否被禁用',\n setter: {\n componentName: 'StringSetter',\n isRequired: false,\n initialValue: '',\n },\n },\n {\n title: {\n label: {\n type: 'i18n',\n 'en-US': 'prefix',\n 'zh-CN': '样式类名的品牌前缀',\n },\n tip: 'prefix | 样式类名的品牌前缀',\n },\n name: 'prefix',\n description: '样式类名的品牌前缀',\n setter: {\n componentName: 'StringSetter',\n isRequired: false,\n initialValue: '',\n },\n },\n {\n title: {\n label: {\n type: 'i18n',\n 'en-US': 'locale',\n 'zh-CN': '国际化文案对象，属性',\n },\n tip: 'locale | 国际化文案对象，属性为组件的 displayName',\n },\n name: 'locale',\n description: '国际化文案对象，属性为组件的 displayName',\n setter: {\n componentName: 'StringSetter',\n isRequired: false,\n initialValue: '',\n },\n },\n {\n title: {\n label: {\n type: 'i18n',\n 'en-US': 'pure',\n 'zh-CN': '是否开启 Pure ',\n },\n tip: 'pure | 是否开启 Pure Render 模式，会提高性能，但是也会带来副作用',\n },\n name: 'pure',\n description: '是否开启 Pure Render 模式，会提高性能，但是也会带来副作用',\n setter: {\n componentName: 'StringSetter',\n isRequired: false,\n initialValue: '',\n },\n },\n {\n title: {\n label: {\n type: 'i18n',\n 'en-US': 'warning',\n 'zh-CN': '是否在开发模式下显示',\n },\n tip: 'warning | 是否在开发模式下显示组件属性被废弃的 warning 提示',\n },\n name: 'warning',\n description: '是否在开发模式下显示组件属性被废弃的 warning 提示',\n setter: {\n componentName: 'StringSetter',\n isRequired: false,\n initialValue: '',\n },\n },\n {\n title: {\n label: {\n type: 'i18n',\n 'en-US': 'rtl',\n 'zh-CN': '是否开启 rtl 模',\n },\n tip: 'rtl | 是否开启 rtl 模式',\n },\n name: 'rtl',\n description: '是否开启 rtl 模式',\n setter: {\n componentName: 'StringSetter',\n isRequired: false,\n initialValue: '',\n },\n },\n ],\n supports: {\n events: [\n {\n name: 'onClick',\n },\n {\n name: 'onChange',\n },\n ],\n style: true,\n },\n component: {\n isContainer: true,\n disableBehaviors: '*',\n },\n advanced: {\n hideSelectTools: true,\n callbacks: {\n onMouseDownHook: () => false,\n onClickHook: () => false,\n },\n },\n },\n};\n\nconst TabContainerMeta: ComponentMetadata[] = [\n {\n componentName: 'TabContainer',\n title: '选项卡',\n category: '布局容器类',\n group: '精选组件',\n docUrl: '',\n screenshot:\n 'https://img.alicdn.com/imgextra/i4/O1CN01mh9LPG268B90t8DaA_!!6000000007616-55-tps-56-56.svg',\n devMode: 'proCode',\n npm: {\n package: '@alifd/fusion-ui',\n version: '{{version}}',\n exportName: 'TabContainer',\n main: 'lib/index.js',\n destructuring: true,\n subName: '',\n },\n configure: {\n component: {\n isContainer: true,\n nestingRule: {\n childWhitelist: ['TabContainer.Item'],\n },\n },\n props,\n supports: {\n style: true,\n },\n },\n snippets,\n },\n tabItemMeta,\n // compatible with the exsting json schema which has componentName: Tab.Item\n {\n ...tabItemMeta,\n componentName: 'Tab.Item',\n }\n];\n\nexport default TabContainerMeta;\n"
},
{
"path": "packages/fusion-ui/lowcode/tab-container/props.ts",
"content": "export default [\n {\n name: 'items',\n title: '标签项',\n setter: {\n componentName: 'ArraySetter',\n props: {\n itemSetter: {\n componentName: 'ObjectSetter',\n props: {\n config: {\n items: [\n {\n name: 'title',\n title: '名称',\n defaultValue: '标签项',\n important: true,\n setter: 'StringSetter',\n },\n {\n name: 'primaryKey',\n title: '项目编号',\n condition: () => false,\n setter: 'StringSetter',\n },\n {\n name: 'closeable',\n title: '可关闭',\n initialValue: false,\n setter: 'BoolSetter',\n },\n {\n name: 'disabled',\n title: '是否禁用',\n initialValue: false,\n setter: 'BoolSetter',\n },\n ],\n },\n },\n initialValue: () => {\n return {\n primaryKey: String(Math.floor(Math.random() * 10000)),\n title: '标签项',\n closeable: false,\n disabled: false,\n };\n },\n },\n },\n },\n extraProps: {\n getValue(target) {\n const map = target.node.children.map((child) => {\n const primaryKey = child.getPropValue('primaryKey')\n ? String(child.getPropValue('primaryKey'))\n : child.id;\n return {\n primaryKey,\n title: child.getPropValue('title') || '标签项',\n closeable: child.getPropValue('closeable'),\n disabled: child.getPropValue('disabled'),\n };\n });\n return map;\n },\n setValue(target, value) {\n const { node } = target;\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: 'TabContainer.Item',\n props: map[primaryKey],\n });\n }\n }\n return items;\n },\n (child1, child2) => {\n const a = value.findIndex(\n (item) => String(item.primaryKey) === String(child1.getPropValue('primaryKey')),\n );\n const b = value.findIndex(\n (item) => String(item.primaryKey) === String(child2.getPropValue('primaryKey')),\n );\n return a - b;\n },\n );\n },\n },\n },\n {\n name: 'shape',\n title: '形态',\n defaultValue: 'pure',\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: [\n { title: '普通型', value: 'pure' },\n { title: '包裹型', value: 'wrapped' },\n { title: '文本型', value: 'text' },\n { title: '胶囊型', value: 'capsule' },\n ],\n },\n },\n },\n {\n name: 'size',\n title: '尺寸',\n defaultValue: 'medium',\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: [\n { title: '小', value: 'small' },\n { title: '中', value: 'medium' },\n ],\n },\n },\n },\n {\n name: 'excessMode',\n title: '选项卡过多时的滑动模式',\n defaultValue: 'slide',\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: [\n { title: '滑动', value: 'slide' },\n { title: '下拉', value: 'dropdown' },\n ],\n },\n },\n },\n {\n name: 'tabPosition',\n title: {\n label: '导航选项卡的位置',\n tip: '只适用于包裹型（wrapped）选项卡',\n },\n condition: (target) => {\n const shape = target.getProps().getPropValue('shape');\n return shape === 'wrapped';\n },\n defaultValue: 'top',\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: [\n {\n title: '顶部',\n value: 'top',\n },\n {\n title: '底部',\n value: 'bottom',\n },\n {\n title: '左边',\n value: 'left',\n },\n {\n title: '右边',\n value: 'right',\n },\n ],\n },\n },\n },\n];\n"
},
{
"path": "packages/fusion-ui/lowcode/tree-select/meta.js",
"content": "import { wrapFormItemProps } from '../utils/form-utils';\n\nexport default {\n componentName: 'FormTreeSelect',\n isFormItemComponent: true,\n title: '树型选择控件',\n docUrl: '',\n screenshot: '',\n npm: {\n package: '@alifd/fusion-ui',\n version: '{{version}}',\n exportName: 'FormTreeSelect',\n main: '',\n destructuring: true,\n subName: '',\n },\n configure: {\n props: wrapFormItemProps([\n {\n name: 'placeholder',\n title: {\n label: '占位提示',\n tip: '属性: placeholder',\n },\n defaultValue: '请选择', // 不生效\n setter: 'StringSetter',\n },\n {\n name: 'hasClear',\n title: {\n label: '清除按钮',\n tip: '属性: hasClear',\n },\n setter: 'BoolSetter',\n defaultValue: false,\n },\n {\n name: 'showSearch',\n title: {\n label: '可搜索',\n tip: '属性: showSearch',\n },\n setter: 'BoolSetter',\n defaultValue: false,\n },\n {\n name: 'label',\n title: '内联文案',\n setter: {\n componentName: 'StringSetter',\n },\n },\n {\n name: 'dataSource',\n title: {\n label: '节点数据',\n tip: '数据源',\n },\n setter: 'JsonSetter',\n },\n ]),\n },\n icon: '',\n category: '内容',\n};\n"
},
{
"path": "packages/fusion-ui/lowcode/tree-select/snippets.js",
"content": "module.exports = [\n {\n title: '树型选择控件',\n screenshot:\n 'https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_tree-select.png',\n schema: {\n componentName: 'TreeSelect',\n props: {\n prefix: 'next-',\n size: 'medium',\n hasArrow: true,\n hasBorder: true,\n autoWidth: true,\n notFoundContent: 'Not Found',\n treeCheckedStrategy: 'parent',\n },\n },\n },\n {\n title: '树形控件',\n screenshot:\n 'https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_tree.png',\n schema: {\n componentName: 'Tree',\n props: {\n prefix: 'next-',\n selectable: true,\n checkedStrategy: 'all',\n autoExpandParent: true,\n animation: true,\n focusable: true,\n },\n },\n },\n];\n"
},
{
"path": "packages/fusion-ui/lowcode/types/index.ts",
"content": "import { IPublicTypeComponentMetadata, IPublicTypeSnippet, IPublicTypeFieldConfig, IPublicModelSettingField } from '@alilc/lowcode-types';\n\nexport interface ISnippet extends IPublicTypeSnippet {\n label?: string;\n title?: string;\n}\n\nexport interface IComponentDescription extends IPublicTypeComponentMetadata {\n snippets?: ISnippet[];\n}\n\nexport interface IProps extends IPublicTypeFieldConfig {\n showInListSetter?: boolean;\n initialValue?: Function | any;\n editable?: boolean;\n items?: IProps[] | IPublicTypeFieldConfig[];\n}\n\nexport interface SetterProps {\n forceInline?: boolean;\n key?: string;\n prop?: IPublicModelSettingField;\n selected?: any;\n field?: IPublicModelSettingField;\n value: any;\n onChange: Function;\n onInitial?: Function;\n\n removeProp?: Function;\n}\n\nexport interface IAssets {\n components?: IComponentDescription[];\n}\n"
},
{
"path": "packages/fusion-ui/lowcode/upload/meta.js",
"content": "import { wrapFormItemProps } from '../utils/form-utils';\n\nexport default {\n componentName: 'FormUpload',\n isFormItemComponent: true,\n title: '上传',\n docUrl: '',\n screenshot: '',\n npm: {\n package: '@alifd/fusion-ui',\n version: '{{version}}',\n exportName: 'FormUpload',\n main: '',\n destructuring: true,\n subName: '',\n },\n props: [\n {\n name: 'action',\n propType: 'string',\n description: '上传的地址',\n },\n {\n name: 'value',\n propType: {\n type: 'Json',\n },\n description: '文件列表',\n },\n {\n name: 'defaultValue',\n propType: 'object',\n description: '默认文件列表',\n },\n {\n name: 'shape',\n propType: {\n type: 'oneOf',\n value: ['card'],\n },\n description: '上传按钮形状',\n },\n {\n name: 'listType',\n propType: {\n type: 'oneOf',\n value: ['text', 'image', 'card'],\n },\n description: '上传列表的样式',\n },\n {\n name: 'name',\n propType: 'string',\n description: '文件名字段',\n },\n {\n name: 'data',\n propType: {\n type: 'oneOfType',\n value: ['object', 'func'],\n },\n description: '上传额外传参',\n },\n {\n name: 'formatter',\n propType: 'func',\n title: {\n label: '数据格式化函数',\n tip: '数据格式化函数，配合自定义 action 使用，参数为服务器的响应数据，详见 [formatter](#formater)\\n@param {Object} response 返回\\n@param {File} file 文件对象',\n },\n },\n {\n name: 'limit',\n propType: 'number',\n description: '最大文件上传个数',\n defaultValue: null,\n },\n {\n name: 'timeout',\n propType: 'number',\n description: '设置上传超时,单位ms',\n },\n {\n name: 'dragable',\n propType: 'bool',\n description: '可选参数，是否支持拖拽上传，`ie10+` 支持。',\n },\n {\n name: 'useDataURL',\n propType: 'bool',\n description: '可选参数，是否本地预览',\n },\n {\n name: 'disabled',\n propType: 'bool',\n description: '可选参数，是否禁用上传功能',\n },\n {\n name: 'onSelect',\n propType: 'func',\n description: '选择文件回调',\n },\n {\n name: 'onProgress',\n propType: 'func',\n description: '上传中',\n },\n {\n name: 'onChange',\n propType: 'func',\n description: '上传文件改变时的状态\\n@param {Object} info 文件事件对象',\n },\n {\n name: 'onSuccess',\n propType: 'func',\n description:\n '可选参数，上传成功回调函数，参数为请求下响应信息以及文件\\n@param {Object} file 文件\\n@param {Array} value 值',\n },\n {\n name: 'afterSelect',\n propType: 'func',\n description:\n '可选参数, 用于校验文件,afterSelect仅在 autoUpload=false 的时候生效,autoUpload=true时,可以使用beforeUpload完全可以替代该功能.\\n@param {Object} file\\n@returns {Boolean} 返回false会阻止上传,其他则表示正常',\n },\n {\n name: 'onRemove',\n propType: 'func',\n description:\n '移除文件回调函数\\n@param {Object} file 文件\\n@returns {Boolean|Promise} 返回 false、Promise.resolve(false)、 Promise.reject() 将阻止文件删除',\n },\n {\n name: 'onError',\n propType: 'func',\n description:\n '可选参数，上传失败回调函数，参数为上传失败的信息、响应信息以及文件\\n@param {Object} file 出错的文件\\n@param {Array} value 当前值',\n },\n {\n name: 'beforeUpload',\n propType: 'func',\n title: {\n label: '开始上传时回调',\n tip: '可选参数, 详见 [beforeUpload](#beforeUpload)\\n@param {Object} file 所有文件\\n@param {Object} options 参数\\n@returns {Boolean|Object|Promise} 返回值作用见demo',\n },\n },\n {\n name: 'onDrop',\n propType: 'func',\n description: '放文件',\n },\n {\n name: 'className',\n propType: 'string',\n description: '自定义class',\n },\n {\n name: 'style',\n propType: 'object',\n description: '自定义内联样式',\n },\n {\n name: 'autoUpload',\n propType: 'bool',\n description: '自动上传',\n defaultValue: true,\n },\n {\n name: 'request',\n propType: 'func',\n description:\n '自定义上传方法\\n@param {Object} option\\n@return {Object} object with abort method',\n },\n {\n name: 'progressProps',\n propType: 'object',\n description: '透传给Progress props',\n },\n {\n name: 'isPreview',\n propType: 'bool',\n description: '是否为预览态',\n },\n {\n name: 'renderPreview',\n propType: 'func',\n description: '预览态模式下渲染的内容\\n@param {number} value 评分值',\n },\n ],\n configure: {\n props: wrapFormItemProps([\n {\n name: 'defaultValue',\n title: '默认值',\n setter: {\n componentName: 'JsonSetter',\n },\n },\n {\n name: 'shape',\n title: '按钮形状',\n defaultValue: '',\n setValue: (target, value) => {\n const { node } = target;\n if (value === 'card') {\n node.removeChild(node.children.get(0));\n } else {\n node.children?.importSchema({\n componentName: 'Button',\n props: {\n children: '上传文件',\n type: 'primary',\n },\n });\n }\n },\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: [\n {\n title: '默认',\n value: '',\n },\n {\n title: '卡片',\n value: 'card',\n },\n ],\n },\n },\n description: '上传按钮形状',\n },\n {\n name: 'listType',\n title: '列表样式',\n setter: {\n componentName: 'RadioGroupSetter',\n props: {\n options: ['text', 'image', 'card'],\n },\n },\n defaultValue: 'text',\n description: '上传列表的样式',\n },\n {\n name: 'limit',\n title: '数量限制',\n setter: 'NumberSetter',\n },\n {\n name: 'disabled',\n title: '是否禁用',\n setter: 'BoolSetter',\n },\n {\n type: 'group',\n title: '高级',\n display: 'block',\n items: [\n {\n name: 'id',\n title: {\n label: {\n type: 'i18n',\n zh_CN: '唯一标识',\n en_US: 'ID',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: id | 说明: 唯一标识',\n en_US: 'prop: id | description: switch id',\n },\n },\n setter: 'StringSetter',\n },\n {\n name: 'name',\n title: {\n label: {\n type: 'i18n',\n zh_CN: '表单标识',\n en_US: 'Name',\n },\n tip: {\n type: 'i18n',\n zh_CN: '属性: name | 说明: 表单标识',\n en_US: 'prop: name | description: switch name',\n },\n },\n setter: 'StringSetter',\n },\n ],\n },\n ]),\n },\n advanced: {\n initialChildren: [\n {\n componentName: 'Button',\n props: {\n children: '上传文件',\n type: 'primary',\n },\n },\n ],\n initials: [\n {\n name: 'shape',\n initial: () => '',\n },\n ],\n },\n icon: '',\n category: '内容',\n};\n"
},
{
"path": "packages/fusion-ui/lowcode/utils/form-utils.ts",
"content": "import { IProps } from '../types';\n\nimport { default as formItemProps } from '../pro-form/common/form-item-props';\n\nexport const wrapFormItemProps = (props: IProps[]) => {\n return [\n ...formItemProps,\n {\n name: 'componentProps',\n title: '组件配置',\n extraProps: {\n display: 'accordion',\n defaultCollapsed: true,\n },\n type: 'group',\n items: props.filter((item) => item.title !== '高级'),\n },\n ];\n};\n"
},
{
"path": "packages/fusion-ui/lowcode/utils/index.ts",
"content": "export const hideProp = () => false;\n\nexport function isJSExpression(data: any) {\n return data && data.type === 'JSExpression';\n}\n\nexport const deepEqual = function (x, y) {\n if (x === y) {\n return true;\n } else if (typeof x === 'object' && x != null && typeof y === 'object' && y !== null) {\n if (Object.keys(x).length !== Object.keys(y).length) return false;\n\n for (const prop in x) {\n if (y.hasOwnProperty(prop)) {\n if (!deepEqual(x[prop], y[prop])) return false;\n } else return false;\n }\n\n return true;\n } else return false;\n};\n\nexport const showWithLabelAlign = (target) => {\n const parentLabelAlign = target && target.parent.node.parent.getPropValue('labelAlign');\n const labelAlign = parentLabelAlign || (target && target.parent.getPropValue('labelAlign'));\n if (labelAlign === 'top') {\n const enableLabelTip = target.parent.getPropValue('labelTip.enable');\n if (enableLabelTip) {\n return target.name.startsWith('labelTip');\n }\n return target.name === 'labelTip.enable';\n }\n if (labelAlign === 'inset') {\n return target.name.startsWith('wrapper');\n }\n if (labelAlign === 'left') {\n return !target.name.startsWith('labelTip');\n }\n return true;\n};\n\nexport const showWithLabelAlignShortcut = (target) => {\n const { labelAlign: parentLabelAlign } = target && target.parent.node.propsData;\n const labelAlign = parentLabelAlign || (target && target.parent.getPropValue('labelAlign'));\n if (labelAlign === 'top') {\n const enableLabelTip = target.parent.getPropValue('labelTip.enable');\n if (enableLabelTip) {\n return target.name.startsWith('labelTip');\n }\n return target.name === 'labelTip.enable';\n }\n if (labelAlign === 'inset') {\n return target.name.startsWith('wrapper');\n }\n if (labelAlign === 'left') {\n return !target.name.startsWith('labelTip');\n }\n return true;\n};\n\nexport const showWithFormItemType = (target, type) => {\n const formItemType = target && target.getProps().getPropValue('type');\n return formItemType === type;\n};\n\nexport const propsFormWrapper = (props, formItemType) => {\n return props.map((item) => {\n item.condition = (target) => {\n return showWithFormItemType(target, formItemType);\n };\n item.name = `componentPorps.${item.name}`;\n return item;\n });\n};\n\nexport const getParentValue = (target) => {\n return target.getProps().node.parent.getPropValue(target.name);\n};\n\nexport const uuid = () => Math.random().toString(36).substr(-6);\nexport const mockId = () => `id-${uuid()}`;\n"
},
{
"path": "packages/fusion-ui/lowcode/utils/keybindingService.ts",
"content": "interface cbFunc {\n (node: any, e: KeyboardEvent): void;\n}\n\nexport interface IKeyBinding {\n command: string;\n keybinding: string | string[];\n components: string | string[];\n cb: cbFunc;\n desc?: string;\n}\n\n/* example\nexport const KeybindingMap: IKeyBinding[] = [\n {\n command: 'updateColSpan',\n keybinding: 's',\n components: ['NextBlockCell'],\n cb: (node) => {\n updateColSpan({\n parent: node.parent,\n child: node,\n type: 'split',\n });\n },\n },\n];\n*/\n\nclass KeybindingService {\n hotkey: any;\n designer: any;\n keybindingMap: IKeyBinding[];\n\n constructor() {\n const engine = (window.parent as any).AliLowCodeEngine;\n this.hotkey = engine.hotkey;\n this.designer = engine.designer;\n this.keybindingMap = [];\n }\n bind(kb: IKeyBinding) {\n if (kb.command && this.keybindingMap.find((k) => k.command === kb.command)) {\n console.warn('KeybindingService Error[duplicated command]', kb.command);\n return;\n }\n\n this.keybindingMap.push(kb);\n this.hotkey.bind(kb.keybinding, (e: KeyboardEvent) => {\n const node = this.getSelectedNode();\n if (!node) {\n console.warn(`No node select on keydown: ${kb.keybinding}`);\n return;\n }\n\n if (!this.isValidNode(node, kb)) {\n console.warn(`Not valid node for keydown target: ${kb.keybinding}`);\n return;\n }\n kb.cb.apply(null, [node, e]);\n });\n }\n // unbind, hotkey 暂时不支持\n execCommand(command: string, node: any, ...rest: any[]) {\n const targetKb = this.keybindingMap.find((kb) => kb.command === command);\n if (!targetKb) {\n console.warn(`No command founded from keybindingMap: ${command}`);\n return;\n }\n\n if (!node || !this.isValidNode(node, targetKb)) {\n console.warn(`Not valid node target for command: ${command} ${node}`);\n return;\n }\n\n targetKb.cb.apply(null, [node, ...rest]);\n }\n private getSelectedNode() {\n const selectedNodeId = this.designer.currentDocument.selection.selected[0];\n return selectedNodeId ? this.designer.currentDocument.nodesMap.get(selectedNodeId) : null;\n }\n private isValidNode(node: any, kb: IKeyBinding) {\n return kb.components.includes(node.componentName);\n }\n}\n\nexport const keybindingService = new KeybindingService();\n"
},
{
"path": "packages/fusion-ui/lowcode/week-picker/meta.js",
"content": "export default {\n componentName: 'WeekPicker',\n title: 'WeekPicker',\n docUrl: '',\n screenshot: '',\n npm: {\n package: '@alifd/next',\n version: '{{version}}',\n exportName: 'DatePicker',\n main: '',\n destructuring: true,\n subName: 'WeekPicker',\n },\n props: [\n {\n name: 'prefix',\n propType: 'string',\n defaultValue: 'next-',\n },\n {\n name: 'rtl',\n propType: 'bool',\n defaultValue: false,\n },\n {\n name: 'label',\n propType: {\n type: 'instanceOf',\n value: 'node',\n },\n description: '表单项内置标签',\n },\n {\n name: 'state',\n propType: {\n type: 'oneOf',\n value: ['success', 'loading', 'error'],\n },\n description: '表单项状态',\n },\n {\n name: 'placeholder',\n propType: 'string',\n description: '输入提示',\n },\n {\n name: 'defaultVisibleMonth',\n propType: 'func',\n description: '默认展现的月\\n@return {MomentObject} 返回包含指定月份的 moment 对象实例',\n },\n {\n name: 'onVisibleMonthChange',\n propType: 'func',\n },\n {\n name: 'value',\n propType: {\n type: 'instanceOf',\n value: 'custom',\n },\n description: '日期值（受控）moment 对象',\n },\n {\n name: 'defaultValue',\n propType: {\n type: 'instanceOf',\n value: 'custom',\n },\n description: '初始日期值，moment 对象',\n },\n {\n name: 'format',\n propType: 'string',\n description: '日期值的格式（用于限定用户输入和展示）',\n defaultValue: 'YYYY-wo',\n },\n {\n name: 'disabledDate',\n propType: 'func',\n description:\n '禁用日期函数\\n@param {MomentObject} 日期值\\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\\n@return {Boolean} 是否禁用',\n },\n {\n name: 'footerRender',\n propType: 'func',\n description: '自定义面板页脚\\n@return {Node} 自定义的面板页脚组件',\n },\n {\n name: 'onChange',\n propType: 'func',\n description: '日期值改变时的回调\\n@param {MomentObject|String} value 日期值',\n },\n {\n name: 'size',\n propType: {\n type: 'oneOf',\n value: ['small', 'medium', 'large'],\n },\n description: '表单项尺寸',\n defaultValue: 'medium',\n },\n {\n name: 'disabled',\n propType: 'bool',\n description: '是否禁用',\n },\n {\n name: 'hasClear',\n propType: 'bool',\n description: '是否显示清空按钮',\n defaultValue: true,\n },\n {\n name: 'visible',\n propType: 'bool',\n description: '弹层显示状态',\n },\n {\n name: 'defaultVisible',\n propType: 'bool',\n description: '弹层默认是否显示',\n defaultValue: false,\n },\n {\n name: 'onVisibleChange',\n propType: 'func',\n description:\n '弹层展示状态变化时的回调\\n@param {Boolean} visible 弹层是否显示\\n@param {String} type 触发弹层显示和隐藏的来源 calendarSelect 表示由日期表盘的选择触发； okBtnClick 表示由确认按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发',\n },\n {\n name: 'popupTriggerType',\n propType: {\n type: 'oneOf',\n value: ['click', 'hover'],\n },\n description: '弹层触发方式',\n defaultValue: 'click',\n },\n {\n name: 'popupAlign',\n propType: 'string',\n description: '弹层对齐方式,具体含义见 OverLay文档',\n defaultValue: 'tl tl',\n },\n {\n name: 'popupContainer',\n propType: 'any',\n description: '弹层容器\\n@param {Element} target 目标元素\\n@return {Element} 弹层的容器元素',\n },\n {\n name: 'popupStyle',\n propType: 'object',\n description: '弹层自定义样式',\n },\n {\n name: 'popupClassName',\n propType: 'string',\n description: '弹层自定义样式类',\n },\n {\n name: 'popupProps',\n propType: 'object',\n description: '弹层其他属性',\n },\n {\n name: 'followTrigger',\n propType: 'bool',\n description: '是否跟随滚动',\n },\n {\n name: 'inputProps',\n propType: 'object',\n description: '表单项其他属性',\n },\n {\n name: 'dateCellRender',\n propType: 'func',\n description:\n '自定义日期渲染函数\\n@param {Object} value 日期值（moment对象）\\n@returns {ReactNode}',\n },\n {\n name: 'monthCellRender',\n propType: 'func',\n description:\n '自定义月份渲染函数\\n@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象\\n@returns {ReactNode}',\n },\n {\n name: 'isPreview',\n propType: 'bool',\n description: '是否为预览态',\n },\n {\n name: 'renderPreview',\n propType: 'func',\n description: '预览态模式下渲染的内容\\n@param {MomentObject} value 年份',\n },\n {\n name: 'yearCellRender',\n propType: 'func',\n },\n {\n name: 'locale',\n propType: 'object',\n },\n {\n name: 'className',\n propType: 'string',\n },\n {\n name: 'name',\n propType: 'string',\n },\n {\n name: 'popupComponent',\n propType: {\n type: 'instanceOf',\n value: 'elementType',\n },\n },\n {\n name: 'popupContent',\n propType: {\n type: 'instanceOf',\n value: 'node',\n },\n },\n {\n name: 'style',\n propType: 'object',\n },\n ],\n category: '基础',\n};\n"
},
{
"path": "packages/fusion-ui/lowcode/year-picker/meta.js",
"content": "export default {\n componentName: 'YearPicker',\n title: 'YearPicker',\n docUrl: '',\n screenshot: '',\n npm: {\n package: '@alifd/next',\n version: '{{version}}',\n exportName: 'DatePicker',\n main: '',\n destructuring: true,\n subName: 'YearPicker',\n },\n props: [\n {\n name: 'prefix',\n propType: 'string',\n defaultValue: 'next-',\n },\n {\n name: 'rtl',\n propType: 'bool',\n defaultValue: false,\n },\n {\n name: 'label',\n propType: {\n type: 'instanceOf',\n value: 'node',\n },\n description: '表单项内置标签',\n },\n {\n name: 'state',\n propType: {\n type: 'oneOf',\n value: ['success', 'loading', 'error'],\n },\n description: '表单项状态',\n },\n {\n name: 'placeholder',\n propType: 'string',\n description: '输入提示',\n },\n {\n name: 'value',\n propType: {\n type: 'instanceOf',\n value: 'custom',\n },\n description: '日期值（受控）moment 对象',\n },\n {\n name: 'defaultValue',\n propType: {\n type: 'instanceOf',\n value: 'custom',\n },\n description: '初始日期值，moment 对象',\n },\n {\n name: 'format',\n propType: 'string',\n description: '日期值的格式（用于限定用户输入和展示）',\n defaultValue: 'YYYY',\n },\n {\n name: 'disabledDate',\n propType: 'func',\n description:\n '禁用日期函数\\n@param {MomentObject} 日期值\\n@param {String} view 当前视图类型，year: 年， month: 月, date: 日\\n@return {Boolean} 是否禁用',\n },\n {\n name: 'footerRender',\n propType: 'func',\n description: '自定义面板页脚\\n@return {Node} 自定义的面板页脚组件',\n },\n {\n name: 'onChange',\n propType: 'func',\n description: '日期值改变时的回调\\n@param {MomentObject|String} value 日期值',\n },\n {\n name: 'size',\n propType: {\n type: 'oneOf',\n value: ['small', 'medium', 'large'],\n },\n description: '表单项尺寸',\n defaultValue: 'medium',\n },\n {\n name: 'disabled',\n propType: 'bool',\n description: '是否禁用',\n },\n {\n name: 'hasClear',\n propType: 'bool',\n description: '是否显示清空按钮',\n defaultValue: true,\n },\n {\n name: 'visible',\n propType: 'bool',\n description: '弹层显示状态',\n },\n {\n name: 'defaultVisible',\n propType: 'bool',\n description: '弹层默认是否显示',\n },\n {\n name: 'onVisibleChange',\n propType: 'func',\n description:\n '弹层展示状态变化时的回调\\n@param {Boolean} visible 弹层是否显示\\n@param {String} reason 触发弹层显示和隐藏的来源 calendarSelect 表示由日期表盘的选择触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发',\n },\n {\n name: 'popupTriggerType',\n propType: {\n type: 'oneOf',\n value: ['click', 'hover'],\n },\n description: '弹层触发方式',\n defaultValue: 'click',\n },\n {\n name: 'popupAlign',\n propType: 'string',\n description: '弹层对齐方式, 具体含义见 OverLay文档',\n defaultValue: 'tl tl',\n },\n {\n name: 'popupContainer',\n propType: 'any',\n description: '弹层容器\\n@param {Element} target 目标元素\\n@return {Element} 弹层的容器元素',\n },\n {\n name: 'popupStyle',\n propType: 'object',\n description: '弹层自定义样式',\n },\n {\n name: 'popupClassName',\n propType: 'string',\n description: '弹层自定义样式类',\n },\n {\n name: 'popupProps',\n propType: 'object',\n description: '弹层其他属性',\n },\n {\n name: 'followTrigger',\n propType: 'bool',\n description: '是否跟随滚动',\n },\n {\n name: 'inputProps',\n propType: 'object',\n description: '表单项其他属性',\n },\n {\n name: 'yearCellRender',\n propType: 'func',\n },\n {\n name: 'dateInputAriaLabel',\n propType: 'string',\n description: '日期表单项的 aria-label 属性',\n },\n {\n name: 'isPreview',\n propType: 'bool',\n description: '是否为预览态',\n },\n {\n name: 'renderPreview',\n propType: 'func',\n description: '预览态模式下渲染的内容\\n@param {MomentObject} value 年份',\n },\n {\n name: 'locale',\n propType: 'object',\n },\n {\n name: 'className',\n propType: 'string',\n },\n {\n name: 'name',\n propType: 'string',\n },\n {\n name: 'popupComponent',\n propType: {\n type: 'instanceOf',\n value: 'elementType',\n },\n },\n {\n name: 'popupContent',\n propType: {\n type: 'instanceOf',\n value: 'node',\n },\n },\n {\n name: 'style',\n propType: 'object',\n },\n ],\n category: '基础',\n};\n"
},
{
"path": "packages/fusion-ui/package.json",
"content": "{\n \"name\": \"@alifd/fusion-ui\",\n \"version\": \"2.1.0\",\n \"description\": \"A component library based on Fusion Next\",\n \"files\": [\n \"es/\",\n \"lib/\",\n \"build/\",\n \"dist/\",\n \"lowcode/\",\n \"lowcode_lib/\",\n \"lowcode_es/\"\n ],\n \"main\": \"lib/index.js\",\n \"module\": \"es/index.js\",\n \"lowcodeEditMain\": \"build/lowcode/view.js\",\n \"stylePath\": \"style.js\",\n \"scripts\": {\n \"start\": \"npm run dumi\",\n \"build\": \"build-scripts build\",\n \"lowcode:dev\": \"build-scripts start --config ./build.lowcode.js\",\n \"lowcode:build\": \"build-scripts build --config ./build.lowcode.js\",\n \"test\": \"build-scripts test\",\n \"lint\": \"f2elint scan\",\n \"lint:fix\": \"f2elint fix\",\n \"dumi\": \"cross-env APP_ROOT=docs dumi dev\",\n \"dumi:build\": \"cross-env APP_ROOT=docs dumi build\",\n \"prepublishOnly\": \"npm run build && npm run lowcode:build && npm run dumi:build\"\n },\n \"keywords\": [\n \"react\",\n \"component\"\n ],\n \"dependencies\": {\n \"@alifd/layout\": \"^2.0.7\",\n \"@alifd/next\": \"^1.25.18\",\n \"@antv/data-set\": \"^0.11.8\",\n \"@sindresorhus/is\": \"^4.0.1\",\n \"ahooks\": \"^2.10.11\",\n \"bizcharts\": \"^4.1.16\",\n \"classnames\": \"^2.3.1\",\n \"framer-motion\": \"^4.1.17\",\n \"lodash\": \"^4.17.21\",\n \"moment\": \"^2.29.4\",\n \"numeral\": \"^2.0.6\",\n \"numvert\": \"^0.2.2\",\n \"prop-types\": \"^15.5.8\",\n \"qs\": \"^6.10.1\",\n \"rc-resize-observer\": \"^1.0.0\",\n \"react-beautiful-dnd\": \"^13.1.0\",\n \"react-sortablejs\": \"6.1.1\",\n \"sortablejs\": \"^1.14.0\",\n \"@babel/runtime\": \"^7.0.0\"\n },\n \"devDependencies\": {\n \"@alifd/theme-2\": \"^0.4.4\",\n \"node-sass\": \"^8.0.0\",\n \"@umijs/plugin-sass\": \"^1.1.1\",\n \"@alilc/lowcode-engine\": \"^1.0.0\",\n \"@alib/build-scripts\": \"^0.1.3\",\n \"@alifd/build-plugin-lowcode\": \"^0.4.0\",\n \"@types/lodash\": \"^4.14.177\",\n \"@types/react\": \"^16.14.15\",\n \"@types/react-dom\": \"^16.9.4\",\n \"build-plugin-component\": \"^1.12.0\",\n \"build-plugin-fusion\": \"^0.1.0\",\n \"build-plugin-load-assets\": \"^0.1.3\",\n \"build-plugin-moment-locales\": \"^0.1.0\",\n \"cross-env\": \"^7.0.3\",\n \"dumi\": \"^1.1.49\",\n \"enzyme\": \"^3.10.0\",\n \"enzyme-adapter-react-16\": \"^1.14.0\",\n \"eslint\": \"^6.0.1\",\n \"f2elint\": \"^1.2.0\",\n \"fs-extra\": \"^10.0.0\",\n \"marked\": \"^2.1.3\",\n \"prop-types\": \"^15.7.2\",\n \"remark-codesandbox\": \"^0.10.0\",\n \"reqwest\": \"^2.0.5\",\n \"to-string-loader\": \"^1.1.6\"\n },\n \"peerDependencies\": {\n \"@alifd/next\": \"1.x\",\n \"react\": \"^16.9.0\",\n \"react-dom\": \"^16.9.0\"\n },\n \"resolutions\": {\n \"webpack\": \"4.x\"\n },\n \"license\": \"MIT\",\n \"homepage\": \"https://unpkg.com/@alifd/fusion-ui@2.1.0/build/index.html\",\n \"componentConfig\": {\n \"name\": \"FusionUI\",\n \"category\": \"精品物料库\",\n \"isComponentLibrary\": true,\n \"materialSchema\": \"https://alifd.alicdn.com/npm/@alifd/fusion-ui@2.1.0/build/lowcode/assets-prod.json\"\n },\n \"husky\": {\n \"hooks\": {\n \"pre-commit\": \"f2elint commit-file-scan\",\n \"commit-msg\": \"f2elint commit-msg-scan\"\n }\n },\n \"materialConfig\": {\n \"fusion-site\": {\n \"id\": 1,\n \"name\": \"PC 官网\",\n \"url\": \"https://fusion.design/api/v1/sites/1/materials\"\n }\n },\n \"repository\": \"https://github.com/alibaba/lowcode-materials.git\",\n \"exports\": {\n \"./prototype\": {\n \"require\": \"./lowcode_lib/meta.js\",\n \"import\": \"./lowcode_es/meta.js\"\n },\n \"./prototypeView\": {\n \"require\": \"./lowcode_lib/view.js\",\n \"import\": \"./lowcode_es/view.js\"\n },\n \"./*\": \"./*\",\n \".\": {\n \"import\": \"./es/index.js\",\n \"require\": \"./lib/index.js\"\n }\n },\n \"lcMeta\": {\n \"type\": \"component\"\n }\n}"
},
{
"path": "packages/fusion-ui/src/common/operations/index.scss",
"content": "#{$biz-css-prefix}common-operations {\n &.operation-container {\n display: flex;\n align-items: center;\n padding-top: 15px;\n\n & > * {\n margin-left: 10px;\n }\n\n & > *:first-child {\n margin-left: 0;\n }\n\n &-operation-item + &-operation-item {\n margin-left: 10px;\n }\n\n &.operation-align-left {\n justify-content: flex-start;\n }\n\n &.operation-align-center {\n justify-content: center;\n }\n\n &.operation-align-right {\n justify-content: flex-end;\n }\n\n &.operation-fixed {\n width: calc(100vw - var(--sidebar-width, 0px));\n\n position: fixed;\n padding: 15px;\n z-index: 999;\n box-shadow: 0 -4px 10px 0 rgba(74, 91, 109, 0.1);\n background-color: #fff;\n bottom: 0;\n left: var(--sidebar-width, 0);\n }\n &.operation-absolute {\n width: 100%;\n padding: 15px;\n position: absolute;\n background-color: #fff;\n bottom: 0;\n left: 0;\n }\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/common/operations/index.tsx",
"content": "import * as React from 'react';\nimport moment from 'moment';\nimport classnames from 'classnames';\nimport { Icon, Form } from '@alifd/next';\n\nimport { bizCssPrefix } from '@/variables';\nimport { Button } from '@/components/button';\nimport { ButtonGroup, ButtonGroupProps } from '@/components/button-group';\n\nconst cssPrefix = `${bizCssPrefix}-common-operations`;\n\nexport interface OperationProps {\n operations?: any;\n operationConfig?: any;\n lastSaveTime?: any;\n renderDefaultBtns?: any;\n cssPrefix?: any;\n}\n\nconst Operations: React.FC = (props) => {\n const {\n cssPrefix: propCssPrefix,\n operations,\n operationConfig = {},\n lastSaveTime,\n renderDefaultBtns,\n } = props;\n const operationRef = React.useRef();\n\n const operationCssPrefix = 'operation-container';\n let classNames = classnames(\n propCssPrefix || cssPrefix,\n operationCssPrefix,\n operationConfig.align ? `operation-align-${operationConfig.align}` : 'operation-align-center',\n );\n\n if (operationConfig.fixed) {\n classNames = classnames(classNames, 'operation-fixed');\n }\n const saveTime = operationConfig.showSaveTime ? (\n \n \n ) : null;\n\n const buttonGroupProps: ButtonGroupProps = {};\n if (operationConfig.moreMenuButtonProps) {\n buttonGroupProps.moreMenuButtonProps = operationConfig.moreMenuButtonProps;\n }\n\n if (operationConfig.visibleButtonCount) {\n buttonGroupProps.visibleButtonCount = operationConfig.visibleButtonCount;\n }\n\n const defaultBtns =\n renderDefaultBtns && typeof renderDefaultBtns === 'function' ? renderDefaultBtns() : [];\n\n if ((!defaultBtns || !defaultBtns.length) && !operations) {\n return null;\n }\n\n if (!operations) {\n return (\n \n {defaultBtns} \n {saveTime}\n
\n );\n }\n\n const operationsView = (\n operations.type?.displayName === 'Slot' ? operations.props?.children || [] : operations\n ).map((operation: any, index: number) => {\n if (React.isValidElement(operation)) {\n return operation;\n }\n const { content, action, onActionClick, ...otherOperationProps } = operation;\n let BtnComp;\n if (action === 'submit') {\n BtnComp = Form.Submit;\n otherOperationProps.validate = true;\n otherOperationProps.htmlType = 'submit';\n } else if (action === 'reset') {\n BtnComp = Form.Reset;\n } else {\n BtnComp = Button;\n }\n if (onActionClick) {\n otherOperationProps.onClick = onActionClick;\n }\n return (\n \n {operation.content}\n \n );\n });\n if ((!defaultBtns || !defaultBtns.length) && (!operationsView || !operationsView.length)) {\n return null;\n }\n const isLowcodePlaceHolder = operationsView.some((item) => item?.type === 'div');\n return (\n \n \n {defaultBtns}\n {isLowcodePlaceHolder ? null : operationsView}\n \n {isLowcodePlaceHolder ? operationsView : null}\n {saveTime}\n
\n );\n};\n\nexport default Operations;\n"
},
{
"path": "packages/fusion-ui/src/components/anchor/components/HozAnchor/index.scss",
"content": "#{$biz-css-prefix}anchor-hoz-affix {\n z-index: 99;\n}\n\n#{$biz-css-prefix}anchor-hoz {\n padding: var(--s-4 $s-5, $s-4 $s-5);\n margin-bottom: var(--s-5, $s-5);\n background: var(--color-white, $color-white);\n border-radius: var(--corner-2, $corner-2);\n}\n"
},
{
"path": "packages/fusion-ui/src/components/anchor/components/HozAnchor/index.tsx",
"content": "import * as React from 'react';\nimport cx from 'classnames';\nimport { Affix } from '@alifd/next';\nimport { Segment } from '@/components/segment';\nimport { AnchorProps } from '../../index';\nimport { startListen, removeListen, jumpToNode } from '../../util';\n\nexport class HozAnchor extends React.Component> {\n state = {\n currentValue: '',\n container: null,\n };\n\n affixRef = React.createRef();\n\n componentDidMount() {\n const { dataSource, container, offsetY } = this.props;\n const _container = container();\n startListen(dataSource, () => _container, this.updateCurrentValue, {\n offsetY,\n });\n this.setState({\n container: _container,\n });\n }\n\n componentWillUnmount() {\n const { dataSource } = this.props;\n const { container } = this.state;\n removeListen(dataSource, () => container);\n }\n\n updateCurrentValue = (newValue) => {\n if (newValue === this.state.currentValue) {\n return;\n }\n this.setState({\n currentValue: newValue,\n });\n };\n\n onChange = (newValue) => {\n const { onChange } = this.props;\n const status = onChange && onChange(newValue);\n if (status !== false) {\n this.setState({\n currentValue: newValue,\n });\n jumpToNode(newValue);\n }\n };\n\n render() {\n const { dataSource, className, style, hasAffix, affixProps, containerRef, offsetY } = this.props;\n const { container } = this.state;\n const { currentValue } = this.state;\n\n const classes = cx({\n 'fusion-ui-anchor-hoz': true,\n [className]: !!className,\n });\n\n const segmentDataSource = dataSource.map((item) => ({\n label: item.label,\n value: item.htmlId,\n }));\n\n const anchorEl = (\n \n
\n );\n\n if (hasAffix) {\n const self = this.affixRef?.current?.getInstance?.();\n // FIXME: 为了解决一个页面多个 affix 会导致除最后一个 affix 外其余 affix 失效的问题，需要手动重新设置监听事件，\n // 但调用了 affix 的内部方法，如果 affix 新版本的这个内部方法有变动，则需要加上兼容逻辑\n const func = self?._setEventHandlerForContainer;\n if (typeof func === 'function') {\n func.call(self, () => container);\n }\n removeListen(dataSource, () => container)\n startListen(dataSource, () => container, this.updateCurrentValue, {\n offsetY,\n });\n\n\n return (\n container} {...affixProps}>\n {anchorEl}\n \n );\n }\n\n return anchorEl;\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/anchor/components/VerAnchor/AnchorList/AnchorLink.tsx",
"content": "import React from 'react';\nimport classNames from 'classnames';\nimport { Ellipsis } from '@/components/ellipsis/index';\n\nexport interface AnchorLinkProps {\n isFocus: boolean;\n label: string;\n htmlId: string;\n level: number;\n onSelect: (htmlId: string) => void;\n}\n\nexport class AnchorLink extends React.Component {\n static displayName = 'AnchorLink';\n\n static defaultProps = {\n onSelect: () => {},\n };\n\n render() {\n const { label, htmlId, isFocus, level, onSelect } = this.props;\n\n const cls = classNames({\n 'fusion-ui-anchor-item': true,\n [`fusion-ui-anchor-item-level-${level}`]: true,\n 'fusion-ui-anchor-item-active': !!isFocus,\n });\n\n return (\n onSelect(htmlId)}>\n {label} \n
\n );\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/anchor/components/VerAnchor/AnchorList/index.scss",
"content": "#{$biz-css-prefix}anchor-ver-menu {\n padding: var(--s-4, $s-4);\n background: var(--color-white, $color-white);\n box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);\n width: 160px;\n\n &-header {\n position: absolute;\n display: none;\n top: var(--s-4, $s-4);\n left: 14px;\n width: var(--s-1, $s-1);\n height: var(--s-3, $s-3);\n border-radius: 2px;\n background: var(--color-brand1-6, $color-brand1-6);\n transition: top 0.3s ease;\n }\n\n &-footer {\n border-left: 1px solid $color-line1-2;\n #{$biz-css-prefix}anchor-item {\n font-weight: var(--font-weight-medium, $font-weight-medium);\n font-size: var(--font-size-body-1, $font-size-body-1);\n color: var(--color-text1-4, $color-text1-4);\n\n &:hover {\n cursor: pointer;\n }\n\n &:not(:last-child) {\n margin-bottom: var(--s-4, $s-4);\n }\n\n &-active,\n &:hover {\n color: var(--color-brand1-6, $color-brand1-6);\n }\n\n &-level-1 {\n padding-left: var(--s-3, $s-3);\n }\n\n &-level-2 {\n padding-left: var(--s-5, $s-5);\n }\n }\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/anchor/components/VerAnchor/AnchorList/index.tsx",
"content": "import React from 'react';\nimport { AnchorLink, AnchorLinkProps } from './AnchorLink';\nimport { LinkItemData } from '../../../index';\n\ninterface AnchorListProps {\n value: string;\n dataSource: LinkItemData[];\n onSelect: (htmlId) => void;\n}\n\ninterface AnchorTocState {\n menuList: AnchorLinkProps[];\n}\n\n/**\n * 将原本的嵌套 dataSource 转换为扁平\n * 并直接将 focus 状态等计算好附加上\n * @param menuList 目标扁平列表，直接做修改\n * @param props 组件属性\n * @param level 锚点嵌套等级\n */\nconst renderMenu = (menuList, props, level: number) => {\n const { onSelect, dataSource, value } = props;\n dataSource.forEach((item) => {\n const isFocus = value === item.htmlId;\n menuList.push({\n level,\n label: item.label,\n htmlId: item.htmlId,\n isFocus,\n onSelect,\n });\n\n if (Array.isArray(item.children)) {\n renderMenu(menuList, { ...props, dataSource: item.children }, level + 1);\n }\n });\n};\n\nexport class AnchorList extends React.Component {\n static displayName = 'AnchorList';\n\n static defaultProps = {\n dataSource: [],\n };\n\n static getDerivedStateFromProps = (nextProps) => {\n const menuList = [];\n renderMenu(menuList, nextProps, 1);\n return {\n menuList,\n };\n };\n\n constructor(props) {\n super(props);\n const initialMenuList = [];\n renderMenu(initialMenuList, props, 1);\n this.state = {\n menuList: initialMenuList,\n };\n }\n\n render() {\n const { menuList } = this.state;\n const firstFocusIdx = menuList.findIndex((item) => item.isFocus);\n return (\n \n
\n
\n {menuList.map((item) => (\n
\n ))}\n
\n
> {\n static displayName = 'Anchor';\n\n static defaultProps = {\n defaultVisible: true,\n };\n\n state = {\n currentValue: '',\n visible: this.props.defaultVisible,\n container: null,\n };\n\n prefix = 'fusion-ui-anchor-ver';\n\n componentDidMount() {\n const { dataSource, container, offsetY } = this.props;\n const _container = container();\n startListen(dataSource, () => _container, this.updateCurrentValue, {\n offsetY,\n });\n this.setState({\n container: _container,\n });\n }\n\n componentWillUnmount() {\n const { dataSource } = this.props;\n const { container } = this.state;\n removeListen(dataSource, () => container);\n }\n\n changeMenuStatus = () => {\n const { visible } = this.state;\n this.setState({\n visible: !visible,\n });\n };\n\n updateCurrentValue = (newValue) => {\n this.setState({\n currentValue: newValue,\n });\n };\n\n handleScrollTop = () => {\n document.documentElement.scrollTop = 0;\n document.body.scrollTop = 0;\n };\n\n onChange = (newValue) => {\n const { onChange } = this.props;\n const status = onChange && onChange(newValue);\n if (status !== false) {\n this.setState({\n currentValue: newValue,\n });\n jumpToNode(newValue);\n }\n };\n\n render() {\n const { className, style, dataSource, scrollTop } = this.props;\n const { currentValue, visible } = this.state;\n const classes = cx({\n [this.prefix]: true,\n [`${this.prefix}-expand`]: visible,\n [className]: !!className,\n });\n\n return (\n \n \n \n \n );\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/anchor/index.scss",
"content": "@import './theme-dark.scss';\n@import './components/HozAnchor/index.scss';\n@import './components/VerAnchor/index.scss';\n@import './components/VerAnchor/AnchorList/index.scss';\n"
},
{
"path": "packages/fusion-ui/src/components/anchor/index.tsx",
"content": "import * as React from 'react';\n\nimport { VerAnchor } from './components/VerAnchor';\nimport { HozAnchor } from './components/HozAnchor';\nimport { AffixProps as NextAffixProps } from '@alifd/next/types/affix';\n\nexport interface LinkItemData {\n // 跳转的 htmlId\n htmlId: string;\n // 链接文案\n label: string;\n /**\n * 嵌套层级\n * 仅在 direction=\"ver\" 生效，且最大层级不超过二级\n */\n children?: LinkItemData[];\n}\n\nexport interface AnchorProps extends Omit, 'onChange'> {\n /**\n * 自定义样式名\n */\n className?: string;\n /**\n * 自定义样式\n */\n style?: React.CSSProperties;\n /**\n * 锚点方向\n * 水平方向 dataSource 不支持属性\n */\n direction?: 'ver' | 'hoz';\n /**\n * 锚点列表数据源\n */\n dataSource: LinkItemData[];\n /**\n * 设置是否为财鲸页面的锚点\n * 设置后会修改 container 为 () => document.querySelector('#fusion-ui-page > div.fusion-ui-page-content-wrapper');\n */\n isWhalePageAnchor?: boolean;\n /**\n * 容器，默认是 window\n */\n container?: () => React.ReactElement> | Element;\n /**\n * direction=\"hoz\" 生效\n * 开启可在滚动超出屏幕后固定在屏幕\n */\n hasAffix?: boolean;\n /**\n * hasAffix={true} 后使用\n * 用于覆盖 Affix 的属性值\n */\n affixProps?: NextAffixProps;\n /**\n * 点击不同锚点时的自定义触发函数\n * 默认跳转到对应 htmlId 节点\n * 可返回布尔值，如返回 false，则阻止默认跳转操作\n */\n onChange?: (htmlId: string) => boolean;\n /**\n * 垂直跳转偏移量\n */\n offsetY?: number;\n /**\n * [方向垂直可用]\n * 用于设定悬浮锚点的菜单是否默认展开\n * @default true\n */\n defaultVisible?: boolean;\n /**\n * 自定义滚动到页首的方法\n */\n scrollTop?: () => void;\n\n containerRef?: any;\n}\n\nfunction getScrollElement(element: HTMLElement) {\n if (!element) return element;\n if (elementCanScroll(element)) {\n return element;\n }\n return getScrollElement(element.parentElement);\n}\n\nfunction elementCanScroll(element: any) {\n if (!element || !(element instanceof HTMLElement)) {\n console.log('invalid element');\n return false;\n }\n if (element.scrollTop > 0) {\n return true;\n } else {\n element.scrollTop++;\n const top = element.scrollTop;\n top && (element.scrollTop = 0);\n return top > 0;\n }\n}\n\nexport class Anchor extends React.Component {\n static displayName = 'Anchor';\n static defaultProps = {\n direction: 'ver',\n isWhalePageAnchor: false,\n offsetY: 0,\n scrollTop: () => {\n const container =\n getScrollElement(document.querySelector('[class^=\"fusion-ui-anchor\"]')) ||\n document.documentElement;\n if (container) {\n container.scrollIntoView({ behavior: 'smooth' });\n }\n },\n };\n\n ref = React.createRef();\n\n render() {\n const { direction, isWhalePageAnchor, ...otherProps } = this.props;\n\n otherProps.container = otherProps.container\n ? otherProps.container\n : () => {\n\n let container = getScrollElement(this.ref?.current || document.querySelector('[class^=\"fusion-ui-anchor\"]'));\n if (!container || container === document.documentElement) {\n container = window;\n }\n return container;\n };\n\n if (direction === 'hoz') {\n return ;\n\nfunction AreaChart(props:Iprops) {\n return (\n ;\n\nfunction BarChart(props:Iprops) {\n return (\n {\n static displayName = 'Button';\n\n static getDerivedStateFromProps = (\n nextProps: ButtonProps,\n prevState: ButtonState = {\n showTooltip: false,\n tooltipMessage: '',\n triggerType: 'click',\n },\n ) => {\n const { tooltipProps = {} } = nextProps;\n return {\n ...prevState,\n ...tooltipProps,\n };\n };\n\n constructor(props: ButtonProps) {\n super(props);\n const { tooltipProps = {} } = props;\n this.state = {\n showTooltip: false,\n tooltipMessage: '',\n triggerType: 'click',\n ...tooltipProps,\n };\n }\n\n /**\n * @deprecated\n * @param message\n * @param triggerType\n */\n toggleTip = (message: string, triggerType: 'click' | 'hover') => {\n const { triggerType: stateTriggerType } = this.state;\n this.setState({\n showTooltip: true,\n tooltipMessage: message,\n triggerType: triggerType || stateTriggerType || 'click',\n });\n };\n\n enableTooltip = (triggerType: 'click' | 'hover' = 'click', message: string) => {\n const { triggerType: stateTriggerType } = this.state;\n this.setState({\n showTooltip: true,\n tooltipMessage: message,\n triggerType: triggerType || stateTriggerType || 'click',\n });\n };\n\n render() {\n const { showTooltip, tooltipMessage, triggerType } = this.state;\n const { badgeProps, id, ...otherProps } = this.props;\n const buttonComp = {buttonComp} ;\n }\n\n if (showTooltip) {\n finalComp = (\n \n {tooltipMessage}\n \n );\n }\n\n return {finalComp}
;\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/button/index.tsx",
"content": "export * from './Button';\n\n"
},
{
"path": "packages/fusion-ui/src/components/button-group/ButtonGroup.tsx",
"content": "import * as React from 'react';\nimport omit from 'lodash/omit';\nimport cx from 'classnames';\nimport { Button, ButtonProps } from '@/components/button';\nimport { MenuButton, MenuButtonProps } from '@/components/menu-button';\nimport { Space, SpaceProps } from '@/components/container';\nimport checkComName from '@/utils/checkComName';\n\nexport interface ButtonGroupProps extends SpaceProps {\n /**\n * 自定义样式\n */\n style?: React.CSSProperties;\n /**\n * 自定义样式名\n */\n className?: string;\n /**\n * 是否设定按钮为文字模式\n */\n text?: boolean;\n /**\n * 可见按钮数量，超过会收起到”更多“菜单中\n */\n visibleButtonCount?: number | false;\n /**\n * 数据源驱动，如传入 children，则以 children 优先\n */\n dataSource?: ButtonProps[];\n /**\n * \"更多\" 按钮的额外配置\n */\n moreMenuButtonProps?: Partial;\n /**\n * 国际化文案\n */\n i18nBundle?: any;\n}\n\nexport class ButtonGroup extends React.Component {\n static defaultProps = {\n visibleButtonCount: 3,\n moreMenuButtonProps: {},\n };\n\n static displayName = 'ButtonGroup';\n\n /**\n * 将 dataSource 和 children 处理成真正的 dataSource\n */\n getDataSource = () => {\n const { dataSource, children, text } = this.props;\n\n let externalProps: Partial = {};\n if (text) {\n externalProps = {\n type: 'primary',\n text: true,\n };\n }\n\n const realDataSource: object[] = [];\n\n if (children) {\n React.Children.forEach(children, (child) => {\n if (checkComName(child, Button)) {\n realDataSource.push({\n ...externalProps,\n ...child.props,\n });\n } else if (\n // 表单操作按钮逻辑兼容\n checkComName(child, null, [\n 'SubmitButton',\n 'ResetButton',\n 'Submit',\n 'Reset',\n 'Form.Submit',\n 'Form.Reset',\n 'Config(Button)',\n ])\n ) {\n realDataSource.push(child);\n }\n });\n } else if (Array.isArray(dataSource)) {\n dataSource.forEach((dataSourceItem) => {\n realDataSource.push({\n ...externalProps,\n ...dataSourceItem,\n });\n });\n }\n\n return realDataSource;\n };\n\n /**\n * 获取可展示的 dataSource & 折叠的 dataSource\n */\n getVisibleDataSourceAndCollapseDataSource = (dataSource) => {\n const { visibleButtonCount } = this.props;\n if (visibleButtonCount === false) {\n return {\n visible: dataSource,\n collapse: [],\n };\n }\n\n const visibleDataSource = [];\n const collapseDataSource = [];\n\n dataSource.forEach((dataSourceItem, idx) => {\n if (idx >= visibleButtonCount) {\n collapseDataSource.push(dataSourceItem);\n } else {\n visibleDataSource.push(dataSourceItem);\n }\n });\n\n return {\n visible: visibleDataSource,\n collapse: collapseDataSource,\n };\n };\n\n /**\n * 渲染可展示的 dataSource\n */\n renderVisible(dataSource) {\n const buttonList = [];\n dataSource.forEach((dataSourceItem, idx) => {\n if (React.isValidElement(dataSourceItem)) {\n buttonList.push(dataSourceItem);\n } else {\n buttonList.push(\n {this.renderVisible(visible)}\n {this.renderCollapse(collapse)}\n \n );\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/button-group/i18n.ts",
"content": "/**\n * 组件内置的多语言文案\n */\n\nconst bundles = {\n 'zh-CN': {\n more: '更多',\n },\n 'en-US': {\n more: 'More',\n },\n};\n\nexport default bundles;\n"
},
{
"path": "packages/fusion-ui/src/components/button-group/index.tsx",
"content": "import { withGlobal } from '@/provider';\nimport { ButtonGroup as PureButtonGroup, ButtonGroupProps } from './ButtonGroup';\n\nexport const ButtonGroup = withGlobal(PureButtonGroup, {\n i18nBundleName: 'ButtonGroup',\n});\nexport { ButtonGroupProps };\n"
},
{
"path": "packages/fusion-ui/src/components/column-chart/index.tsx",
"content": "import React from 'react';\nimport { ColumnChart as BizColumnChart } from 'bizcharts';\n\ntype Iprops = React.ComponentProps;\n\nfunction ColumnChart(props: Iprops) {\n const { meta, ...others } = props;\n\n return (\n ;\n /**\n * 列间距\n * @default 20\n */\n columnGap?: number;\n /**\n * 行间距\n * @default 20\n */\n rowGap?: number;\n /**\n * 是否开启响应式模式\n */\n responsive?: boolean;\n /**\n * 响应式导致列发生改变的时候的回调\n */\n onColumnChange?: (column) => void;\n /**\n * 容器的样式\n */\n style?: React.CSSProperties;\n /**\n * 子元素的样式控制\n */\n gridItemStyle?: React.CSSProperties;\n}\n\nconst DEFAULT_COLS = 4;\nconst Grid: React.FC = ({\n style,\n gridItemStyle,\n columnGap,\n rowGap,\n splot,\n cols: propsCols,\n area,\n className,\n children,\n responsive: propResponsive,\n onColumnChange,\n}) => {\n const responsive = !propsCols ? true : propResponsive;\n const [cols, setCols] = useState(propsCols);\n const gridRef = useRef();\n useEffect(() => {\n if (responsive) {\n new ResizeObserver((enties) => {\n for (const oGrid of enties) {\n const width = oGrid.target.clientWidth;\n let targetCols = DEFAULT_COLS;\n\n if (width <= 602) {\n targetCols = 1;\n } else if (width >= 603 && width <= 894) {\n targetCols = 2;\n } else if (width >= 895 && width <= 1187) {\n targetCols = 3;\n } else if (width >= 1188) {\n targetCols = 4;\n }\n if (targetCols !== cols) {\n onColumnChange(targetCols);\n }\n setCols(targetCols);\n }\n }).observe(gridRef.current);\n }\n }, [responsive]);\n\n return (\n \n {React.Children.map(\n compact(React.Children.toArray(children)),\n (item: React.ReactElement, index) => {\n const { colSpan, rowSpan, hidden } = item.props;\n const areaIndexData = [].concat(area?.[index]);\n const gridItemRow = rowSpan || areaIndexData?.[1] || 1;\n const gridItemColumn = colSpan || areaIndexData?.[0] || 1;\n\n return cloneElement(item, {\n style: {\n ...(item.props.style || {}),\n ...gridItemStyle,\n display: hidden ? 'none' : item.props.style?.display || null,\n gridRow: `span ${gridItemRow}`,\n gridColumn: `span ${gridItemColumn === 'full' ? cols : gridItemColumn}`,\n },\n });\n },\n )}\n {splot}\n \n );\n};\n\nGrid.defaultProps = {\n columnGap: 20,\n rowGap: 20,\n responsive: false,\n onColumnChange: () => {},\n};\n\nGrid.displayName = 'Grid';\n\nexport { Grid };\n"
},
{
"path": "packages/fusion-ui/src/components/container/Space.tsx",
"content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Divider, Box } from '@alifd/next';\nimport { BoxProps } from '@alifd/next/types/box';\n\ntype Direction = 'ver' | 'hoz' | 'hoz-reverse';\nexport interface SpaceProps extends Omit {\n /**\n * 子元素是否需要分割线\n */\n split?: boolean;\n /**\n * 子元素摆放方向\n */\n direction?: Direction;\n}\n// Box 组件本身的 `direction` api value 不符合语意规范\nconst directionMap = {\n ver: 'column',\n hoz: 'row',\n 'hoz-reverse': 'row-reverse',\n};\nclass Space extends React.Component {\n static displayName = 'Space';\n static propTypes = {\n ...Box.propTypes,\n split: PropTypes.bool,\n direction: PropTypes.oneOf(['hoz', 'ver', 'hoz-reverse']),\n };\n static defaultProps = {\n ...Box.defaultProps,\n spacing: 8,\n direction: 'hoz',\n split: false,\n };\n /**\n * 在子元素之间插入分隔符\n * @param {ReactNode} children Space组件子元素\n * @param {string} direction divider 方向\n * @returns React.Children\n */\n insertDividerIntoChildren = (children: React.ReactNode, direction: Direction) => {\n const withDividerChildren = [];\n const originalChildren = React.Children.toArray(children);\n originalChildren.forEach((item, index) => {\n withDividerChildren.push(item);\n if (index !== originalChildren.length - 1) {\n withDividerChildren.push(\n // Divider direction 跟 space 的 direction 是相反的\n \n {split ? this.insertDividerIntoChildren(children, direction) : children}\n \n );\n }\n}\n\nexport { Space };\n"
},
{
"path": "packages/fusion-ui/src/components/container/i18n.ts",
"content": "export default {\n 'zh-CN': {\n expand: '展开',\n hidden: '收起',\n primaryBtnText: '查询',\n secondaryBtnText: '重置',\n },\n en: {\n expand: 'More',\n hidden: 'Hide',\n primaryBtnText: 'Query',\n secondaryBtnText: 'Reset',\n },\n};\n"
},
{
"path": "packages/fusion-ui/src/components/container/index.tsx",
"content": "export * from './Grid';\nexport * from './Space';\n"
},
{
"path": "packages/fusion-ui/src/components/donut-chart/index.tsx",
"content": "import React from 'react';\nimport { DonutChart as MyChart } from 'bizcharts';\nimport DataSet from '@antv/data-set';\nimport numeral from 'numeral';\n\nconst { DataView } = DataSet;\nconst dv = new DataView();\n\nconst processStatistic = (statistic: string | object) => {\n return typeof statistic === 'string'\n ? {\n title: false,\n content: {\n style: {\n whiteSpace: 'pre-wrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n fontSize: '20',\n lineHeight: 1.2,\n },\n formatter: () => statistic,\n },\n }\n : statistic;\n};\n\ntype Iprops = React.ComponentProps;\n\n\nfunction DonutChart(props: Iprops) {\n const { data, statistic, ...others } = props || {};\n\n dv.source(data);\n // 求百分比\n dv.transform({\n type: 'percent',\n field: props?.angleField, // 统计字段\n dimension: props?.colorField, // 该字段的占比\n as: 'percent', // 结果存储在该字段\n });\n\n return (\n {\n const percent =\n typeof angleField?.percent === 'number'\n ? numeral(angleField?.percent).format('0.00%')\n : angleField?.percent;\n return [`${angleField?.[props?.colorField]} ${percent}`];\n },\n }}\n statistic={processStatistic(statistic)}\n {...others}\n />\n );\n}\n\nexport default DonutChart;\n"
},
{
"path": "packages/fusion-ui/src/components/ellipsis/index.scss",
"content": "@import './theme-dark.scss';\n\n/* 这里写你漂亮的样式 */\n.fusion-ui-ellipsis {\n white-space: nowrap;\n display: flex;\n &-header {\n flex: 1 1 0;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n &-footer {\n flex-shrink: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n}\n\n.fusion-ui-text-clip {\n display: inline-flex;\n &-inner {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/ellipsis/index.tsx",
"content": "import cx from 'classnames';\nimport * as React from 'react';\nimport { Balloon } from '@alifd/next';\n\nconst { Tooltip } = Balloon;\nexport interface FusionEllipsisProps {\n style?: React.CSSProperties;\n className?: string;\n /**\n * 用于决定省略号出现的位置\n */\n ellipsisPosition?: 'middle' | 'end';\n /**\n * 在 ellipsisPosition=\"middle\" 生效\n * 决定出现在末尾的字符串的数量\n */\n endCharCount?: number;\n /**\n * 是否有 tooltip\n */\n hasTooltip?: boolean;\n /**\n * tooltip 属性覆盖\n */\n tooltipProps?: any;\n}\n\ninterface FusionEllipsisState {\n isOverflow: boolean;\n}\n\nexport class Ellipsis extends React.Component {\n static displayName = 'Ellipsis';\n\n static defaultProps = {\n ellipsisPosition: 'end',\n endCharCount: 8,\n hasTooltip: true,\n };\n\n private textRef;\n\n constructor(props) {\n super(props);\n this.state = {\n isOverflow: false,\n };\n }\n\n componentDidMount() {\n if (this.props.ellipsisPosition === 'middle') {\n if (this.textRef && this.textRef.scrollWidth > this.textRef.offsetWidth) {\n this.setState({\n isOverflow: true,\n });\n }\n }\n }\n\n onMouseEnter = () => {\n if (this.textRef && this.textRef.scrollWidth > this.textRef.offsetWidth) {\n this.setState({\n isOverflow: true,\n });\n } else {\n this.setState({\n isOverflow: false,\n });\n }\n };\n\n saveTextRef = (ref) => {\n this.textRef = ref;\n };\n\n render() {\n const { isOverflow } = this.state;\n const {\n children,\n className,\n ellipsisPosition,\n endCharCount,\n hasTooltip,\n tooltipProps,\n ...otherProps\n } = this.props;\n\n const classes = cx({\n 'fusion-ui-ellipsis': true,\n [className]: !!className,\n });\n\n // 默认\n let trigger = (\n \n );\n\n // 省略号出现在中间\n if (isOverflow && ellipsisPosition === 'middle') {\n const startChildren = children.substr(0, children.length - endCharCount);\n const endChildren = children.substr(-endCharCount);\n trigger = (\n \n
\n {startChildren}\n
\n
{endChildren}
\n
\n {<>{children}}\n \n );\n }\n\n return trigger;\n }\n}\n\nexport interface TextClipProps {\n style?: React.CSSProperties;\n className?: string;\n /**\n * 待展示的文本\n */\n children: React.ReactNode;\n /**\n * 最多展示几行文本\n */\n line?: number;\n}\n\nexport const TextClip: React.FC = ({ children, style, line, className }) => {\n return (\n \n \n );\n};\n\nTextClip.defaultProps = {\n line: 2,\n};\n\nTextClip.displayName = 'TextClip';\n"
},
{
"path": "packages/fusion-ui/src/components/ellipsis/theme-dark.scss",
"content": "body.dark {\n /* 这里写暗色覆盖主题 */\n .fusion-ui-ellipsis {\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/expand-table/index.scss",
"content": ".fusion-ui-expand-table-child {\n padding: var(--s-3, $s-3);\n background: var(--color-fill1-1, $color-fill1-1);\n}\n"
},
{
"path": "packages/fusion-ui/src/components/expand-table/index.tsx",
"content": "import * as React from 'react';\nimport { AsyncDataSource } from '@/types';\nimport { ProTable } from '@/components/pro-table';\nimport { ProTableProps } from '../pro-table/types';\n\nexport interface ExpandTableDataProps {\n childTableProps: AsyncDataSource;\n}\n\nexport interface ExpandTableProps extends ProTableProps {\n /**\n * 表格数据源\n */\n dataSource?: ExpandTableDataProps[];\n}\n\n/**\n * 子母表\n */\nexport class ExpandTable extends React.Component {\n static displayName = 'ExpandTable';\n\n static defaultProps = {\n showActionBar: true,\n settingButtons: false,\n };\n\n render() {\n const { dataSource, children, ...otherProps } = this.props;\n const { primaryKey } = otherProps;\n if (!dataSource) return null;\n const parsedDataSource = dataSource.map((item) => {\n return item;\n });\n const expandedRowRender = (record: any) => {\n const { childTableProps } = record;\n\n return (\n \n );\n };\n\n return (\n \n {children}\n \n );\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/filter/index.scss",
"content": "@import './theme-dark.scss';\n\n#{$biz-css-prefix}filter {\n display: grid;\n &-buttons {\n display: flex;\n justify-content: flex-end;\n align-items: flex-end;\n padding-top: var(--s-4, $s-4);\n #{$biz-css-prefix}common-operations.operation-container {\n padding-top: 0;\n }\n .btns {\n display: inline-flex;\n button {\n margin-right: var(--s-2, $s-2);\n &:last-child {\n margin-right: 0;\n }\n }\n }\n &.left {\n padding-top: 0;\n justify-content: flex-start;\n }\n .inside-button {\n display: flex;\n justify-content: center;\n align-items: center;\n margin-right: 0;\n i:before {\n transform: scale(0.84);\n }\n }\n }\n &-configurator {\n background-color: var(--color-white, $color-white);\n box-shadow: var(--shadow-2, $shadow-2);\n margin-top: 4px;\n min-width: 200px;\n max-width: 300px;\n border-radius: 4px;\n &-title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 12px;\n border-bottom: 1px solid $color-line1-1;\n span {\n font-size: 14px;\n font-weight: bold;\n }\n i {\n color: var(--color-line1-3, $color-line1-3);\n font-weight: 200;\n padding: 0 1px;\n border-radius: 2px;\n transition: background-color 0.3s;\n &:hover {\n cursor: pointer;\n color: var(--color-line1-4, $color-line1-4);\n }\n }\n }\n &-body {\n padding: 4px;\n max-height: 400px;\n overflow: auto;\n &.dragover {\n #{$biz-css-prefix}icon-drag {\n display: none !important;\n }\n #{$biz-css-prefix}filter-configurator-item:not(.dragging) {\n background-color: transparent !important;\n }\n }\n }\n &-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-radius: 4px;\n padding: 0 8px 0 12px;\n height: 32px;\n user-select: none;\n &.dragging {\n background-color: #f4f5f8;\n }\n &:hover {\n background-color: var(--color-fill1-1 !important, $color-fill1-1 !important);\n #{$biz-css-prefix}icon-drag {\n display: block;\n }\n }\n #{$biz-css-prefix}icon-drag {\n color: var(--color-line1-4, $color-line1-4);\n display: none;\n &:hover {\n padding: 2px 0;\n background-color: var(--color-fill1-3, $color-fill1-3);\n border-radius: 2px;\n }\n // padding: 1px;\n // background-color: var(--color-fill1-1, $color-fill1-1);\n }\n #{$biz-css-prefix}checkbox-label {\n margin-left: 8px;\n }\n }\n }\n #{$biz-css-prefix}form-item {\n margin-bottom: 0;\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/filter/index.tsx",
"content": "import * as React from 'react';\nimport { Button, Checkbox, Overlay, Form } from '@alifd/next';\nimport cn from 'classnames';\nimport { Space, Grid, GridProps } from '@/components/container';\nimport compact from 'lodash/compact';\nimport { useI18nBundle } from '@/provider';\nimport { FormProps, Item } from '@alifd/next/types/form';\nimport { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';\nimport { ToggleIcon, CustomIcon } from '@/components/toggle-icon';\nimport { formatFormItems } from '@/components/pro-form/layouts/pro-form';\nimport Operations from '@/common/operations';\n\nconst { useState, useEffect, useRef, cloneElement } = React;\nexport const FilterItem: typeof Item = Form.Item;\n\ninterface IFilterConfig {\n key: string;\n visible: boolean;\n index: number;\n}\nexport interface FilterProps extends GridProps {\n /**\n * 是否展开，受控\n */\n expand?: boolean;\n /**\n * 是否默认展开，非受控\n */\n defaultExpand?: boolean;\n /**\n * 最多显示几行元素，超出部分将会提供「展开/收起」按钮\n */\n visibleRowCount?: number;\n /**\n * 是否开启配置筛选项\n */\n enableFilterConfiguration?: boolean;\n /**\n * 配置保存在本地 localStorage 中的 key，请确定为全局唯一\n * 建议命名方法为：业务域_产品_页面\n */\n configStorageKey?: string;\n /**\n * 展开收起回调\n */\n onExpand?: (expand: boolean) => void;\n /**\n * 是否显示「展开/收起」按钮\n * @default false\n */\n hideExpandButton?: boolean;\n /**\n * 是否显示默认的「查询/重置」按钮\n * @default false\n */\n hideDefaultButtons?: boolean;\n /**\n * 是否开启表单能力，开启后会使用 fusion Form 组件进行子元素管理\n */\n enableForm?: boolean;\n /**\n * fusion form 的 api\n * @see {@link https://fusion.alibaba-inc.com/pc/component/form?themeid=2#API}\n */\n formProps?: FormProps;\n /**\n * 按钮漕位渲染\n */\n buttons?: {\n /**\n * 点击主按钮回调\n * @deprecated 请使用 props.onSearch\n */\n onSearch?: (val: string) => void;\n /**\n * 点击次按钮回调\n * @deprecated 请使用 props.onReset\n */\n onReset?: () => void;\n /**\n * 自定义渲染\n * @deprecated 请使用 props.buttonRender\n */\n render?: () => React.ReactNode;\n };\n /**\n * 点击主按钮回调\n */\n onSearch?: (val: string) => void;\n /**\n * 点击次按钮回调\n */\n onReset?: () => void;\n /**\n * 右下角操作区槽位自定义渲染\n */\n buttonRender?: () => React.ReactNode;\n operations?: object[];\n operationConfig?: object;\n}\n\nconst Filter: React.FC = ({\n expand: propsExpand,\n defaultExpand,\n hideExpandButton,\n buttons,\n onExpand,\n hideDefaultButtons,\n visibleRowCount,\n enableFilterConfiguration,\n configStorageKey = window.location?.pathname,\n children,\n enableForm,\n operations,\n operationConfig,\n ...others\n}) => {\n const { cols: propsCols } = others;\n const [cols, setCols] = useState(propsCols);\n const onSearch = others.onSearch || buttons.onSearch;\n const onReset = others.onReset || buttons.onReset;\n const buttonRender = others.buttonRender || buttons.render;\n const visibleItemCount = cols * visibleRowCount;\n const i18nBundle = useI18nBundle('Filter');\n const overlayRef = useRef();\n const [overlayVisible, setOverlayVisible] = useState(false);\n const [expand, setExpand] = useState(defaultExpand);\n // 对子元素重排\n const rearrange = (c: any) => {\n const iChildren = React.Children.toArray(c);\n if (!enableFilterConfiguration) return { c: iChildren, meta: null };\n const configs: IFilterConfig[] = JSON.parse(localStorage.getItem(configStorageKey) || '[]');\n const foundItems: any[] = [];\n const notFoundItems: ConcatArray = [];\n // config 的 item 包含三个属性 key、visible\n iChildren.forEach((element) => {\n const key =\n element?.props?.formItemProps?.primaryKey || element?.props?.title || element?.props?.label;\n let indexInConfig;\n const itemInConfigs = configs.find((item, i) => {\n if (item.key === key) {\n indexInConfig = i;\n return true;\n }\n return false;\n });\n if (itemInConfigs) {\n foundItems[indexInConfig] =\n itemInConfigs.visible === false\n ? cloneElement(element, {\n invisible: true,\n })\n : element;\n } else {\n notFoundItems.push(element);\n }\n });\n const newChildren = foundItems.concat(notFoundItems);\n return {\n c: newChildren,\n meta: newChildren.map((element) => {\n const key =\n element?.props?.formItemProps?.primaryKey ||\n element?.props?.title ||\n element?.props?.label;\n const label =\n element?.props?.formItemProps?.label || element?.props?.title || element?.props?.label;\n const config = configs.find((item) => item.key === key);\n return {\n key,\n label,\n visible: config?.visible === undefined ? true : config.visible,\n };\n }),\n };\n };\n const [fieldsMeta, setFieldsMeta] = useState(compact(rearrange(children).meta));\n const { c, meta } = rearrange(children);\n useEffect(() => {\n setFieldsMeta(compact(rearrange(children).meta));\n }, [children]);\n // expand 受控模式\n useEffect(() => {\n if (propsExpand !== undefined) {\n setExpand(propsExpand);\n }\n }, [propsExpand]);\n // 展开收起切换\n const onToggleExpand = () => {\n onExpand(!expand);\n setExpand(!expand);\n };\n const getItemStyle = (isDragging: any, draggableStyle: any) => ({\n boxShadow: isDragging ? '0 1px 3px rgba(0, 0, 0, .1)' : 'none',\n ...draggableStyle,\n });\n // 拖拽配置项结束\n const onConfiguratorDragEnd = (result: {\n destination: { index: number };\n source: { index: number };\n }) => {\n if (!result.destination) {\n return;\n }\n const iMeta = Array.from(fieldsMeta);\n const [removed] = iMeta.splice(result.source.index, 1);\n iMeta.splice(result.destination.index, 0, removed);\n\n if (enableFilterConfiguration) {\n localStorage.setItem(configStorageKey, JSON.stringify(iMeta));\n }\n setFieldsMeta(iMeta);\n };\n /**\n * 控制过滤项是否可见\n * @param key 过滤条件\n * @param visible 是否可见\n */\n const onFilterItemVisibleChange = (key: string, visible: boolean) => {\n const iMeta = Array.from(fieldsMeta);\n iMeta.find((item) => {\n if (item.key === key) {\n item.visible = visible;\n return true;\n }\n return false;\n });\n if (enableFilterConfiguration) {\n localStorage.setItem(configStorageKey, JSON.stringify(iMeta));\n }\n setFieldsMeta(iMeta);\n };\n // 渲染操作「主」、「次」按钮\n const renderDefaultBtns = () => {\n const submitBtn = (\n \n {i18nBundle.primaryBtnText}\n \n );\n const resetBtn = {i18nBundle.secondaryBtnText} ;\n return [submitBtn, resetBtn];\n };\n // 渲染配置筛选项弹窗\n const renderConfigurator = () => {\n return (\n \n
setOverlayVisible((vo) => !vo)}\n active={overlayVisible}\n type=\"table-setting\"\n ref={overlayRef}\n />\n overlayRef.current}\n safeNode={() => overlayRef.current}\n onRequestClose={() => setOverlayVisible(false)}\n >\n \n
\n 切换显示与排序 \n setOverlayVisible(false)} />\n
\n
\n \n {(\n provided: { droppableProps: any; innerRef: any; placeholder: any },\n snapshot: { isDraggingOver: any },\n ) => (\n \n {meta.map((field, i) => (\n \n {(\n draggableProvided: {\n innerRef: any;\n draggableProps: { style: any };\n dragHandleProps: any;\n },\n iSnapshot: { isDragging: any },\n ) => (\n \n onFilterItemVisibleChange(field.key, checked)}\n >\n {field.label}\n \n \n \n \n \n {/* 配置筛选项 */}\n {enableFilterConfiguration && renderConfigurator()}\n {/* 用户自定义的 button render */}\n {buttonRender ? (\n \n {hideDefaultButtons ? (\n buttonRender()\n ) : (\n <>\n {buttonRender()}\n \n ) : (\n \n
\n )}\n {/* 展开收起 */}\n {expandBtnVisible && (\n \n {expand ? i18nBundle.hidden : i18nBundle.expand} \n \n \n );\n };\n\n const _children = renderChildren();\n\n const content = (\n \n {formatFormItems(_children, {\n columns: propsCols,\n ...others,\n })}\n \n );\n\n return ;\n};\n\nFilter.defaultProps = {\n buttons: {},\n defaultExpand: false,\n expand: undefined,\n cols: 4,\n visibleRowCount: 1,\n rowGap: 12,\n enableFilterConfiguration: false,\n onExpand: () => {},\n formProps: {},\n responsive: false,\n hideDefaultButtons: false,\n hideExpandButton: false,\n enableForm: false,\n};\n\nexport { Filter };\n"
},
{
"path": "packages/fusion-ui/src/components/filter/theme-dark.scss",
"content": ".dark {\n .fusion-ui-filter-configurator {\n background-color: var(--color-fill1-1, $color-fill1-1);\n .fusion-ui-filter-configurator-item.dragging {\n background-color: var(--color-fill1-4 !important, $color-fill1-4 !important);\n }\n .fusion-ui-icon-close {\n color: var(--color-text1-2, $color-text1-2);\n }\n &-title {\n border-bottom-color: var(--color-line1-4, $color-line1-4);\n }\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/line-chart/index.tsx",
"content": "import React from 'react';\nimport { LineChart as BizLineChart } from 'bizcharts';\n\ntype Iprops = React.ComponentProps;\n\nfunction LineChart(props: Iprops) {\n return (\n {\n /**\n * 是否处于加载状态\n */\n loading?: boolean;\n /**\n * 是否出错\n */\n error?: boolean | string;\n /**\n * 数据源\n */\n dataSource?: MenuItemProps[];\n /**\n * 国际化文案\n */\n i18nBundle?: Record;\n}\n\nexport class Menu extends React.Component {\n static displayName = 'Menu';\n\n renderChildren(dataSource) {\n const menuItemList: React.ReactElement[] = [];\n Array.isArray(dataSource) &&\n dataSource.forEach((dataItem) => {\n if (!dataItem.type || dataItem.type?.toLowerCase() === 'item') {\n menuItemList.push(\n {children}\n ,\n );\n }\n if (dataItem.type?.toLowerCase() === 'radioitem') {\n const children = dataItem.children || dataItem.label;\n menuItemList.push(\n \n {children}\n ,\n );\n }\n if (dataItem.type?.toLowerCase() === 'divider') {\n menuItemList.push(\n {this.renderChildren(dataItem.children)}\n ,\n );\n }\n if (dataItem.type?.toLowerCase() === 'submenu') {\n menuItemList.push(\n \n {this.renderChildren(dataItem.children)}\n ,\n );\n }\n });\n return menuItemList;\n }\n\n renderLoadingContent() {\n return {children} ;\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/menu/MenuItem.tsx",
"content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport cx from 'classnames';\nimport { Checkbox, Icon } from '@alifd/next';\nimport { func, obj, KEYCODE } from '@/utils/util';\nimport Item from '@alifd/next/lib/menu/view/item';\nimport { CheckboxProps } from '@alifd/next/types/checkbox';\n\nimport { MenuItemText } from './MenuItemText';\n\nconst { bindCtx } = func;\nconst { pickOthers } = obj;\n\nexport interface SelectableItemProps {\n /**\n * 用于显示标签文字\n */\n label?: string;\n /**\n * 自定义样式名\n */\n className?: string;\n /**\n * 是否禁用\n */\n disabled?: boolean;\n /**\n * 帮助文本\n */\n helper?: React.ReactNode;\n /**\n * 是否缩进\n */\n needIndent?: boolean;\n /**\n * 是否处于加载状态\n */\n loading?: boolean;\n /**\n * 是否有展开功能\n */\n hasExpand?: boolean;\n /**\n * 受控值，显示是否展开\n */\n expanded?: boolean;\n /**\n * 当 hasExpand={true} 时，展开触发\n */\n onExpand?: () => void;\n /**\n * 用于覆盖 checkbox 的属性\n */\n checkboxProps?: Partial;\n /**\n * 自定义渲染标签文字,传入则 label 失效\n */\n children?: React.ReactNode;\n _key?: string;\n root?: any;\n}\n\nexport class SelectableItem extends React.Component {\n static menuChildType = 'item';\n\n static propTypes = {\n _key: PropTypes.string,\n root: PropTypes.object,\n selected: PropTypes.bool,\n onSelect: PropTypes.func,\n inlineIndent: PropTypes.number,\n /**\n * 是否禁用\n */\n disabled: PropTypes.bool,\n /**\n * 帮助文本\n */\n helper: PropTypes.node,\n /**\n * 菜单项标签内容\n */\n children: PropTypes.node,\n className: PropTypes.string,\n onKeyDown: PropTypes.func,\n onClick: PropTypes.func,\n needIndent: PropTypes.bool,\n };\n\n static defaultProps = {\n disabled: false,\n needIndent: true,\n };\n\n constructor(props) {\n super(props);\n\n bindCtx(this, ['handleKeyDown', 'handleClick']);\n }\n\n getSelected() {\n const { _key, root, selected } = this.props;\n const { selectMode } = root.props;\n const { selectedKeys } = root.state;\n return selected || (!!selectMode && selectedKeys.indexOf(_key) > -1);\n }\n\n handleSelect(e) {\n const { _key, root, onSelect } = this.props;\n if (onSelect) {\n onSelect(!this.getSelected(), this, e);\n } else {\n root.handleSelect(_key, !this.getSelected(), this);\n }\n }\n\n handleKeyDown(e) {\n if (e.keyCode === KEYCODE.SPACE && !this.props.disabled) {\n this.handleSelect(e);\n }\n\n this.props.onKeyDown && this.props.onKeyDown(e);\n }\n\n handleClick(e) {\n this.handleSelect(e);\n\n this.props.onClick && this.props.onClick(e);\n }\n\n render() {\n const {\n _key,\n root,\n className,\n disabled,\n helper,\n label,\n children,\n needIndent,\n loading,\n // 展开状态\n hasExpand,\n onExpand,\n expanded,\n checkboxProps,\n } = this.props;\n const { prefix, selectMode } = root.props;\n const others = pickOthers(Object.keys(SelectableItem.propTypes), this.props);\n const selected = this.getSelected();\n\n const newProps = {\n _key,\n root,\n disabled,\n type: 'item',\n className: cx({\n 'fusion-ui-menu-item': true,\n [`${prefix}selected`]: selected,\n [className]: !!className,\n }),\n onKeyDown: this.handleKeyDown,\n onClick: !disabled ? this.handleClick : this.props.onClick,\n needIndent,\n ...others,\n };\n\n const textProps = {};\n\n if ('selectMode' in root.props) {\n textProps['aria-selected'] = selected;\n }\n\n let innerText = (\n \n {label}\n \n );\n if (children) {\n innerText = (\n \n {children}\n
\n );\n }\n\n const checkProps = {\n disabled,\n checked: selected,\n ...checkboxProps,\n };\n\n let innerRightIcon;\n if (loading) {\n innerRightIcon = - \n
\n {selectMode === 'multiple' &&
\n \n {helper ?
{helper}
: null}\n {innerRightIcon}\n
\n );\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/menu/MenuItemText.tsx",
"content": "import * as React from 'react';\nimport { Balloon } from '@alifd/next';\n\nexport type MenuItemTextProps = React.HTMLAttributes;\n\nexport class MenuItemText extends React.Component {\n ref = React.createRef();\n\n state = {\n isOverflow: false,\n };\n\n componentDidMount() {\n if (this.ref.current && this.ref.current.scrollWidth > this.ref.current.offsetWidth) {\n this.setState({\n isOverflow: true,\n });\n }\n }\n\n render() {\n const { isOverflow } = this.state;\n const { children, ...otherProps } = this.props;\n\n const trigger = (\n \n {children}\n
\n );\n\n if (isOverflow) {\n return (\n \n {children}\n \n );\n }\n\n return trigger;\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/menu/i18n.ts",
"content": "export default {\n 'zh-CN': {\n error: '出错了',\n },\n 'en-US': {\n error: 'Error',\n },\n};\n"
},
{
"path": "packages/fusion-ui/src/components/menu/index.scss",
"content": "@import './theme-dark.scss';\n\n$fusion-ui-prefix: '.fusion-ui-menu';\n\n/* 这里写你漂亮的样式 */\n#{$fusion-ui-prefix} {\n &.fusion-ui-ver {\n padding: var(--s-2 $s-1, $s-2 $s-1);\n }\n #{$fusion-ui-prefix}-content {\n position: relative;\n padding: 0 !important;\n margin: 0 !important;\n list-style: none;\n }\n #{$fusion-ui-prefix}-item.fusion-ui-menu-item {\n border-radius: var(--s-1, $s-1);\n // 反选 hover 背景色覆盖\n &.fusion-ui-selected {\n background-color: var(--color-brand1-1, $color-brand1-1);\n\n &:focus {\n background-color: var(--color-brand1-1, $color-brand1-1);\n }\n }\n\n .next-menu-item-inner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: var(--menu-font-size, 12px);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n word-wrap: normal;\n line-height: var(--menu-line-height, 32px);\n\n #{$fusion-ui-prefix}-item-header {\n flex: 1 1 0;\n display: flex;\n align-items: center;\n // 多选状态下设置为 flex，为放置左侧 icon\n .next-checkbox {\n margin-right: 8px;\n }\n // 文本超出显示为省略号\n .next-menu-item-text {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n #{$fusion-ui-prefix}-item-footer {\n #{$fusion-ui-prefix}-icon-right {\n color: var(--color-line1-4, $color-line1-4);\n }\n }\n }\n }\n\n &-loading {\n height: 160px;\n width: 100%;\n }\n\n &-error {\n height: 160px;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n\n &-content {\n text-align: center;\n\n &-text {\n font-size: var(--font-size-body-1, $font-size-body-1);\n line-height: 1.5;\n color: var(--color-text1-3, $color-text1-3);\n margin-bottom: 8px;\n }\n }\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/menu/index.tsx",
"content": "import { withGlobal } from '@/provider';\nimport { Menu as PureMenu } from './Menu';\n\nexport const Menu = withGlobal(PureMenu, {\n i18nBundleName: 'Menu',\n});\nexport { MenuProps, MenuItemProps } from './Menu';\n"
},
{
"path": "packages/fusion-ui/src/components/menu/theme-dark.scss",
"content": "body.dark {\n /* 这里写暗色覆盖主题 */\n .fusion-ui-menu {\n .fusion-ui-menu-item.fusion-ui-menu-item {\n &.fusion-ui-selected {\n background-color: var(--color-brand1-6, $color-brand1-6);\n &:not(.fusion-ui-disabled) {\n &:hover,\n &.fusion-ui-focused {\n background-color: var(--color-brand1-6, $color-brand1-6);\n }\n }\n }\n }\n .fusion-ui-error-content {\n color: var(--color-text1-3);\n }\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/menu-button/index.scss",
"content": "@import '~@alifd/next/lib/core/style/_global.scss';\n@import '~@alifd/next/lib/core/style/_motion.scss';\n@import 'scss/variable';\n\n#{$menu-btn-prefix} {\n display: inline-block;\n box-shadow: none;\n\n &-spacing-tb {\n margin: var(--popup-spacing-tb 0, $popup-spacing-tb 0);\n }\n\n &-popup {\n box-shadow: 0 $s-1 $s-4 0 rgba(0, 0, 0, 0.1);\n border-radius: var(--corner-1, $corner-1);\n\n .fusion-ui-menu.fusion-ui-ver {\n border: none;\n max-height: 272px;\n overflow: auto;\n\n &::-webkit-scrollbar {\n width: var(--s-2, $s-2);\n }\n\n &::-webkit-scrollbar-thumb {\n border: 2px solid transparent;\n background-clip: padding-box;\n border-radius: 9999px;\n background-color: var(--color-fill1-1, $color-fill1-1);\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n }\n }\n\n .fusion-ui-icon {\n transition: transform $motion-duration-immediately $motion-linear;\n }\n\n .fusion-ui-menu-btn-arrow::before {\n content: var(--menu-btn-fold-icon-content, $menu-btn-fold-icon-content);\n }\n\n &.fusion-ui-expand .fusion-ui-btn-icon.fusion-ui-menu-btn-arrow {\n transform: rotate(180deg);\n }\n // --------- this is for config platform\n &-symbol-unfold::before {\n content: var(--menu-btn-unfold-icon-content, $menu-btn-unfold-icon-content);\n }\n // --------- this is for config platform\n\n &.fusion-ui-btn-normal {\n .fusion-ui-menu-btn-arrow {\n color: var(--menu-btn-pure-text-normal-icon-color, $menu-btn-pure-text-normal-icon-color);\n }\n &:hover .fusion-ui-menu-btn-arrow {\n color: var(--btn-pure-normal-color-hover, $btn-pure-normal-color-hover);\n }\n }\n\n &.fusion-ui-btn-secondary {\n .fusion-ui-menu-btn-arrow {\n color: var(\n --menu-btn-pure-text-secondary-icon-color,\n $menu-btn-pure-text-secondary-icon-color\n );\n }\n &:hover .fusion-ui-menu-btn-arrow {\n color: var(--btn-pure-secondary-color-hover, $btn-pure-secondary-color-hover);\n }\n &.fusion-ui-btn-text:hover .fusion-ui-menu-btn-arrow {\n color: var(--btn-text-secondary-color-hover, $btn-text-secondary-color-hover);\n }\n }\n\n &.fusion-ui-btn-primary {\n .fusion-ui-menu-btn-arrow {\n color: var(--menu-btn-pure-text-primary-icon-color, $menu-btn-pure-text-primary-icon-color);\n }\n &:hover .fusion-ui-menu-btn-arrow {\n color: var(--btn-pure-primary-color-hover, $btn-pure-primary-color-hover);\n }\n }\n\n &.fusion-ui-btn-text.fusion-ui-btn-normal {\n .fusion-ui-menu-btn-arrow {\n color: var(--menu-btn-text-text-normal-icon-color, $menu-btn-text-text-normal-icon-color);\n }\n &:hover .fusion-ui-menu-btn-arrow {\n color: var(--btn-text-normal-color-hover, $btn-text-normal-color-hover);\n }\n }\n\n &.fusion-ui-btn-text.fusion-ui-btn-primary {\n .fusion-ui-menu-btn-arrow {\n color: var(--menu-btn-text-text-primary-icon-color, $menu-btn-text-text-primary-icon-color);\n }\n &:hover .fusion-ui-menu-btn-arrow {\n color: var(--btn-text-primary-color-hover, $btn-text-primary-color-hover);\n }\n }\n\n &.fusion-ui-btn-ghost.fusion-ui-btn-light {\n .fusion-ui-menu-btn-arrow {\n color: var(--menu-btn-ghost-light-icon-color, $menu-btn-ghost-light-icon-color);\n }\n &:hover .fusion-ui-menu-btn-arrow {\n color: var(--btn-ghost-light-color-hover, $btn-ghost-light-color-hover);\n }\n }\n\n &.fusion-ui-btn-ghost.fusion-ui-btn-dark {\n .fusion-ui-menu-btn-arrow {\n color: var(--menu-btn-ghost-dark-icon-color, $menu-btn-ghost-dark-icon-color);\n }\n &:hover .fusion-ui-menu-btn-arrow {\n color: var(--btn-ghost-dark-color-hover, $btn-ghost-dark-color-hover);\n }\n }\n\n &.disabled .fusion-ui-menu-btn-arrow,\n &[disabled] .fusion-ui-menu-btn-arrow {\n color: var(--menu-btn-disabled-icon-color, $menu-btn-disabled-icon-color);\n }\n\n &.fusion-ui-btn-text.disabled .fusion-ui-menu-btn-arrow,\n &.fusion-ui-btn-text[disabled] .fusion-ui-menu-btn-arrow {\n color: var(--menu-btn-disabled-icon-color, $menu-btn-disabled-icon-color);\n }\n\n &[disabled].fusion-ui-btn-ghost.fusion-ui-btn-dark .fusion-ui-menu-btn-arrow {\n color: var(--menu-btn-ghost-dark-disabled-icon-color, $menu-btn-ghost-dark-disabled-icon-color);\n }\n\n &[disabled].fusion-ui-btn-ghost.fusion-ui-btn-light .fusion-ui-menu-btn-arrow {\n color: var(\n --menu-btn-ghost-light-disabled-icon-color,\n $menu-btn-ghost-light-disabled-icon-color\n );\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/menu-button/index.tsx",
"content": "import React from 'react';\nimport classnames from 'classnames';\nimport { Menu, MenuProps } from '@/components/menu';\nimport { Overlay, Icon, Button } from '@alifd/next';\nimport { func } from '@/utils/util';\nimport { MenuButtonProps as NextMenuButtonProps } from '@alifd/next/types/menu-button';\n\nconst { Popup } = Overlay;\n\nexport interface MenuButtonProps extends NextMenuButtonProps {\n /**\n * 下拉菜单数据源\n */\n dataSource?: MenuProps['dataSource'];\n}\n\nexport interface MenuButtonState {\n visible?: boolean;\n selectedKeys?: string[];\n}\n\n/**\n * MenuButton\n */\nexport class MenuButton extends React.Component {\n static displayName = 'MenuButton';\n\n static defaultProps = {\n prefix: 'fusion-ui-',\n autoWidth: true,\n popupTriggerType: 'click',\n onVisibleChange: func.noop,\n onItemClick: func.noop,\n onSelect: func.noop,\n defaultSelectedKeys: [],\n menuProps: {},\n dataSource: [],\n };\n\n static getDerivedStateFromProps(props) {\n const st: Partial = {};\n\n if ('visible' in props) {\n st.visible = props.visible;\n }\n\n if ('selectedKeys' in props) {\n st.selectedKeys = props.selectedKeys;\n }\n\n return st;\n }\n\n constructor(props) {\n super(props);\n this.state = {\n selectedKeys: props.defaultSelectedKeys,\n visible: props.defaultVisible,\n };\n }\n\n clickMenuItem = (key, ...others) => {\n const { selectMode } = this.props;\n\n this.props.onItemClick(key, ...others);\n\n if (selectMode === 'multiple') {\n return;\n }\n\n this.onPopupVisibleChange(false, 'menuSelect');\n };\n\n selectMenu = (keys, ...others) => {\n if (!('selectedKeys' in this.props)) {\n this.setState({\n selectedKeys: keys,\n });\n }\n this.props.onSelect(keys, ...others);\n };\n\n onPopupOpen = () => {\n const button = this.node;\n if (this.props.autoWidth && button && this.menu && this.menu.style) {\n this.menu.style.width = `${button.offsetWidth}px`;\n }\n };\n\n onPopupVisibleChange = (visible, type) => {\n if (!('visible' in this.props)) {\n this.setState({\n visible,\n });\n }\n this.props.onVisibleChange(visible, type);\n };\n\n _menuRefHandler = (ref) => {\n this.menu = ref;\n\n const refFn = this.props.menuProps.ref;\n if (typeof refFn === 'function') {\n refFn(ref);\n }\n };\n\n render() {\n const {\n prefix,\n style,\n className,\n label,\n popupTriggerType,\n popupContainer,\n popupStyle,\n popupClassName,\n popupProps,\n followTrigger,\n selectMode,\n menuProps,\n dataSource,\n children,\n // 未用到的 props\n onSelect,\n defaultSelectedKeys,\n onVisibleChange,\n autoWidth,\n onItemClick,\n ...others\n } = this.props;\n\n const { visible, selectedKeys } = this.state;\n\n const classNames = classnames(\n {\n [`${prefix}menu-btn`]: true,\n [`${prefix}expand`]: visible,\n opened: visible,\n },\n className,\n );\n\n const popupClassNames = classnames({\n [popupClassName]: !!popupClassName,\n [`${prefix}menu-btn-popup`]: true,\n });\n\n const trigger = (\n \n {label} \n );\n\n return (\n {\n this.node = node;\n }}\n style={popupStyle}\n className={popupClassNames}\n {...popupProps}\n >\n \n
\n \n );\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/menu-button/scss/variable.scss",
"content": "////\n/// @module menu-button: 菜单按钮\n/// @tag MenuButton\n/// @category component\n/// @family general\n/// @varPrefix $menu-btn-\n/// @classPrefix {prefix}-menu-btn\n////\n\n// menu-button variables\n// --------------------------------------------------\n\n// prefix\n$menu-btn-prefix: '.fusion-ui-menu-btn';\n\n/// icon\n/// @namespace statement/disabled\n$menu-btn-disabled-icon-color: var(--color-text1-1, $color-text1-1) !default;\n\n/// ghost icon\n$menu-btn-ghost-light-disabled-icon-color: var(\n --btn-ghost-light-color-disabled,\n $btn-ghost-light-color-disabled\n) !default;\n\n/// ghost icon\n$menu-btn-ghost-dark-disabled-icon-color: var(\n --btn-ghost-dark-color-disabled,\n $btn-ghost-dark-color-disabled\n) !default;\n\n/// icon\n/// @namespace statement/normal\n$menu-btn-pure-text-normal-icon-color: var(--color-text1-2, $color-text1-2) !default;\n\n/// icon\n/// @namespace statement/normal\n$menu-btn-pure-text-primary-icon-color: var(--color-white, $color-white) !default;\n\n/// icon\n/// @namespace statement/normal\n$menu-btn-pure-text-secondary-icon-color: var(--color-brand1-6, $color-brand1-6) !default;\n\n/// icon\n/// @namespace statement/normal\n$menu-btn-text-text-normal-icon-color: var(--color-text1-4, $color-text1-4) !default;\n\n/// icon\n/// @namespace statement/primary\n$menu-btn-text-text-primary-icon-color: var(--color-link-1, $color-link-1) !default;\n\n/// icon\n/// @namespace statement/light\n$menu-btn-ghost-light-icon-color: var(--color-text1-4, $color-text1-4) !default;\n\n/// icon\n/// @namespace statement/dark\n$menu-btn-ghost-dark-icon-color: var(--color-white, $color-white) !default;\n\n/// fold icon\n/// @namespace statement/normal\n/// @type icon\n$menu-btn-fold-icon-content: var(--icon-content-arrow-down, $icon-content-arrow-down) !default;\n\n/// unfold icon\n/// @namespace statement/normal\n/// @type icon\n$menu-btn-unfold-icon-content: var(--icon-reset, $icon-reset) !default;\n"
},
{
"path": "packages/fusion-ui/src/components/page-header/index.scss",
"content": "#{$biz-css-prefix}page-header {\n position: relative;\n padding: 0;\n\n .next-breadcrumb .next-breadcrumb-text {\n font-size: 14px;\n }\n\n &-ghost {\n }\n\n &.has-breadcrumb {\n padding-top: 0;\n }\n\n &.has-footer {\n padding-bottom: 0;\n }\n\n &-back {\n margin-right: 16px;\n font-size: 16px;\n line-height: 1;\n\n &-button {\n border: none !important;\n cursor: pointer;\n }\n }\n\n .fusion-ui-divider-vertical {\n height: 14px;\n vertical-align: middle;\n }\n\n .fusion-ui-breadcrumb + &-heading {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n color: #000000d9;\n font-variant: tabular-nums;\n line-height: 1.5715;\n list-style: none;\n font-feature-settings: 'tnum';\n color: #00000073;\n font-size: 14px;\n }\n\n @mixin text-overflow-ellipsis() {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n &-heading {\n display: flex;\n justify-content: space-between;\n margin-top: 8px;\n\n &-left {\n display: flex;\n align-items: center;\n overflow: hidden;\n }\n\n &-title {\n margin-right: 12px;\n margin-bottom: 0;\n color: #000000d9;\n font-weight: 600;\n font-size: 20px;\n line-height: 32px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n &-avatar {\n margin-right: 12px;\n }\n\n &-sub-title {\n margin-right: 12px;\n color: #00000073;\n font-size: 14px;\n line-height: 1.5715;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n &-extra {\n white-space: nowrap;\n\n > * {\n white-space: unset;\n }\n > *:first-child {\n margin-left: 0;\n }\n }\n }\n\n &-content {\n padding-top: 16px;\n }\n &-actions {\n float: right;\n }\n &-footer {\n .fusion-ui-tabs {\n > .fusion-ui-tabs-nav {\n margin: 0;\n &::before {\n border: none;\n }\n }\n\n .fusion-ui-tabs-tab {\n }\n }\n }\n\n &-compact &-heading {\n flex-wrap: wrap;\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/page-header/index.tsx",
"content": "import * as React from 'react';\nimport classNames from 'classnames';\nimport ResizeObserver from 'rc-resize-observer';\nimport { Icon, Breadcrumb, Avatar, Button } from '@alifd/next';\nimport { bizCssPrefix } from '../../variables';\nimport Operations from '@/common/operations';\n\nconst TransButton = Button;\n\nexport interface PageHeaderProps {\n backIcon?: string | React.ReactNode;\n prefixCls?: string;\n title?: React.ReactNode;\n subTitle?: React.ReactNode;\n style?: React.CSSProperties;\n showBreadcrumb?: boolean;\n breadcrumb?: any[] | React.ReactElement;\n breadcrumbRender?: (props: PageHeaderProps, defaultDom: React.ReactNode) => React.ReactNode;\n tags?: React.ReactElement | React.ReactElement[];\n footer?: React.ReactNode;\n extra?: React.ReactNode;\n showAvatar?: boolean;\n showActions?: boolean;\n avatar?: object;\n onBack?: (e?: React.MouseEvent) => void;\n className?: string;\n ghost?: boolean;\n direction?: string;\n pageHeader?: any;\n operations?: any[];\n operationConfig?: Record;\n}\n\nconst renderBack = (\n prefixCls: string,\n backIcon?: string | React.ReactNode,\n onBack?: (e?: React.MouseEvent) => void,\n) => {\n if (!backIcon) {\n return null;\n }\n return (\n \n ) => {\n onBack?.(e);\n }}\n className={`${prefixCls}-back-button`}\n >\n
\n );\n};\n\nconst renderBreadcrumb = (breadcrumb: any[]) => {\n if (!breadcrumb) return null;\n if (!Array.isArray(breadcrumb)) {\n return breadcrumb;\n }\n if (!breadcrumb.length) {\n return null;\n }\n return (\n \n {breadcrumb.map((item) => {\n return {item} ;\n })}\n \n );\n};\n\nconst getBackIcon = (props: PageHeaderProps, direction = '') => {\n if (props.backIcon !== undefined) {\n return props.backIcon;\n } else if (direction) {\n return direction === 'rtl' ? 'arrow-right' : 'arrow-left';\n } else {\n return null;\n }\n};\n\nconst renderOperations = (\n prefixCls: string,\n operations: any[],\n operationConfig = { align: 'right' },\n) => {\n const operationsProps = { operations, operationConfig };\n let content;\n if (!operations || !operations.length) {\n content = null;\n } else {\n content = {content}
;\n};\nconst renderTitle = (\n prefixCls: string,\n props: PageHeaderProps,\n direction = '',\n operations: any[],\n operationConfig: { align: 'right' },\n) => {\n const { title, showAvatar, avatar, showActions, subTitle, tags, extra, onBack } = props;\n const headingPrefixCls = `${prefixCls}-heading`;\n const hasHeading = title || subTitle || tags || extra;\n // If there is nothing, return a null\n if (!hasHeading) {\n return null;\n }\n const backIcon = getBackIcon(props, direction);\n const backIconDom = renderBack(prefixCls, backIcon, onBack);\n const hasTitle = backIconDom || avatar || hasHeading;\n return (\n \n {hasTitle && (\n
\n {backIconDom}\n {showAvatar && avatar &&
}\n {title && (\n
\n {title}\n \n )}\n {subTitle && (\n \n {subTitle}\n \n )}\n {tags && {tags} }\n \n )}\n {extra &&
{extra} }\n {showActions && operations && renderOperations(prefixCls, operations, operationConfig)}\n
{footer}
;\n }\n return null;\n};\n\nconst renderChildren = (prefixCls: string, children: React.ReactNode) => (\n {children}
\n);\n\nconst PageHeader: React.FC = (props: PageHeaderProps) => {\n const [compact, updateCompact] = React.useState(false);\n const onResize = ({ width }: { width: number }) => {\n updateCompact(width < 768);\n };\n const {\n prefixCls = `${bizCssPrefix}-page-header`,\n style,\n footer,\n children,\n breadcrumb,\n breadcrumbRender,\n showBreadcrumb,\n className: customizeClassName,\n direction,\n pageHeader,\n operations,\n operationConfig,\n } = props;\n let ghost: undefined | boolean = true;\n // Use `ghost` from `props` or from `ConfigProvider` instead.\n if ('ghost' in props) {\n ghost = props.ghost;\n } else if (pageHeader && 'ghost' in pageHeader) {\n ghost = pageHeader.ghost;\n }\n\n const getDefaultBreadcrumbDom = () => {\n if (breadcrumb as any[]) {\n return renderBreadcrumb(breadcrumb as any[]);\n }\n return null;\n };\n\n const defaultBreadcrumbDom = getDefaultBreadcrumbDom();\n\n const isBreadcrumbComponent = breadcrumb && 'props' in breadcrumb;\n // support breadcrumbRender function\n const breadcrumbRenderDomFromProps =\n breadcrumbRender?.(props, defaultBreadcrumbDom) || defaultBreadcrumbDom;\n\n const breadcrumbDom = isBreadcrumbComponent ? breadcrumb : breadcrumbRenderDomFromProps;\n\n const className = classNames(prefixCls, customizeClassName, {\n 'has-breadcrumb': !!breadcrumbDom && breadcrumbDom,\n 'has-footer': !!footer,\n [`${prefixCls}-ghost`]: ghost,\n [`${prefixCls}-rtl`]: direction === 'rtl',\n [`${prefixCls}-compact`]: compact,\n });\n\n return (\n \n \n {showBreadcrumb && breadcrumbDom}\n {renderTitle(prefixCls, props, direction, operations, operationConfig)}\n {children && renderChildren(prefixCls, children)}\n {renderFooter(prefixCls, footer)}\n
\n \n );\n};\n\nPageHeader.defaultProps = {\n showBreadcrumb: true,\n showAvatar: false,\n showOperation: true,\n showActions: false,\n};\n\nexport { PageHeader };\n"
},
{
"path": "packages/fusion-ui/src/components/pie-chart/index.tsx",
"content": "import React from 'react';\nimport { PieChart as MyPie } from 'bizcharts';\nimport numeral from 'numeral';\nimport DataSet from '@antv/data-set';\n\nconst { DataView } = DataSet;\nconst dv = new DataView();\n\ntype IProps = React.ComponentProps;\n\nfunction PieChart(props: IProps) {\n const { data, ...others } = props || {};\n\n dv.source(data);\n // 求百分比\n dv.transform({\n type: 'percent',\n field: props?.angleField, // 统计字段\n dimension: props?.colorField, // 该字段的占比\n as: 'percent', // 结果存储在该字段\n });\n\n return (\n {\n const percent =\n typeof angleField?.percent === 'number'\n ? numeral(angleField?.percent).format('0.00%')\n : angleField?.percent;\n return `${angleField?.[props?.colorField]} ${percent}`;\n },\n }}\n interactions={[\n { type: 'element-selected' },\n ]}\n {...others as IProps}\n />\n );\n}\n\nexport default PieChart;\n"
},
{
"path": "packages/fusion-ui/src/components/pro-card/components/button-group/index.tsx",
"content": "import * as React from 'react';\nimport { Button } from '@alifd/next';\n\nexport interface ButtonDataSource {\n label?: string;\n onClick?: (e: React.MouseEvent) => unknown;\n}\nexport interface CardButtonGroupProps {\n dataSource?: ButtonDataSource[];\n text?: boolean;\n}\n\nexport const CardButtonGroup: React.FC = ({ dataSource, text }) => {\n return (\n <>\n {dataSource.map(({ label, onClick, ...rest }) => {\n return (\n \n {label}\n \n );\n })}\n \n );\n};\n\nCardButtonGroup.defaultProps = {\n dataSource: [],\n};\n\nexport default CardButtonGroup;\n"
},
{
"path": "packages/fusion-ui/src/components/pro-card/components/card/index.scss",
"content": "@import '../../../../variables.scss';\n\n$fusion-ui-card-padding: var(--s-5, $s-5);\n$fusion-ui-card-padding-s: var(--s-3, $s-3);\n\n.fusion-ui-card {\n position: relative;\n box-sizing: border-box;\n width: 100%;\n background-color: var(--color-white, $color-white);\n // border-radius: 0;\n display: flex;\n flex-direction: column;\n\n &-body {\n flex: 1 1 auto;\n &__panel {\n padding: var(--fusion-ui-card-padding, $fusion-ui-card-padding);\n padding-bottom: 0;\n }\n &__nopadding {\n padding: 0;\n }\n\n // .fusion-ui-card-header + & {\n // .fusion-ui-card-body__panel {\n // padding-top: 0;\n // }\n // }\n }\n\n &--dialog {\n padding: 0;\n border-radius: 0;\n box-shadow: none;\n }\n}\n\n.fusion-ui-card-footer-actions {\n padding-bottom: var(--fusion-ui-card-padding, $fusion-ui-card-padding);\n}\n.fusion-ui-pro-card-operation-container {\n padding: var(\n --fusion-ui-card-padding $fusion-ui-card-padding 0,\n $fusion-ui-card-padding $fusion-ui-card-padding 0\n );\n}\n\n.fusion-ui-pro-card-operation-fixed {\n position: fixed;\n width: 100%;\n box-shadow: 0 -4px 10px 0 rgba(74, 91, 109, 0.1);\n background-color: #fff;\n bottom: 0;\n left: 0;\n padding-bottom: var(--fusion-ui-card-padding, $fusion-ui-card-padding);\n}\n"
},
{
"path": "packages/fusion-ui/src/components/pro-card/components/card/index.tsx",
"content": "import * as React from 'react';\nimport { Loading } from '@alifd/next';\nimport classnames from 'classnames';\nimport { CardHeader, CardTagProps } from '../card-header';\nimport { CardButtonGroupProps } from '../button-group';\nimport { useFiledState } from '@/utils/hooks/useFiledState';\nimport { TooltipProps } from '@alifd/next/lib/balloon';\nimport Operations from '@/common/operations';\n\nexport interface IOperationConfig {\n fixed?: boolean; // 是否固定\n showSaveTime?: boolean;\n align?: 'center' | 'flex-start' | 'flex-end';\n}\n\nexport interface IOperationItem {\n label?: string;\n type?: 'primary' | 'secondary' | 'normal';\n onClick?: () => void;\n}\n\nexport interface CardProps extends Omit, 'title'> {\n /**\n * 卡片标题\n */\n title?: React.ReactNode;\n description?: React.ReactNode;\n visibleButtonCount?: number;\n /**\n * 帮助信息，仅在 title 展示时生效\n */\n explanation?: string;\n bodyPadding?: boolean;\n /**\n * 帮助信息气泡配置\n */\n explanationTooltipProps?: TooltipProps;\n /**\n * 卡片顶部操作区域自定义渲染\n */\n actionBar?: React.ReactNode;\n actionButtons?: CardButtonGroupProps;\n tagGroup?: CardTagProps[];\n /**\n * 段落分割线; 如果为 true 时，默认最后一个段落没有分割线。\n * @default false\n */\n segmentLine?: boolean;\n /**\n * 是否 loading\n */\n loading?: boolean;\n /**\n * 受控控制 Card 展开收起状态\n */\n isCollapse?: boolean;\n /**\n * 是否开启 Card 显示展开收起\n */\n hasCollapse?: boolean;\n /**\n * 默认收起\n */\n defaultCollapse?: boolean;\n /**\n * 展开收起状态切换后的回调函数\n */\n setCollapse?: (collapseState: boolean) => void;\n\n /**\n * 是否为弹窗卡片\n */\n isDialogCard?: boolean;\n hasDivider?: boolean;\n operations?: IOperationItem[];\n operationConfig?: IOperationConfig;\n lastSaveTime?: number;\n text?: boolean;\n}\n\nexport const Card: React.FC = (props) => {\n const {\n title,\n description,\n visibleButtonCount,\n className,\n actionBar,\n actionButtons,\n loading,\n tagGroup,\n style,\n hasCollapse,\n isDialogCard,\n explanation,\n explanationTooltipProps,\n children,\n segmentLine,\n defaultCollapse,\n setCollapse,\n isCollapse,\n hasDivider,\n operations,\n operationConfig,\n lastSaveTime,\n bodyPadding,\n text,\n ...otherProps\n } = props;\n const [collapsed, onCollapse] = useFiledState(\n {\n value: isCollapse,\n defaultValue: defaultCollapse,\n onChange: setCollapse,\n },\n 'isCollapse' in props,\n );\n\n const cardBody = children;\n const layout = 'flow';\n const content = (\n <>\n {(title || hasCollapse || actionBar || actionButtons || tagGroup) && (\n onCollapse(!collapsed)}\n explanation={explanation}\n explanationTooltipProps={explanationTooltipProps}\n hasDivider={hasDivider}\n />\n )}\n \n {!collapsed && (\n
\n {cardBody}\n \n
\n )}\n \n );\n return (\n \n {loading ? (\n \n {content}\n \n ) : (\n content\n )}\n \n );\n};\n\nCard.defaultProps = {\n segmentLine: false,\n loading: false,\n isDialogCard: false,\n hasCollapse: false,\n defaultCollapse: false,\n};\n\nCard.displayName = 'Card';\n"
},
{
"path": "packages/fusion-ui/src/components/pro-card/components/card-collapse/index.scss",
"content": ".fusion-ui-card-collapse {\n transition: height 0.3s;\n overflow: hidden;\n}\n"
},
{
"path": "packages/fusion-ui/src/components/pro-card/components/card-collapse/index.tsx",
"content": "import * as React from 'react';\nimport { useLayoutEffect } from 'react';\n\nexport const CardCollapse: React.FC<{\n collapsed: boolean;\n}> = ({ collapsed, children }) => {\n const ref = React.useRef();\n const contentRef = React.useRef();\n useLayoutEffect(() => {\n if (!ref.current) {\n return () => {};\n }\n // 折叠\n if (collapsed) {\n // 解决折叠第一次也会进行动画问题\n if (ref.current.style.height === 'auto') {\n ref.current.style.height = `${contentRef.current.offsetHeight}px`;\n }\n const index = setTimeout(() => {\n ref.current.style.height = '0px';\n }, 0);\n return () => clearTimeout(index);\n }\n // 当前已经展开，不进行动画\n if (ref.current.style.height === 'auto') {\n return () => {};\n }\n // 展开\n ref.current.style.height = `${contentRef.current.offsetHeight}px`;\n const index = setTimeout(() => {\n ref.current.style.height = 'auto';\n }, 400);\n return () => clearTimeout(index);\n }, [collapsed]);\n\n return (\n \n );\n};\n\nCardCollapse.displayName = 'CardCollapse';\n"
},
{
"path": "packages/fusion-ui/src/components/pro-card/components/card-header/index.scss",
"content": "@import '../../../../variables.scss';\n\n$fusion-ui-card-header-padding: var(--s-4 $s-5, $s-4 $s-5);\n\n.fusion-ui-card-header-padding {\n padding-bottom: var(--s-4, $s-4);\n}\n\n.fusion-ui-card-header {\n &__content {\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n overflow: hidden;\n padding: var(--fusion-ui-card-header-padding, $fusion-ui-card-header-padding);\n padding-bottom: 0;\n // border-left: var(--s-1 transparent solid, $size-base transparent solid);\n border-radius: var(--corner-2, $corner-2);\n }\n\n &--collapsed {\n cursor: pointer;\n border-color: var(--color-brand1-1, $color-brand1-1);\n &:hover {\n background-color: var(--color-fill1-2, $color-fill1-2);\n }\n .fusion-ui-card-header__action-bar {\n display: none;\n }\n }\n\n &__hd {\n display: flex;\n box-sizing: border-box;\n align-items: center;\n gap: var(--s-2, $s-2);\n }\n\n &__ft {\n flex: 1;\n display: flex;\n gap: var(--s-2, $s-2);\n justify-content: flex-end;\n align-items: center;\n }\n\n &__desc {\n padding: 0 $fusion-ui-card-header-padding $s-4 $fusion-ui-card-header-padding;\n }\n\n &__title {\n display: flex;\n box-sizing: border-box;\n align-items: center;\n\n font-size: var(--font-size-subhead, $font-size-subhead);\n font-weight: var(--font-weight-semi-bold, $font-weight-semi-bold);\n color: var(--color-text1-4, $color-text1-4);\n }\n &__tooltip {\n color: var(--color-text1-1, $color-text1-1);\n }\n\n &__action-bar {\n display: flex;\n gap: var(--s-2, $s-2);\n justify-content: flex-end;\n }\n &__collapse-btn {\n user-select: none;\n & > .fusion-ui-icon {\n transition: transform 0.1s ease-in-out;\n color: var(--color-line1-4 !important, $color-line1-4 !important);\n }\n &--collapsed {\n & > .fusion-ui-icon {\n color: var(--color-brand1-6 !important, $color-brand1-6 !important);\n transform-origin: center;\n transform: rotate(-180deg) !important;\n }\n }\n &:hover {\n & > .fusion-ui-icon {\n color: var(--color-brand1-6 !important, $color-brand1-6 !important);\n }\n }\n }\n}\n\n.fusion-ui-card-header__divider {\n height: 1px;\n border-bottom: 1px solid $color-line1-1;\n margin-top: var(--s-4, $s-4);\n}\n"
},
{
"path": "packages/fusion-ui/src/components/pro-card/components/card-header/index.tsx",
"content": "import * as React from 'react';\nimport { Button, Balloon, Tag } from '@alifd/next';\nimport { CustomIcon } from '@/components/toggle-icon';\nimport { ButtonGroup } from '@/components/button-group';\nimport { CardButtonGroupProps } from '../button-group';\nimport classnames from 'classnames';\nimport { TooltipProps } from '@alifd/next/lib/balloon';\n\nconst Tooltip = Balloon;\n\nfunction formatActionButtons(actionButtons) {\n if (actionButtons && Array.isArray(actionButtons)) {\n return actionButtons.map((item) => {\n if (item.label && !item.children) {\n item.children = item.label;\n }\n return item;\n });\n }\n return [];\n}\nexport interface CardTagProps {\n label?: string;\n color?: string;\n}\n\nexport interface CardHeaderProps {\n /**\n * 卡片标题\n */\n title?: React.ReactNode;\n description?: React.ReactNode;\n /**\n * 卡片顶部操作区域自定义渲染\n */\n actionBar?: React.ReactNode;\n actionButtons?: CardButtonGroupProps;\n text?: boolean;\n visibleButtonCount?: number;\n tagGroup?: CardTagProps[];\n /**\n * 受控控制 Card 展开收起状态\n */\n isCollapse?: boolean;\n /**\n * 是否开启 Card 显示展开收起\n */\n hasCollapse?: boolean;\n\n collapsed?: boolean;\n onCollapse?: () => void;\n\n /**\n * 帮助信息，仅在 title 展示时生效\n */\n explanation?: string;\n /**\n * 帮助信息气泡配置\n */\n explanationTooltipProps?: TooltipProps;\n hasDivider?: boolean;\n}\n\nexport const CardHeader: React.FC = ({\n title,\n description,\n hasCollapse,\n actionBar,\n collapsed,\n onCollapse,\n explanation,\n explanationTooltipProps,\n hasDivider,\n tagGroup,\n actionButtons,\n text,\n visibleButtonCount,\n}) => {\n return (\n \n \n
\n {title &&
{title}
}\n {title && explanation && (\n
\n
\n )}\n {tagGroup.map((item) => {\n let label: any = item;\n let color: any = 'blue';\n if (typeof item === 'object') {\n label = item.label;\n if (item.color) {\n color = item.color;\n }\n }\n return (\n
\n {label}\n \n );\n })}\n
\n
\n {actionBar &&
{actionBar}
}\n
\n {hasCollapse && (\n
\n {collapsed ? (\n <>\n 展开 \n 收起 \n \n
{description}
: null}\n {hasDivider && !collapsed &&
}\n \n );\n};\nCardHeader.defaultProps = {\n onCollapse: () => {},\n hasDivider: true,\n tagGroup: [],\n};\n\nCardHeader.displayName = 'CardHeader';\n"
},
{
"path": "packages/fusion-ui/src/components/pro-card/components/card-section/index.scss",
"content": "$fusion-ui-card-padding: var(--s-1 * 5, $size-base * 5);\n$fusion-ui-card-header-padding: var(--fusion-ui-card-padding, $fusion-ui-card-padding);\n$fusion-ui-card-section-padding: var(--fusion-ui-card-padding, $fusion-ui-card-padding);\n\n.fusion-ui-card-section {\n // padding-bottom: var(--fusion-ui-card-section-padding, $fusion-ui-card-section-padding);\n box-sizing: border-box;\n border: 0 solid $color-line1-1;\n align-self: stretch;\n}\n\n.fusion-ui-card-section-header__divider {\n height: 1px;\n border-bottom: 1px solid $color-line1-1;\n}\n.fusion-ui-card-section-header + .fusion-ui-card-section-header__divider {\n margin-top: var(--s-4, $s-4);\n}\n\n.fusion-ui-card-section-footer__divider {\n height: 1px;\n border-bottom: 1px solid $color-line1-1;\n margin-top: var(--s-5, $s-5);\n}\n\n.fusion-ui-section-divider-indent {\n margin-left: var(--s-5, $s-5);\n margin-right: var(--s-5, $s-5);\n}\n\n.fusion-ui-card-section-header {\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n overflow: hidden;\n padding: 5px 0;\n padding-bottom: 0;\n\n &__hd {\n display: flex;\n box-sizing: border-box;\n align-items: center;\n gap: var(--s-1 * 2, $size-base * 2);\n }\n\n &__ft {\n flex: 1;\n display: flex;\n gap: var(--s-1 * 2, $size-base * 2);\n justify-content: flex-end;\n align-items: center;\n }\n\n &__title {\n display: flex;\n box-sizing: border-box;\n align-items: center;\n\n font-size: var(--font-size-body-2, $font-size-body-2);\n font-weight: var(--font-weight-semi-bold, $font-weight-semi-bold);\n color: var(--color-text1-3, $color-text1-3);\n\n &::before {\n content: '';\n display: inline-block;\n height: 13px;\n width: 3px;\n opacity: 0.8;\n background: #034dfa;\n border-radius: 2px;\n margin-right: 8px;\n }\n &.fusion-ui-card-section-header-noBullet::before {\n display: none;\n }\n }\n &__tooltip {\n color: var(--color-text1-1, $color-text1-1);\n }\n\n &__action-bar {\n display: flex;\n gap: var(--s-1 * 2, $size-base * 2);\n justify-content: flex-end;\n }\n}\n\n.fusion-ui-card-section-body {\n padding: var(--fusion-ui-card-section-padding 0, $fusion-ui-card-section-padding 0);\n}\n\n.fusion-ui-card-body__panel--flow > .fusion-ui-card-section,\n.fusion-ui-card-body__panel--flow\n > .fusion-ui-row-col-container\n > .fusion-ui-row\n > .fusion-ui-col\n > .fusion-ui-card-section {\n // margin: 0 ($fusion-ui-card-padding * -1);\n\n &--segment-line {\n &:first-child {\n border-top: none;\n }\n }\n &:first-child {\n padding-top: 0;\n }\n &:last-child {\n padding-bottom: 0;\n }\n}\n\n.fusion-ui-card-body__panel--grid > .fusion-ui-grid {\n margin: 0 ($fusion-ui-card-padding * -1 - 1px) ($fusion-ui-card-padding * -1)\n ($fusion-ui-card-padding * -1);\n & > .fusion-ui-card-section {\n &--segment-line {\n border-right-width: 1px;\n }\n .fusion-ui-card-section-header__title::before {\n display: none;\n }\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/pro-card/components/card-section/index.tsx",
"content": "import * as React from 'react';\nimport { Loading, Balloon, Tag } from '@alifd/next';\nimport classnames from 'classnames';\nimport { CardTagProps } from '../card-header';\nimport { TooltipProps } from '@alifd/next/lib/balloon';\nimport { CustomIcon } from '@/components/toggle-icon';\n\nconst { Tooltip } = Balloon;\n\nexport interface CardSectionProps extends Omit, 'title'> {\n /**\n * 段落标题\n */\n title?: React.ReactNode;\n /**\n * 帮助信息，仅在 title 展示时生效\n */\n explanation?: string;\n /**\n * 帮助信息气泡配置\n */\n explanationTooltipProps?: TooltipProps;\n /**\n * 子卡片顶部操作区域自定义渲染\n */\n actionBar?: React.ReactNode;\n /**\n * 是否启用分割线\n * @default false\n */\n segmentLine?: boolean;\n /**\n * 是否 loading\n * @default false\n */\n loading?: boolean;\n className?: string;\n style?: React.CSSProperties;\n tagGroup?: CardTagProps[];\n headerDivider?: boolean;\n footerDivider?: boolean;\n hasDividerIndent?: boolean;\n noBullet?: boolean;\n}\n\n/**\n * 子卡片\n */\nexport const CardSection: React.FC = ({\n children,\n title,\n className,\n loading,\n segmentLine,\n actionBar,\n explanation,\n explanationTooltipProps,\n tagGroup,\n id,\n headerDivider,\n footerDivider,\n hasDividerIndent,\n noBullet,\n style,\n}) => {\n // 获取 loading 状态\n const loadingStatus = loading;\n const content = (\n <>\n {(title || actionBar) && (\n \n {title && (\n
\n
\n {explanation && (\n
\n {tagGroup.map((item) => {\n let label: any = item;\n let color: any = 'blue';\n if (typeof item === 'object') {\n label = item.label;\n if (item.color) {\n color = item.color;\n }\n }\n return (\n
\n {label}\n \n );\n })}\n
\n {actionBar && (\n
{actionBar}
\n )}\n
{children}
\n {footerDivider && (\n \n {loadingStatus ? (\n \n {content}\n \n ) : (\n content\n )}\n \n );\n};\n\nCardSection.displayName = 'CardSection';\nCardSection.defaultProps = {\n title: null,\n segmentLine: false,\n loading: false,\n tagGroup: [],\n noBullet: false,\n headerDivider: true,\n};\n"
},
{
"path": "packages/fusion-ui/src/components/pro-card/index.scss",
"content": "@import './theme-dark.scss';\n@import './components/card/index.scss';\n@import './components/card-collapse/index.scss';\n@import './components/card-header/index.scss';\n@import './components/card-section/index.scss';\n"
},
{
"path": "packages/fusion-ui/src/components/pro-card/index.tsx",
"content": "import { Card as ProCard, CardProps } from './components/card';\nimport { CardSection, CardSectionProps } from './components/card-section';\n\nProCard.CardSection = CardSection;\n\nexport { CardProps, CardSectionProps };\nexport default ProCard;\n"
},
{
"path": "packages/fusion-ui/src/components/pro-card/theme-dark.scss",
"content": "body.dark {\n .fusion-ui-card {\n background-color: var(--color-fill1-1, $color-fill1-1);\n &-header {\n &__title {\n color: var(--color-text1-4, $color-text1-4);\n }\n }\n &-body {\n color: var(--color-text1-3, $color-text1-3);\n }\n &-header {\n &--collapsed {\n border-color: var(--color-brand1-6, $color-brand1-6);\n &:hover {\n background-color: var(--color-fill1-1, $color-fill1-1);\n }\n }\n }\n .fusion-ui-card-grid > .fusion-ui-card-section {\n background-color: var(--color-fill1-1, $color-fill1-1);\n }\n .fusion-ui-card-section-header__title::before {\n background: var(--color-brand1-6, $color-brand1-6);\n }\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/pro-dialog/dialog.tsx",
"content": "import * as React from 'react';\nimport cx from 'classnames';\nimport { Dialog as NextDialog, Message, Balloon, Icon } from '@alifd/next';\nimport { DialogProps as NextDialogProps } from '@alifd/next/types/dialog';\n\nimport Operations, { OperationProps } from '@/common/operations';\nimport { isEditorEnv } from '@/utils';\n\nconst { Tooltip } = Balloon;\nconst noop = () => {};\nconst isValidFunction = (func: any) => typeof func === 'function';\nconst ACTION_MAP: Record = {\n ok: noop,\n cancel: noop,\n};\n\nfunction getAction(action: string | number) {\n return ACTION_MAP[action] || noop;\n}\n\nexport interface DialogProps extends NextDialogProps {\n /**\n * 弹窗大小\n */\n size?: 'small' | 'medium' | 'large' | 'autoLarge';\n operations?: object[];\n operationConfig?: object;\n status?: string;\n dialogType?: string;\n explanation?: string;\n iconType?: string;\n hasTips?: boolean;\n}\n\nexport interface DialogOperationsProps extends OperationProps {\n onOk?: any;\n onCancel?: any;\n}\n\nexport interface DialogState {\n visible?: boolean;\n}\n\nconst DialogOperations = (props: DialogOperationsProps) => {\n const { operations, operationConfig, onOk = noop, onCancel = noop, renderDefaultBtns } = props;\n if (!operations || !operations.length) {\n return null;\n }\n\n const baseOperations = operations.map((operation: any) => {\n let onClick = getAction(operation.action).bind(this);\n if (operation.action) {\n if (operation.action === 'ok' && onOk && typeof onOk === 'function') {\n onClick = onOk;\n } else if (operation.action === 'cancel' && onCancel && typeof onCancel === 'function') {\n onClick = onCancel;\n }\n }\n return {\n onClick,\n ...operation,\n };\n });\n\n const operationProps = {\n operations: baseOperations,\n operationConfig,\n renderDefaultBtns,\n };\n\n return \n {title}\n {hasTips ? (\n
\n
\n ) : (\n ''\n )}\n
\n {children}\n \n );\n}\n\nexport class InnerProDialog extends React.Component {\n static displayName: 'ProDialog';\n\n static propTypes: DialogProps;\n\n constructor(props: DialogProps) {\n super(props);\n const { visible } = props;\n this.state = {\n visible: visible || false,\n };\n }\n\n onOk = (event: Object) => {\n const { onOk } = this.props;\n if (isValidFunction(onOk)) {\n onOk(event);\n }\n\n if (!('visible' in this.props)) {\n this.setState({ visible: false });\n }\n };\n\n onCancel = (event: Object) => {\n const { onCancel } = this.props;\n if (isValidFunction(onCancel)) {\n onCancel(event);\n }\n\n this.setState({ visible: false });\n };\n\n onClose = (trigger: String, event: Object) => {\n const { onClose } = this.props;\n if (isValidFunction(onClose)) {\n onClose(trigger, event);\n }\n\n this.setState({ visible: false });\n };\n\n show = () => {\n this.setState({\n visible: true,\n });\n };\n\n open = () => {\n this.setState({\n visible: true,\n });\n };\n\n hide = () => {\n this.setState({\n visible: false,\n });\n };\n\n close = () => {\n this.setState({\n visible: false,\n });\n };\n\n render() {\n const { children, ...otherProps } = this.props;\n const { visible } = this.state;\n const realVisible = isEditorEnv(this.props) ? true : visible;\n const dialogProps = {\n ...otherProps,\n visible: realVisible,\n onOk: this.onOk,\n onCancel: this.onCancel,\n onClose: this.onClose,\n };\n\n return {children} ;\n }\n}\n\nexport const ProDialog = Object.assign(InnerProDialog, NextDialog);\n"
},
{
"path": "packages/fusion-ui/src/components/pro-dialog/index.scss",
"content": ".fusion-ui-dialog {\n top: 50%;\n left: 50%;\n translate: -50% -50%;\n &-small {\n width: calc(var(--s-1, 4) * 100) !important;\n }\n &-medium {\n width: calc(var(--s-1, 4) * 175) !important;\n }\n &-large {\n width: calc(var(--s-1, 4) * 250) !important;\n }\n &-autoLarge {\n width: 90vw !important;\n min-width: 900px;\n }\n &__tooltip {\n color: var(--color-text1-1, $color-text1-1);\n display: inline-block;\n margin-left: 8px;\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/pro-dialog/index.tsx",
"content": "export * from './dialog';\n"
},
{
"path": "packages/fusion-ui/src/components/pro-drawer/drawer.tsx",
"content": "import * as React from 'react';\nimport { Drawer as NextDrawer, Balloon, Icon } from '@alifd/next';\nimport { DrawerProps as NextDrawerProps } from '@alifd/next/types/Drawer';\n\nimport { isEditorEnv } from '@/utils';\nimport { bizCssPrefix } from '@/variables';\nimport { Space } from '@/components/container';\nimport Operations, { OperationProps } from '@/common/operations';\n\nconst cssPrefix = `${bizCssPrefix}-pro-drawer`;\n\nconst noop = () => {};\nconst isValidFunction = (func: any) => typeof func === 'function';\nconst ACTION_MAP: Record = {\n ok: noop,\n cancel: noop,\n};\n\nfunction getAction(action: string | number) {\n return ACTION_MAP[action] || noop;\n}\nexport interface DrawerProps extends NextDrawerProps {\n /**\n * 弹窗大小\n */\n size?: 'small' | 'medium' | 'large' | 'autoLarge';\n operations?: object[];\n operationConfig?: object;\n onOk?: any;\n onCancel?: any;\n footer?: any;\n titleTip?: any;\n}\n\nexport interface DrawerOperationsProps extends OperationProps {\n onOk?: any;\n onCancel?: any;\n}\n\nconst DrawerOperations = (props: DrawerOperationsProps) => {\n const { operations, operationConfig, onOk = noop, onCancel = noop, renderDefaultBtns } = props;\n if (!operations || !operations.length) {\n return null;\n }\n\n const baseOperations = operations.map((operation: any) => {\n let onClick = getAction(operation.action).bind(this);\n if (operation.action) {\n if (operation.action === 'ok' && onOk && typeof onOk === 'function') {\n onClick = onOk;\n } else if (operation.action === 'cancel' && onCancel && typeof onCancel === 'function') {\n onClick = onCancel;\n }\n }\n return {\n onClick,\n ...operation,\n };\n });\n\n const operationProps = {\n operations: baseOperations,\n operationConfig,\n renderDefaultBtns,\n };\n\n return > = {\n small: {\n hoz: '20vw',\n ver: '20vh',\n },\n medium: {\n hoz: '40vw',\n ver: '40vh',\n },\n large: {\n hoz: '60vw',\n ver: '60vh',\n },\n};\n\nfunction Drawer(props: DrawerProps) {\n const {\n size,\n children,\n operations,\n placement,\n onOk,\n onCancel,\n footer,\n operationConfig = {},\n title,\n titleTip,\n className,\n width,\n height,\n ...otherProps\n } = props;\n\n let footerElement = footer;\n if (operations && operations.length) {\n const operationsProps = {\n operations,\n operationConfig,\n onOk,\n onCancel,\n renderDefaultBtns: () => footer || [],\n };\n footerElement = \n {title}\n {_titleTip ? (\n {_titleTip.content || title}
\n \n ) : null}\n \n ) : null;\n\n return (\n \n {children}
\n\n {footerElement}
\n \n );\n}\n\nexport class InnerProDrawer extends React.Component {\n static displayName: 'ProDrawer';\n\n static propTypes: DrawerProps;\n\n constructor(props: DrawerProps) {\n super(props);\n const { visible } = props;\n this.state = {\n visible: visible || false,\n };\n }\n\n onOk = (event: Object) => {\n const { onOk } = this.props;\n if (isValidFunction(onOk)) {\n onOk(event);\n }\n\n if (!('visible' in this.props)) {\n this.setState({ visible: false });\n }\n };\n\n onCancel = (event: Object) => {\n const { onCancel } = this.props;\n if (isValidFunction(onCancel)) {\n onCancel(event);\n }\n\n this.setState({ visible: false });\n };\n\n onClose = (trigger: String, event: Object) => {\n const { onClose } = this.props;\n if (isValidFunction(onClose)) {\n onClose(trigger, event);\n }\n\n this.setState({ visible: false });\n };\n\n show = () => {\n this.setState({\n visible: true,\n });\n };\n\n open = () => {\n this.setState({\n visible: true,\n });\n };\n\n hide = () => {\n this.setState({\n visible: false,\n });\n };\n\n close = () => {\n this.setState({\n visible: false,\n });\n };\n\n render() {\n const { children, ...otherProps } = this.props;\n const { visible } = this.state;\n const realVisible = isEditorEnv(this.props) ? true : visible;\n const DrawerProps = {\n ...otherProps,\n visible: realVisible,\n onOk: this.onOk,\n onCancel: this.onCancel,\n onClose: this.onClose,\n };\n\n return {children} ;\n }\n}\n\nexport const ProDrawer = Object.assign(InnerProDrawer, NextDrawer);\n"
},
{
"path": "packages/fusion-ui/src/components/pro-drawer/index.scss",
"content": "#{$biz-css-prefix}pro-drawer {\n &-small {\n width: calc(var(--s-1, 4) * 100);\n }\n &-medium {\n width: calc(var(--s-1, 4) * 175);\n }\n &-large {\n width: calc(var(--s-1, 4) * 250);\n }\n &-autoLarge {\n width: 90vw;\n min-width: 900px;\n }\n &-title {\n font-size: var(--s-4, $s-4);\n letter-spacing: 0;\n line-height: var(--s-5, $s-5);\n }\n &.operation-container {\n display: flex;\n padding: 15px;\n align-items: center;\n\n & > * {\n margin-left: 10px;\n }\n\n & > *:first-child {\n margin-left: 0;\n }\n\n &-operation-item + &-operation-item {\n margin-left: 10px;\n }\n\n &.operation-align-left {\n justify-content: flex-start;\n }\n\n &.operation-align-center {\n justify-content: center;\n }\n\n &.operation-align-right {\n justify-content: flex-end;\n }\n\n &.operation-fixed {\n width: 100%;\n position: absolute;\n background-color: #fff;\n bottom: 0;\n left: 0;\n }\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/pro-drawer/index.tsx",
"content": "export * from './drawer';\n"
},
{
"path": "packages/fusion-ui/src/components/pro-form/components/Input.tsx",
"content": "import * as React from 'react';\n\nimport { Input } from '@alifd/next';\n\nimport FormItem from './form-item';\n\nconst FormInput = (props: any) => {\n const { formItemProps = {}, ...componentProps } = props;\n return (\n \n \n );\n};\n\nFormInput.displayName = 'FormInput';\n\nexport default FormInput;\n"
},
{
"path": "packages/fusion-ui/src/components/pro-form/components/form-item/index.scss",
"content": "#{$biz-css-prefix}form-item-bubble {\n position: relative;\n padding-top: 8px;\n\n &::before {\n content: '';\n width: 0;\n height: 0;\n border-bottom: 7px solid #f4f5f8;\n border-bottom: 7px solid var(--color-fill1-2, #f4f5f8);\n border-right: 7px solid transparent;\n border-left: 7px solid transparent;\n position: absolute;\n top: 1px;\n left: 20px;\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/pro-form/components/form-item/index.tsx",
"content": "import * as React from 'react';\nimport * as Next from '@alifd/next';\nimport { ItemProps } from '@alifd/next/types/form';\n\nconst { Balloon, Icon, Form } = Next;\nconst { Item } = Form;\n\nexport enum FormItemTypes {\n Input = 'Input',\n NumberPicker = 'NumberPicker',\n DatePicker = 'DatePicker',\n}\n\nexport interface ProFormItemProps extends ItemProps {\n labelTip?: Record;\n componentProps?: Record;\n __designMode?: string;\n childForm?: any;\n}\n\nconst ProFormItem: React.ForwardRefRenderFunction = (\n props: ProFormItemProps,\n ref,\n) => {\n const {\n labelTip,\n label,\n __designMode,\n children,\n labelAlign,\n labelCol,\n childForm,\n ...otherProps\n } = props;\n const _labelTip =\n labelTip && labelTip.enable\n ? Object.assign(\n {\n content: label,\n icon: 'help',\n },\n labelTip,\n )\n : null;\n\n return (\n \n {label}\n {_labelTip ? (\n {_labelTip.content || label}
\n \n ) : null}\n \n }\n {...otherProps}\n ref={ref}\n >\n {React.Children.map(children, (child) => {\n if (!child) return null;\n const _props = Object.assign({}, child.props || {});\n const { defaultValue, value, ...otherComponentProps } = _props;\n const finalValue =\n (__designMode || otherComponentProps.__designMode) === 'design' ? defaultValue : value;\n if (finalValue) {\n otherComponentProps.value = finalValue;\n }\n otherComponentProps.renderPreview = (curValue) => {\n if (otherProps.isPreview && !curValue) {\n return '—';\n }\n if (!curValue) {\n return curValue;\n }\n switch (typeof curValue) {\n case 'boolean':\n return curValue;\n case 'object':\n if (Array.isArray(curValue)) {\n return curValue.length\n ? curValue.map((item, index) => (\n \n {item?.label || '—'}\n \n ))\n : null;\n }\n return curValue.label ? (\n {curValue.label} \n ) : null;\n default:\n return curValue;\n }\n };\n if (otherProps.name) {\n _props.name = otherProps.name;\n }\n if (child) {\n return React.cloneElement(child, Object.assign(_props, otherComponentProps));\n }\n return child;\n })}\n {childForm ? {childForm}
: null}\n \n );\n};\n\nconst RefProFormItem = React.forwardRef(ProFormItem);\nRefProFormItem.displayName = 'ProFormItem';\nRefProFormItem.defaultProps = {};\nRefProFormItem.propTypes = {};\n\nexport default RefProFormItem;\n"
},
{
"path": "packages/fusion-ui/src/components/pro-form/components/next-wrapper.tsx",
"content": "import * as React from 'react';\nimport {\n CascaderSelect,\n Checkbox,\n DatePicker,\n Input,\n NumberPicker,\n Radio,\n Rating,\n Select,\n TreeSelect,\n Upload,\n} from '@alifd/next';\n\nimport FormItem from './form-item';\n\nconst RadioGroup = Radio.Group;\nconst CheckboxGroup = Checkbox.Group;\nconst { RangePicker } = DatePicker;\nconst { TextArea, Password } = Input;\n\nconst FormCascaderSelect = wrapper(CascaderSelect, 'FormCascaderSelect');\nconst FormCheckboxGroup = wrapper(CheckboxGroup, 'FormCheckboxGroup');\nconst FormDatePicker = wrapper(DatePicker, 'FormDatePicker');\nconst FormInput = wrapper(Input, 'FormInput');\nconst FormNumberPicker = wrapper(NumberPicker, 'FormNumberPicker');\nconst FormRadioGroup = wrapper(RadioGroup, 'FormRadioGroup');\nconst FormRangePicker = wrapper(RangePicker, 'FormRangePicker');\nconst FormRating = wrapper(Rating, 'FormRating');\nconst FormSelect = wrapper(Select, 'FormSelect');\nconst FormTreeSelect = wrapper(TreeSelect, 'FormTreeSelect');\nconst FormUpload = wrapper(Upload, 'FormUpload');\nconst FormTextArea = wrapper(TextArea, 'FormTextArea');\nconst FormPassword = wrapper(Password, 'FormPassword');\n\nfunction wrapper(NextFormComponent: any, displayName: string) {\n const WrappedComponent = (props: any) => {\n const { formItemProps = {}, ...componentProps } = props;\n return (\n \n \n );\n };\n WrappedComponent.displayName = displayName;\n return WrappedComponent;\n}\n\nexport {\n FormCascaderSelect,\n FormCheckboxGroup,\n FormDatePicker,\n FormInput,\n FormNumberPicker,\n FormRadioGroup,\n FormRangePicker,\n FormRating,\n FormSelect,\n FormTreeSelect,\n FormUpload,\n FormTextArea,\n FormPassword,\n};\n"
},
{
"path": "packages/fusion-ui/src/components/pro-form/index.scss",
"content": "@import './layouts/anchor-form/index.scss';\n@import './layouts/child-form/index.scss';\n@import './layouts/pro-form/index.scss';\n@import './layouts/step-form/index.scss';\n@import './components/form-item/index.scss';\n"
},
{
"path": "packages/fusion-ui/src/components/pro-form/index.tsx",
"content": "import ProForm from './layouts/pro-form';\nimport StepForm from './layouts/step-form';\nimport AnchorForm from './layouts/anchor-form';\nimport ChildForm from './layouts/child-form';\n\nexport * from './components/form-item';\nexport * from './components/next-wrapper';\n\nexport { StepForm, ProForm, AnchorForm, ChildForm };\n"
},
{
"path": "packages/fusion-ui/src/components/pro-form/layouts/anchor-form/container.tsx",
"content": "import React from 'react';\n\nfunction AnchorContainer() {\n return Container
;\n}\n\nexport default AnchorContainer;\n"
},
{
"path": "packages/fusion-ui/src/components/pro-form/layouts/anchor-form/index.scss",
"content": "#{$biz-css-prefix}anchor-form {\n &.forms {\n margin-bottom: var(--s-5, $s-5);\n background-color: var(--color-white, $color-white);\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/pro-form/layouts/anchor-form/index.tsx",
"content": "import * as React from 'react';\nimport { useRef, useImperativeHandle, forwardRef } from 'react';\nimport { Form, Card } from '@alifd/next';\nimport { Space } from '@/components/container';\nimport { Anchor, AnchorProps, LinkItemData } from '@/components/anchor';\nimport Operations from '@/common/operations';\nimport { getId } from '@/utils';\n\nexport interface AnchorFormProps {\n children?: React.ReactElement;\n /**\n * 可以这样写属性描述\n * @description 是否展示锚点\n * @description.zh-CN 还支持不同的 locale 后缀来实现多语言描述，使用 description 兜底\n * @default false\n */\n showAnchor?: boolean;\n formMapRef?: any;\n operations?: any;\n operationConfig?: any;\n lastSaveTime?: any;\n anchorProps?: AnchorProps;\n enableRandomHtmlId?: boolean;\n}\n\nexport type AnchorFormItemProps = LinkItemData;\n\nfunction renderAnchor(props: AnchorFormProps, formArray: Map) {\n const dataSource: AnchorFormItemProps[] = Array.from(formArray.keys()).map((item) => {\n const anchorItemProps = formArray.get(item);\n const { label = '', htmlId = getId(), ...otherProps } = anchorItemProps || {};\n return {\n ...otherProps,\n label,\n htmlId,\n };\n });\n return <>{dataSource && ,\n formArray: Map,\n) {\n const { children } = props;\n return (\n <>\n {React.Children.map(children, (child, index) => {\n const anchorItemProps = formArray.get(`${index}`);\n const { mode = 'independent', cardProps = {}, ...otherProps } = child.props;\n const { label = '', htmlId = getId() } = anchorItemProps;\n return (\n \n {React.cloneElement(child, {\n ref: (node) => {\n // Keep your own reference\n formArrayRef.current[index] = node;\n // Call the original ref, if any\n const { ref } = child;\n if (typeof ref === 'function') {\n ref(node);\n }\n },\n ...otherProps,\n mode,\n })}\n \n );\n })}\n \n );\n}\n\nfunction AnchorForm(props: AnchorFormProps, ref: any) {\n const {\n children,\n formMapRef: propsFormMapRef,\n operations,\n operationConfig,\n lastSaveTime,\n anchorProps = {},\n showAnchor = false,\n enableRandomHtmlId,\n ...otherProps\n } = props;\n const formArrayRef = useRef>>([]);\n useImperativeHandle(propsFormMapRef, () => formArrayRef.current);\n if (!children) {\n return (\n \n 内容为空 \n \n );\n }\n\n const formArray = new Map();\n React.Children.map(children, (child, index) => {\n const { anchorItemProps } = child.props;\n const name = `${index}`;\n const data = { ...anchorItemProps };\n if (enableRandomHtmlId) {\n data.htmlId = getId();\n }\n formArray.set(name, data);\n });\n\n const operationsProps = {\n operations,\n operationConfig,\n lastSaveTime,\n };\n const formContent = renderForm(props, formArrayRef, formArray);\n return (\n \n {showAnchor ? renderAnchor(anchorProps, formArray) : null}\n \n
\n );\n}\n\nexport default forwardRef(AnchorForm);\n"
},
{
"path": "packages/fusion-ui/src/components/pro-form/layouts/child-form/index.scss",
"content": "#{$biz-css-prefix}subForm-child-form {\n &.one-column {\n max-width: 600px;\n margin: 0 auto;\n }\n background: #f5f5f5;\n border-radius: 6px;\n background-color: #f5f5f5;\n padding: var(--s-4 $s-4 0 $s-4, $s-4 $s-4 0 $s-4);\n margin-bottom: var(--s-4, $s-4);\n &.empty-content {\n display: flex;\n justify-content: center;\n align-content: center;\n }\n}\n\n#{$biz-css-prefix}independent-child-form {\n &.one-column {\n max-width: 600px;\n margin: 0 auto;\n }\n\n .next-number-picker {\n .next-input-control {\n padding-right: 0 !important;\n }\n }\n\n .next-form-item-label label[required]:before {\n margin-right: 0;\n content: '';\n }\n .next-form-item-label label[required]:after {\n margin-left: 4px;\n content: '*';\n color: #ff3000;\n }\n &.empty-content {\n display: flex;\n justify-content: center;\n align-content: center;\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/pro-form/layouts/child-form/index.tsx",
"content": "import * as React from 'react';\nimport { formatFormItems, ProFormProps } from '../pro-form';\nimport { ResponsiveGrid } from '@alifd/next';\nimport { bizCssPrefix } from '@/variables';\n\nexport interface ChildFormProps extends ProFormProps {\n mode?: string;\n}\n\nconst ChildForm = (props: ChildFormProps, ref) => {\n const { children, columns, mode, spacing = 16, emptyContent, ...otherProps } = props;\n const cssPrefix = `${bizCssPrefix}-${mode || 'subForm'}`;\n return (\n \n {children ? (\n
\n {formatFormItems(\n children,\n {\n columns,\n ...otherProps,\n },\n true,\n )}\n \n ) : (\n
{emptyContent}
\n )}\n
) => {\n if (ObjUtils.isReactFragment(child)) {\n return formatFormItems(child.props.children, props);\n }\n if (child && ['function', 'object'].indexOf(typeof child.type) > -1) {\n const _labelAlign = device === 'phone' ? 'top' : labelAlign;\n const childrenProps: any = {\n labelCol: child.props.labelCol ? child.props.labelCol : labelCol,\n wrapperCol: child.props.wrapperCol ? child.props.wrapperCol : wrapperCol,\n labelAlign: child.props.labelAlign ? child.props.labelAlign : _labelAlign,\n labelTextAlign: child.props.labelTextAlign ? child.props.labelTextAlign : labelTextAlign,\n colon: 'colon' in child.props ? child.props.colon : colon,\n size: child.props.size ? child.props.size : size,\n isPreview: child.props.isPreview ? child.props.isPreview : isPreview,\n };\n const { formItemProps = {}, ...componentProps } = child.props || {};\n let { columnSpan = 1 } = formItemProps;\n if (!isChildForm && rows[rows.length - 1]?.includes(child.key)) {\n childrenProps.style = { marginBottom: '0px' };\n }\n if (\n ['ProFormItem', 'ChildForm'].includes(child.type.displayName) ||\n child.type?.displayName?.startsWith('Form')\n ) {\n if (child.type.displayName === 'ChildForm') {\n columnSpan = gridColumns;\n }\n return (\n \n {React.cloneElement(child, {\n formItemProps: {\n ...ObjUtils.pickDefined(childrenProps),\n ...formItemProps,\n },\n })}\n \n );\n }\n\n return (\n \n \n {React.cloneElement(child, componentProps)}\n \n \n );\n }\n return child;\n });\n};\n\nconst ProForm: React.ForwardRefRenderFunction = (props: ProFormProps, ref) => {\n const {\n children,\n columns,\n spacing = [0, 16, 16, 0],\n operations,\n operationConfig,\n emptyContent,\n lastSaveTime,\n ...otherProps\n } = props;\n\n const { isPreview } = otherProps || {};\n\n const operationProps = { operations, operationConfig, lastSaveTime };\n return (\n <>\n \n \n );\n};\n\nconst RefProForm: React.ForwardRefExoticComponent & {\n Item?: typeof ProFormItem;\n} = React.forwardRef(ProForm);\nRefProForm.displayName = 'ProForm';\nRefProForm.defaultProps = {};\nRefProForm.propTypes = {};\nRefProForm.Item = ProFormItem;\n\nexport default RefProForm;\n"
},
{
"path": "packages/fusion-ui/src/components/pro-form/layouts/step-form/index.scss",
"content": "#{$biz-css-prefix}step-form {\n &.steps {\n margin-bottom: var(--s-5, $s-5);\n }\n\n &.forms {\n margin-left: 0;\n }\n}\n"
},
{
"path": "packages/fusion-ui/src/components/pro-form/layouts/step-form/index.tsx",
"content": "import * as React from 'react';\nimport { useRef, useImperativeHandle, useEffect, useState, forwardRef } from 'react';\nimport { Step, Box } from '@alifd/next';\nimport { StepProps, ItemProps } from '@alifd/next/lib/step';\nimport Operations from '@/common/operations';\n\nexport interface StepFormProps extends StepProps {\n children?: React.ReactElement;\n onPrevious?: Function;\n onNext?: Function;\n formRef?: React.MutableRefObject;\n formMapRef?: React.MutableRefObject;\n operations?: any[];\n operationConfig?: Record;\n lastSaveTime?: Number;\n}\nexport interface StepFormItemProps extends ItemProps {\n stepItemProps?: React.ReactNode;\n}\n\nconst ACTION_MAP = {\n previous: (step, setStep) => {\n setStep(Math.max(0, --step));\n },\n next: (step, setStep, stepLength) => {\n setStep(Math.min(stepLength - 1, ++step));\n },\n};\n\nconst noop = () => {};\n\nfunction getAction(action: string | number) {\n return ACTION_MAP[action] || noop;\n}\n\nfunction renderStep(\n props: StepFormProps,\n formArray: Map
![](\"https://img.alicdn.com/tfs/TB1YsoiHVzqK1RjSZFCXXbbxVXa-159-99.svg\")
Fusion Design For Lowcode![](\"https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg\")
Ant Design For Lowcode