@formily-design/formily-antd 1.0.0

package/.umirc.js

@@ -0,0 +1,44 @@
+import { resolve } from 'path'
+export default {
+  mode: 'site',
+  logo: '//img.alicdn.com/imgextra/i2/O1CN01Kq3OHU1fph6LGqjIz_!!6000000004056-55-tps-1141-150.svg',
+  title: 'Formily',
+  hash: true,
+  favicon:
+    '//img.alicdn.com/imgextra/i3/O1CN01XtT3Tv1Wd1b5hNVKy_!!6000000002810-55-tps-360-360.svg',
+  outputPath: './doc-site',
+  navs: [
+    {
+      title: 'Ant Design',
+      path: '/components',
+    },
+    {
+      title: '主站',
+      path: 'https://v2.formilyjs.org',
+    },
+    {
+      title: 'GITHUB',
+      path: 'https://github.com/alibaba/formily',
+    },
+  ],
+  styles: [
+    `.__dumi-default-navbar-logo{
+      height: 60px !important;
+      width: 150px !important;
+      padding-left:0 !important;
+      color: transparent !important;
+    }
+    .__dumi-default-navbar{
+      padding: 0 28px !important;
+    }
+    .__dumi-default-layout-hero{
+      background-image: url(//img.alicdn.com/imgextra/i4/O1CN01ZcvS4e26XMsdsCkf9_!!6000000007671-2-tps-6001-4001.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+    }
+    nav a{
+      text-decoration: none !important;
+    }
+    `,
+  ],
+}

package/LICENSE.md

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-present, Alibaba Group Holding Limited. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,106 @@
+# @formily/designable-antd
+
+### Install
+
+```bash
+npm install --save @formily/designable-antd
+```
+
+## 使用步骤
+
+### 复制文件
+
+复制 `packages` 目录下 core、react、react-settings-form、shared 包里的 esm 目录文件
+
+> 渲染和设计器都需要
+
+复制 `formily` 目录下 antd、setters、transformer 包里的 esm 目录文件
+
+> 设计器页面需要
+
+文件放置目录可参考以下结构
+`/src/packages/designable` 放 `packages` 下的所有包文件
+`/src/packages/formily` 放 `formily` 下的所有包文件
+
+### 修改 vite.config 、 tsconfig 和 eslint.config 配置文件
+
+vite.config 修改 alias 配置
+
+```javascript
+{
+    resolve: {
+      alias: {
+        '@': '/src',
+        '@formily-design/react': '/src/packages/designable/react',
+        '@formily-design/react-settings-form': '/src/packages/designable/react-settings-form',
+        '@formily-design/core': '/src/packages/designable/core',
+        '@formily-design/shared': '/src/packages/designable/shared',
+        '@formily-design/formily-setters': '/src/packages/formily/setters',
+        '@formily-design/formily-transformer': '/src/packages/formily/transformer',
+        '@formily-design/formily-antd': '/src/packages/formily/antd',
+      },
+    },
+}
+```
+
+tsconfig 修改 paths 配置
+
+```json
+{
+  "paths": {
+    "@/*": ["src/*"],
+    "@formily-design/react": ["src/packages/designable/react"],
+    "@formily-design/react-settings-form": [
+      "src/packages/designable/react-settings-form"
+    ],
+    "@formily-design/core": ["src/packages/designable/core"],
+    "@formily-design/shared": ["src/packages/designable/shared"],
+    "@formily-design/formily-transformer": ["src/packages/formily/transformer"],
+    "@formily-design/formily-antd": ["src/packages/formily/antd"]
+  }
+}
+```
+
+eslint.config 忽略 packages 目录下文件的校验
+
+```javascript
+
+export default tseslint.config(
+  { ignores: ['dist', '.claude/', '**/packages/**'] },
+  { settings: {}, extends: [] }
+  ......
+)
+```
+
+### 安装依赖
+
+复制代码到其他项目后，还需要安装以下内部依赖包
+
+```json
+{
+  "dependencies": {
+    "@babel/parser": "^7.29.0",
+    "@formily/antd-v5": "^1.2.4",
+    "@formily/core": "^2.3.7",
+    "@formily/json-schema": "^2.3.7",
+    "@formily/path": "^2.3.7",
+    "@formily/react": "^2.3.7",
+    "@formily/reactive": "^2.3.7",
+    "@formily/reactive-react": "^2.3.7",
+    "@formily/shared": "^2.3.7",
+    "@juggle/resize-observer": "^3.4.0",
+    "@monaco-editor/loader": "^1.7.0",
+    "@monaco-editor/react": "^4.7.0",
+    "dateformat": "^5.0.3",
+    "jsonp": "^0.2.1",
+    "react-color": "^2.19.3",
+    "requestidlecallback": "^0.3.0",
+    "tlbs-map-react": "^1.1.1"
+  },
+  "devDependencies": {
+    "@types/jsonp": "^0.2.3"
+  }
+}
+```
+
+版本可以尝试最新版本，以上版本是可正常使用的版本

package/copy.ts

@@ -0,0 +1,6 @@
+import { runCopy } from '../../scripts/build-style'
+
+runCopy({
+  esStr: 'antd/es/',
+  libStr: 'antd/lib/',
+})

package/esm/common/Container/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import './styles.less';
+export declare const Container: React.FC<{
+    children?: React.ReactNode;
+}>;
+export declare const withContainer: (Target: React.JSXElementConstructor<any>) => (props: any) => React.JSX.Element;

package/esm/common/Container/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { observer } from '@formily/reactive-react';
+import { DroppableWidget } from '@formily-design/react';
+import './styles.less';
+export const Container = observer((props) => {
+    return React.createElement(DroppableWidget, null, props.children);
+});
+export const withContainer = (Target) => {
+    return (props) => {
+        return (React.createElement(DroppableWidget, null,
+            React.createElement(Target, Object.assign({}, props))));
+    };
+};

package/esm/common/Container/styles.less

@@ -0,0 +1,5 @@
+.dn-form-container {
+  margin: 0 !important;
+  padding: 20px;
+  border: 1px solid #d9d9d9;
+}

package/esm/common/FormItemSwitcher/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface IFormItemSwitcherProps {
+    value?: string;
+    onChange?: (value: string) => void;
+}
+export declare const FormItemSwitcher: React.FC<IFormItemSwitcherProps>;

package/esm/common/FormItemSwitcher/index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Switch } from 'antd';
+export const FormItemSwitcher = (props) => {
+    return (React.createElement(Switch, { checked: props.value === 'FormItem', onChange: (value) => {
+            props.onChange(value ? 'FormItem' : undefined);
+        } }));
+};

package/esm/common/LoadTemplate/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface ITemplateAction {
+    title: React.ReactNode;
+    tooltip?: React.ReactNode;
+    icon?: string | React.ReactNode;
+    onClick: () => void;
+}
+export interface ILoadTemplateProps {
+    className?: string;
+    style?: React.CSSProperties;
+    actions?: ITemplateAction[];
+}
+export declare const LoadTemplate: React.FC<ILoadTemplateProps>;

package/esm/common/LoadTemplate/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { NodeActionsWidget } from '@formily-design/react';
+export const LoadTemplate = (props) => {
+    var _a;
+    return (React.createElement(NodeActionsWidget, null, (_a = props.actions) === null || _a === void 0 ? void 0 : _a.map((action, key) => {
+        return React.createElement(NodeActionsWidget.Action, Object.assign({}, action, { key: key }));
+    })));
+};

package/esm/components/ArrayBase/index.d.ts

@@ -0,0 +1 @@
+export declare const createArrayBehavior: (name: string) => import("@formily-design/core").IBehavior[];

package/esm/components/ArrayBase/index.js

@@ -0,0 +1,71 @@
+import { createBehavior } from '@formily-design/core';
+import { createFieldSchema, createVoidFieldSchema } from '../Field';
+import { AllSchemas } from '../../schemas';
+import { AllLocales } from '../../locales';
+export const createArrayBehavior = (name) => {
+    return createBehavior({
+        name,
+        extends: ['Field'],
+        selector: (node) => node.props['x-component'] === name,
+        designerProps: {
+            droppable: true,
+            propsSchema: createFieldSchema(AllSchemas[name]),
+        },
+        designerLocales: AllLocales[name],
+    }, {
+        name: `${name}.Addition`,
+        extends: ['Field'],
+        selector: (node) => node.props['x-component'] === `${name}.Addition`,
+        designerProps: {
+            allowDrop(parent) {
+                return parent.props['x-component'] === name;
+            },
+            propsSchema: createVoidFieldSchema(AllSchemas[name].Addition),
+        },
+        designerLocales: AllLocales.ArrayAddition,
+    }, {
+        name: `${name}.Remove`,
+        extends: ['Field'],
+        selector: (node) => node.props['x-component'] === `${name}.Remove`,
+        designerProps: {
+            allowDrop(parent) {
+                return parent.props['x-component'] === name;
+            },
+            propsSchema: createVoidFieldSchema(),
+        },
+        designerLocales: AllLocales.ArrayRemove,
+    }, {
+        name: `${name}.Index`,
+        extends: ['Field'],
+        selector: (node) => node.props['x-component'] === `${name}.Index`,
+        designerProps: {
+            allowDrop(parent) {
+                return parent.props['x-component'] === name;
+            },
+            propsSchema: createVoidFieldSchema(),
+        },
+        designerLocales: AllLocales.ArrayIndex,
+    }, {
+        name: `${name}.MoveUp`,
+        extends: ['Field'],
+        selector: (node) => node.props['x-component'] === `${name}.MoveUp`,
+        designerProps: {
+            allowDrop(parent) {
+                return parent.props['x-component'] === name;
+            },
+            propsSchema: createVoidFieldSchema(),
+        },
+        designerLocales: AllLocales.ArrayMoveUp,
+    }, {
+        name: `${name}.MoveDown`,
+        extends: ['Field'],
+        selector: (node) => node.props['x-component'] === `${name}.MoveDown`,
+        designerProps: {
+            allowDrop(parent) {
+                return parent.props['x-component'] === 'ArrayCards';
+            },
+            propsSchema: createVoidFieldSchema(),
+        },
+        designerLocales: AllLocales.ArrayMoveDown,
+    });
+};

package/esm/components/ArrayCards/index.d.ts

@@ -0,0 +1 @@
+export * from './preview';

package/esm/components/ArrayCards/index.js

@@ -0,0 +1 @@
+export * from './preview';

package/esm/components/ArrayCards/preview.d.ts

@@ -0,0 +1,4 @@
+import { CardProps } from 'antd';
+import { DnFC } from '@formily-design/react';
+import './styles.less';
+export declare const ArrayCards: DnFC<CardProps>;

package/esm/components/ArrayCards/preview.js

@@ -0,0 +1,206 @@
+import React, { Fragment } from 'react';
+import { Card } from 'antd';
+import { TreeNode, createResource } from '@formily-design/core';
+import { useTreeNode, TreeNodeWidget, DroppableWidget, useNodeIdProps, } from '@formily-design/react';
+import { ArrayBase } from '@formily/antd-v5';
+import { observer } from '@formily/react';
+import { LoadTemplate } from '../../common/LoadTemplate';
+import { useDropTemplate } from '../../hooks';
+import { hasNodeByComponentPath, queryNodesByComponentPath, createEnsureTypeItemsNode, findNodeByComponentPath, createNodeId, } from '../../shared';
+import { createArrayBehavior } from '../ArrayBase';
+import cls from 'classnames';
+import './styles.less';
+const ensureObjectItemsNode = createEnsureTypeItemsNode('object');
+const isArrayCardsOperation = (name) => name === 'ArrayCards.Remove' ||
+    name === 'ArrayCards.MoveDown' ||
+    name === 'ArrayCards.MoveUp';
+export const ArrayCards = observer((props) => {
+    const node = useTreeNode();
+    const nodeId = useNodeIdProps();
+    const designer = useDropTemplate('ArrayCards', (source) => {
+        const indexNode = new TreeNode({
+            componentName: node.componentName,
+            props: {
+                type: 'void',
+                'x-component': 'ArrayCards.Index',
+            },
+        });
+        const additionNode = new TreeNode({
+            componentName: node.componentName,
+            props: {
+                type: 'void',
+                title: 'Addition',
+                'x-component': 'ArrayCards.Addition',
+            },
+        });
+        const removeNode = new TreeNode({
+            componentName: node.componentName,
+            props: {
+                type: 'void',
+                title: 'Addition',
+                'x-component': 'ArrayCards.Remove',
+            },
+        });
+        const moveDownNode = new TreeNode({
+            componentName: node.componentName,
+            props: {
+                type: 'void',
+                title: 'Addition',
+                'x-component': 'ArrayCards.MoveDown',
+            },
+        });
+        const moveUpNode = new TreeNode({
+            componentName: node.componentName,
+            props: {
+                type: 'void',
+                title: 'Addition',
+                'x-component': 'ArrayCards.MoveUp',
+            },
+        });
+        const objectNode = new TreeNode({
+            componentName: node.componentName,
+            props: {
+                type: 'object',
+            },
+            children: [indexNode, ...source, removeNode, moveDownNode, moveUpNode],
+        });
+        return [objectNode, additionNode];
+    });
+    const renderCard = () => {
+        if (node.children.length === 0)
+            return React.createElement(DroppableWidget, null);
+        const additions = queryNodesByComponentPath(node, [
+            'ArrayCards',
+            'ArrayCards.Addition',
+        ]);
+        const indexes = queryNodesByComponentPath(node, [
+            'ArrayCards',
+            '*',
+            'ArrayCards.Index',
+        ]);
+        const operations = queryNodesByComponentPath(node, [
+            'ArrayCards',
+            '*',
+            isArrayCardsOperation,
+        ]);
+        const children = queryNodesByComponentPath(node, [
+            'ArrayCards',
+            '*',
+            (name) => name.indexOf('ArrayCards.') === -1,
+        ]);
+        return (React.createElement(ArrayBase, { disabled: true },
+            React.createElement(ArrayBase.Item, { index: 0, record: null },
+                React.createElement(Card, Object.assign({}, props, { title: React.createElement(Fragment, null,
+                        indexes.map((node, key) => (React.createElement(TreeNodeWidget, { key: key, node: node }))),
+                        React.createElement("span", { "data-content-editable": "x-component-props.title" }, props.title)), className: cls('ant-formily-array-cards-item', props.className), extra: React.createElement(Fragment, null,
+                        operations.map((node) => (React.createElement(TreeNodeWidget, { key: node.id, node: node }))),
+                        props.extra) }),
+                    React.createElement("div", Object.assign({}, createNodeId(designer, ensureObjectItemsNode(node).id)), children.length ? (children.map((node) => (React.createElement(TreeNodeWidget, { key: node.id, node: node })))) : (React.createElement(DroppableWidget, { hasChildren: false }))))),
+            additions.map((node) => (React.createElement(TreeNodeWidget, { key: node.id, node: node })))));
+    };
+    return (React.createElement("div", Object.assign({}, nodeId, { className: "dn-array-cards" }),
+        renderCard(),
+        React.createElement(LoadTemplate, { actions: [
+                {
+                    title: node.getMessage('addIndex'),
+                    icon: 'AddIndex',
+                    onClick: () => {
+                        if (hasNodeByComponentPath(node, [
+                            'ArrayCards',
+                            '*',
+                            'ArrayCards.Index',
+                        ]))
+                            return;
+                        const indexNode = new TreeNode({
+                            componentName: node.componentName,
+                            props: {
+                                type: 'void',
+                                'x-component': 'ArrayCards.Index',
+                            },
+                        });
+                        ensureObjectItemsNode(node).append(indexNode);
+                    },
+                },
+                {
+                    title: node.getMessage('addOperation'),
+                    icon: 'AddOperation',
+                    onClick: () => {
+                        const oldAdditionNode = findNodeByComponentPath(node, [
+                            'ArrayCards',
+                            'ArrayCards.Addition',
+                        ]);
+                        if (!oldAdditionNode) {
+                            const additionNode = new TreeNode({
+                                componentName: node.componentName,
+                                props: {
+                                    type: 'void',
+                                    title: 'Addition',
+                                    'x-component': 'ArrayCards.Addition',
+                                },
+                            });
+                            ensureObjectItemsNode(node).insertAfter(additionNode);
+                        }
+                        const oldRemoveNode = findNodeByComponentPath(node, [
+                            'ArrayCards',
+                            '*',
+                            'ArrayCards.Remove',
+                        ]);
+                        const oldMoveDownNode = findNodeByComponentPath(node, [
+                            'ArrayCards',
+                            '*',
+                            'ArrayCards.MoveDown',
+                        ]);
+                        const oldMoveUpNode = findNodeByComponentPath(node, [
+                            'ArrayCards',
+                            '*',
+                            'ArrayCards.MoveUp',
+                        ]);
+                        if (!oldRemoveNode) {
+                            ensureObjectItemsNode(node).append(new TreeNode({
+                                componentName: node.componentName,
+                                props: {
+                                    type: 'void',
+                                    'x-component': 'ArrayCards.Remove',
+                                },
+                            }));
+                        }
+                        if (!oldMoveDownNode) {
+                            ensureObjectItemsNode(node).append(new TreeNode({
+                                componentName: node.componentName,
+                                props: {
+                                    type: 'void',
+                                    'x-component': 'ArrayCards.MoveDown',
+                                },
+                            }));
+                        }
+                        if (!oldMoveUpNode) {
+                            ensureObjectItemsNode(node).append(new TreeNode({
+                                componentName: node.componentName,
+                                props: {
+                                    type: 'void',
+                                    'x-component': 'ArrayCards.MoveUp',
+                                },
+                            }));
+                        }
+                    },
+                },
+            ] })));
+});
+ArrayBase.mixin(ArrayCards);
+ArrayCards.Behavior = createArrayBehavior('ArrayCards');
+ArrayCards.Resource = createResource({
+    icon: 'ArrayCardsSource',
+    elements: [
+        {
+            componentName: 'Field',
+            props: {
+                type: 'array',
+                'x-decorator': 'FormItem',
+                'x-component': 'ArrayCards',
+                'x-component-props': {
+                    title: `Title`,
+                },
+            },
+        },
+    ],
+});

package/esm/components/ArrayCards/styles.less

@@ -0,0 +1,2 @@
+.dn-array-cards {
+}

package/esm/components/ArrayTable/index.d.ts

@@ -0,0 +1 @@
+export * from './preview';

package/esm/components/ArrayTable/index.js

@@ -0,0 +1 @@
+export * from './preview';

package/esm/components/ArrayTable/preview.d.ts

@@ -0,0 +1,4 @@
+import { TableProps } from 'antd';
+import { DnFC } from '@formily-design/react';
+import './styles.less';
+export declare const ArrayTable: DnFC<TableProps<any>>;