diff --git a/.gitignore b/.gitignore
index f306598..4c59fdd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,6 +17,8 @@ es/
*.swp
*.dia~
+npm-lock.json
+
npm-debug.log*
yarn-debug.log*
yarn-error.log*
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..0822280
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1,4 @@
+registry=https://registry.npmmirror.com
+shamefully-hoist=true
+auto-install-peers=true
+strict-peer-dependencies=false
diff --git a/README.md b/README.md
index b4f7da2..5b2282f 100644
--- a/README.md
+++ b/README.md
@@ -1,32 +1,41 @@
-### @alilc/lowcode-engine-ext
+## @felce/lowcode-engine-ext
### 简介
-lowcode-engine-ext 是阿里低代码引擎官方提供的 setter 和 setter 必须依赖的插件集合
-setter(设置器) 是用来展示每个物料的属性，[setter使用说明手册](https://www.yuque.com/lce/doc/cl03wo_nmhznb) [官方setter列表说明](https://www.yuque.com/lce/doc/oc220p#fl46)
+lowcode-engine-ext 引擎官方提供的 setter 和 setter 必须依赖的插件集合
+
+setter(设置器) 是用来展示每个物料的属性，[setter 使用说明手册](https://www.yuque.com/lce/doc/cl03wo_nmhznb) [官方 setter 列表说明](https://www.yuque.com/lce/doc/oc220p#fl46)
### 使用方式
-使用 CDN 方式引用，下方是官方提供的两个稳定 CDN
+使用 CDN 方式引用
-#### 方式 1：alifd cdn
- 1: alifd cdn
-```html
-https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@1.0.5/dist/css/engine-ext.css
+#### unpkg
-https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@1.0.5/dist/js/engine-ext.js
+```html
+https://unpkg.com/@felce/lowcode-engine-ext@1.1.1/dist/css/engine-ext.css
+https://unpkg.com/@felce/lowcode-engine-ext@1.1.1/dist/js/engine-ext.js
```
-#### 方式 2: uipaas cdn
+#### npmmirror
+
+✨ 国内推荐使用 npm 镜像，速度更快
+
```html
-https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/css/engine-ext.css
+https://registry.npmmirror.com/@felce/lowcode-engine-ext/1.1.1/files/dist/css/engine-ext.css
+https://registry.npmmirror.com/@felce/lowcode-engine-ext/1.1.1/files/dist/js/engine-ext.js
+```
+
+#### jsdelivr
-https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/js/engine-ext.js
+```html
+https://cdn.jsdelivr.net/npm/@felce/lowcode-engine-ext@1.1.1/dist/css/engine-ext.css
+https://cdn.jsdelivr.net/npm/@felce/lowcode-engine-ext@1.1.1/dist/js/engine-ext.js
```
#### 拓展变量绑定面板
-通过传入extraDataMap拓展属性绑定面板
+通过传入 extraDataMap 拓展属性绑定面板
```typescript
ctx.skeleton.add({
@@ -48,13 +57,11 @@ ctx.skeleton.add({
},
{
label: 'prop2',
- children: [
- { label: 'propxxx', value: 1 }
- ]
- }
+ children: [{ label: 'propxxx', value: 1 }],
+ },
],
- }
- }
+ },
+ },
},
});
```
diff --git a/build.cloud.json b/build.cloud.json
deleted file mode 100644
index 28078fb..0000000
--- a/build.cloud.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
- "entry": {
- "engine-ext": "./src/index.tsx"
- },
- "library": "___AliLowCodeEngineExt___",
- "libraryTarget": "umd",
- "externals": {
- "react": "var window.React",
- "react-dom": "var window.ReactDOM",
- "prop-types": "var window.PropTypes",
- "rax": "var window.Rax",
- "@alilc/lowcode-engine": "var window.AliLowCodeEngine",
- "@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
- "moment": "var moment",
- "lodash": "var _",
- "@alifd/next": "var Next"
- },
- "polyfill": false,
- "outputDir": "dist",
- "vendor": false,
- "ignoreHtmlTemplate": true,
- "sourceMap": true,
- "plugins": [
- "build-plugin-react-app",
- ["build-plugin-fusion", {
- "externalNext": "umd"
- }],
- ["build-plugin-moment-locales", {
- "locales": ["zh-cn"]
- }],
- "./build.plugin.js"
- ]
-}
diff --git a/build.json b/build.json
deleted file mode 100644
index a0e167e..0000000
--- a/build.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-
- "externals": {
- "react": "var window.React",
- "react-dom": "var window.ReactDOM",
- "prop-types": "var window.PropTypes",
- "rax": "var window.Rax",
- "@alilc/lowcode-engine": "var window.AliLowCodeEngine",
- "@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
- "moment": "var moment",
- "lodash": "var _",
- "@alifd/next": "var Next"
- },
- "plugins": [
- "build-plugin-component",
- [
- "build-plugin-fusion",
- {
- "themePackage": "@alifd/theme-lowcode-light",
- "externalNext": "umd"
- }
- ],
- [
- "build-plugin-moment-locales",
- {
- "locales": ["zh-cn"]
- }
- ],
- "./build.plugin.js"
- ]
-}
diff --git a/build.plugin.js b/build.plugin.js
deleted file mode 100644
index bd2137e..0000000
--- a/build.plugin.js
+++ /dev/null
@@ -1,29 +0,0 @@
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-
-module.exports = ({ context,onGetWebpackConfig }) => {
- onGetWebpackConfig((config) => {
- config.resolve.plugin('tsconfigpaths').use(TsconfigPathsPlugin, [
- {
- configFile: './tsconfig.json',
- },
- ]);
-
- /*
- config
- // 定义插件名称
- .plugin('MonacoWebpackPlugin')
- // 第一项为具体插件，第二项为插件参数
- .use(new MonacoWebpackPlugin({
- languages:["javascript","css","json"]
- }), []);
- */
- config.plugins.delete('hot');
- config.devServer.hot(false);
- if (context.command === 'start') {
- config.devtool('inline-source-map');
- }
- // console.log('====context',context.command)
-
- // config.devtool('inline-source-map');
- });
-};
diff --git a/demo/index.less b/demo/index.less
new file mode 100644
index 0000000..3bd5845
--- /dev/null
+++ b/demo/index.less
@@ -0,0 +1,40 @@
+.setter-container {
+ width: 100%;
+ height: 100%;
+ padding: 20px 12px;
+ box-sizing: border-box;
+ overflow-y: auto;
+}
+.lc-title {
+ display: inline-flex;
+ align-items: center;
+ color: var(--color-text);
+ padding: 10px;
+ .lc-title-icon {
+ display: flex;
+ align-items: center;
+ margin-right: 4px;
+ img {
+ width: 16px;
+ height: 16px;
+ filter: brightness(0) invert(1);
+ }
+ }
+ &.only-icon {
+ .lc-title-icon {
+ margin-right: 0;
+ }
+ }
+ &.has-tip {
+ cursor: help;
+ text-decoration-line: underline;
+ text-decoration-style: dashed;
+ text-decoration-color: var(--color-text-light, rgba(31, 56, 88, .3));
+ }
+ line-height: initial !important;
+ word-break: break-all;
+}
+
+.actived .lc-title {
+ color: var(--color-actived);
+}
diff --git a/demo/index.tsx b/demo/index.tsx
new file mode 100644
index 0000000..7fc7cb4
--- /dev/null
+++ b/demo/index.tsx
@@ -0,0 +1,78 @@
+import {
+ Designer,
+ DocumentModel,
+ LowCodePluginManager,
+ Node,
+ Project,
+ SettingTopEntry,
+} from '@felce/lowcode-designer';
+import { Editor } from '@felce/lowcode-editor-core';
+import { createField } from '@felce/lowcode-editor-skeleton';
+import { Component, createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import LowcodeEngineExt from '../src/index';
+import { setters } from '@felce/lowcode-engine';
+import '@alifd/next/dist/next.css';
+import './index.less';
+
+class App extends Component {
+ state = {
+ value: new Map(),
+ };
+ settings: SettingTopEntry | null = null;
+
+ constructor(props: any) {
+ super(props);
+ // const editor = new Editor();
+ // const designer = new Designer({ editor });
+ // const prject = new Project(designer);
+ // const document = new DocumentModel(prject);
+ // const innerPlugins = new LowCodePluginManager({
+ // assembleApis(context) {
+ // context.setters =
+ // }
+ // });
+ // const plugins = (this.settings = new SettingTopEntry({}, [document.root!]));
+ }
+
+ changeHandle(key: string, newValue: any) {
+ console.log('changeHandle', key, newValue);
+ this.state.value.set(key, newValue);
+ this.setState({
+ value: this.state.value,
+ });
+ }
+
+ renderSetter() {
+ const { setters, pluginMap } = LowcodeEngineExt;
+ return Object.keys(setters).map((key) => {
+ const component = createElement(setters[key].component || setters[key], {
+ onChange: (value: any) => this.changeHandle(setters[key].name, value),
+ // value: this.state.value.get(setters[key].name),
+ field: {},
+ options: [
+ { label: 'label1', value: 'value1' },
+ { label: 'label2', value: 'value2' },
+ ],
+ });
+ return createField(
+ {
+ title: setters[key].name,
+ },
+ component,
+ );
+ });
+ }
+
+ render() {
+ const { setters, pluginMap } = LowcodeEngineExt;
+ const value = this.state.value.get(setters.StringSetter.name);
+ console.log('render', value);
+
+ return {this.renderSetter()}
;
+ }
+}
+
+const root = createRoot(document.getElementById('lce-container')!);
+
+root.render();
diff --git a/demo/usage.md b/demo/usage.md
index 5f6ccf2..57b6cee 100644
--- a/demo/usage.md
+++ b/demo/usage.md
@@ -8,7 +8,7 @@ order: 1
```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
-import LowcodeEngineExt from '@alilc/lowcode-engine-ext';
+import LowcodeEngineExt from '@felce/lowcode-engine-ext';
class App extends Component {
render() {
@@ -20,5 +20,7 @@ class App extends Component {
}
}
-ReactDOM.render(, mountNode);
+const root = createRoot(document.getElementById('lce-container')!);
+
+root.render();
```
diff --git a/public/index.html b/index.html
similarity index 84%
rename from public/index.html
rename to index.html
index 4cf1915..531f06c 100644
--- a/public/index.html
+++ b/index.html
@@ -10,12 +10,14 @@
body {
font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, PingFang SC-Light, Microsoft YaHei;
font-size: 12px;
+
* {
box-sizing: border-box;
}
}
- body, #lce-container {
+ body,
+ #lce-container {
position: fixed;
left: 0;
right: 0;
@@ -41,8 +43,8 @@
min-width: 1024px;
}
-
-
+
+
-
+
+