diff --git a/packages/designer/src/document/node/props/prop.ts b/packages/designer/src/document/node/props/prop.ts index fcb37a8a3..39436aaec 100644 --- a/packages/designer/src/document/node/props/prop.ts +++ b/packages/designer/src/document/node/props/prop.ts @@ -52,17 +52,17 @@ export class Prop implements IPropParent { if (type === 'slot') { const schema = this._slotNode!.export(stage); - if (stage === TransformStage.Save) { + if (stage === TransformStage.Render) { return { type: 'JSSlot', params: schema.params, - value: schema.children, + value: schema, }; } return { type: 'JSSlot', params: schema.params, - value: schema, + value: schema.children, }; } diff --git a/packages/editor-skeleton/src/components/mixed-setter/index.tsx b/packages/editor-skeleton/src/components/mixed-setter/index.tsx index 67e020925..a0b7f9b9e 100644 --- a/packages/editor-skeleton/src/components/mixed-setter/index.tsx +++ b/packages/editor-skeleton/src/components/mixed-setter/index.tsx @@ -119,16 +119,22 @@ export default class MixedSetter extends Component<{ @computed private getCurrentSetter() { const { field } = this.props; let firstMatched: SetterItem | undefined; + let firstDefault: SetterItem | undefined; for (const setter of this.setters) { if (setter.name === this.used) { return setter; } - const matched = !setter.condition || setter.condition(field); - if (matched && !firstMatched) { + if (!setter.condition) { + if (!firstDefault) { + firstDefault = setter; + } + continue; + } + if (!firstMatched && setter.condition(field)) { firstMatched = setter; } } - return firstMatched; + return firstMatched || firstDefault || this.setters[0]; } // dirty fix vision variable setter logic @@ -149,14 +155,19 @@ export default class MixedSetter extends Component<{ const setter = this.setters.find((item) => item.name === name); this.used = name; if (setter) { - let newValue: any = setter.initialValue; - if (newValue && typeof newValue === 'function') { - newValue = newValue(field); - } - onChange && onChange(newValue); + this.handleInitial(setter); } }; + private handleInitial({ initialValue }: SetterItem) { + const { field, onChange } = this.props; + let newValue: any = initialValue; + if (newValue && typeof newValue === 'function') { + newValue = newValue(field); + } + onChange && onChange(newValue); + } + private shell: HTMLDivElement | null = null; private checkIsBlockField() { if (this.shell) { @@ -205,6 +216,9 @@ export default class MixedSetter extends Component<{ field, ...restProps, ...extraProps, + onInitial: () => { + this.handleInitial(currentSetter); + } }); } diff --git a/packages/editor-skeleton/src/components/settings/settings-pane.tsx b/packages/editor-skeleton/src/components/settings/settings-pane.tsx index 9b6e377a6..0ab2ce23a 100644 --- a/packages/editor-skeleton/src/components/settings/settings-pane.tsx +++ b/packages/editor-skeleton/src/components/settings/settings-pane.tsx @@ -20,6 +20,7 @@ class SettingFieldView extends Component<{ field: SettingField }> { let setterProps: any = {}; let setterType: any; + let initialValue: any = null; if (Array.isArray(setter)) { setterType = 'MixedSetter'; setterProps = { @@ -33,6 +34,9 @@ class SettingFieldView extends Component<{ field: SettingField }> { setterProps = setterProps(field); } } + if (setter.initialValue != null) { + initialValue = setter.initialValue; + } } else if (setter) { setterType = setter; } @@ -40,6 +44,9 @@ class SettingFieldView extends Component<{ field: SettingField }> { if (field.type === 'field') { if (defaultValue != null && !('defaultValue' in setterProps)) { setterProps.defaultValue = defaultValue; + if (initialValue == null) { + initialValue = defaultValue; + } } if (field.valueState > 0) { value = field.getValue(); @@ -79,6 +86,16 @@ class SettingFieldView extends Component<{ field: SettingField }> { }); field.setValue(value); }, + onInitial: () => { + if (initialValue == null) { + return; + } + const value = typeof initialValue === 'function' ? initialValue(field) : initialValue; + this.setState({ + value, + }); + field.setValue(value); + } }), extraProps.forceInline ? 'plain' : extraProps.display, ); diff --git a/packages/editor-skeleton/src/components/slot-setter/index.less b/packages/editor-skeleton/src/components/slot-setter/index.less new file mode 100644 index 000000000..230032716 --- /dev/null +++ b/packages/editor-skeleton/src/components/slot-setter/index.less @@ -0,0 +1,7 @@ +.lc-setter-slot { + display: flex; + align-items: center; + .lc-slot-params { + margin-left: 5px; + } +} diff --git a/packages/editor-skeleton/src/components/slot-setter/index.tsx b/packages/editor-skeleton/src/components/slot-setter/index.tsx new file mode 100644 index 000000000..344a2a2a3 --- /dev/null +++ b/packages/editor-skeleton/src/components/slot-setter/index.tsx @@ -0,0 +1,97 @@ +import { Component } from 'react'; +import { isJSSlot } from '@ali/lowcode-types'; +import { Button, Input, Icon } from '@alifd/next'; +import './index.less'; + +export default class SlotSetter extends Component<{ + value: any; + onChange?: (value: any) => void; + onInitial?: () => void; + // 是否支持设置入参 + supportParams?: boolean; +}> { + private handleInitial = () => { + const { value, onChange, onInitial } = this.props; + if (onInitial) { + onInitial(); + return; + } + if (!onChange) { + return; + } + onChange({ + type: 'JSSlot', + value: null, + }); + }; + render() { + const { value, onChange, supportParams } = this.props; + if (!isJSSlot(value)) { + return ( + + ); + } + const hasParams = value.params && Array.isArray(value.params); + return ( +
+ + {hasParams ? ( + { + val = val.trim(); + const params = val ? val.split(/ *, */) : []; + onChange && + onChange({ + ...value, + params, + }); + }} + addonAfter={ + + } + /> + ) : supportParams ? ( + + ) : null} +
+ ); + } +} diff --git a/packages/editor-skeleton/src/register-defaults.ts b/packages/editor-skeleton/src/register-defaults.ts index 63bf0dd90..3c114e43d 100644 --- a/packages/editor-skeleton/src/register-defaults.ts +++ b/packages/editor-skeleton/src/register-defaults.ts @@ -6,6 +6,8 @@ import MixedSetter from './components/mixed-setter'; import { isPlainObject } from '@ali/lowcode-utils'; import parseProps from './transducers/parse-props'; import addonCombine from './transducers/addon-combine'; +import SlotSetter from './components/slot-setter'; +import { isJSSlot } from '@ali/lowcode-types'; registerSetter('ArraySetter', { component: ArraySetter, @@ -30,6 +32,27 @@ registerSetter('ObjectSetter', { initialValue: {}, recommend: true, }); +registerSetter('SlotSetter', { + component: SlotSetter, + title: { + type: 'i18n', + 'zh-CN': '插槽输入', + 'en-US': 'Slot Setter' + }, + condition: (field: any) => { + return isJSSlot(field.getValue()); + }, + initialValue: (field: any, value: any) => { + if (isJSSlot(value)) { + return value; + } + return { + type: 'JSSlot', + value: value + }; + }, + recommend: true, +}); registerSetter('MixedSetter', MixedSetter); // parseProps diff --git a/packages/vision-preset/src/bak/vision copy.ts.bak b/packages/vision-preset/src/bak/vision copy.ts.bak deleted file mode 100644 index fad94157b..000000000 --- a/packages/vision-preset/src/bak/vision copy.ts.bak +++ /dev/null @@ -1,169 +0,0 @@ -import * as utils from '@ali/ve-utils'; -import popups from '@ali/ve-popups'; -import Icons from '@ali/ve-icons'; -import { VE_EVENTS, VE_HOOKS } from '../const'; -import Bus from '../bus'; -import Symbols from '../symbols'; -import Skeleton from '@ali/lowcode-editor-skeleton'; -import editor from '../editor'; - -const VEOldAPIs = { - /** - * VE.Popup - */ - Popup: popups, - /** - * VE.ui.xxx - * - * Core UI Components - */ - ui: { - // FIELD_TYPE_MAP - Field: { - // SettingField, - // Stage, - // CaptionField, - // PopupField, - // EntryField, - // AccordionField, - // BlockField, - // InlineField, - // PlainField - AccordionField, - InlineField, - BlockField, - CaptionField, // 不支持 variableSwitcher 版的 BlockField - PlainField, // 不渲染 title 的 InlineField - EntryField, - PopupField, - }, - Icon: Icons, - Icons, - Popup: popups, - /* - // for rax visualpage, will not support any - FaultComponent, - HiddenComponent, - UnknownComponent, - InsertionGhost, - */ - }, - - /** - * VE.context DI 实现 - * - * 默认未初始化，需要等待 init 之后 - */ - context: new VisualEngineContext(), - - /** - * VE.init - * - * Initialized the whole VisualEngine UI - */ - init: (container?: Element, contextConfigs?: any) => { - if (!container) { - container = document.createElement('div'); - document.body.appendChild(container); - } - container.id = 'engine'; - ReactDOM.render(, container); - }, - - /** - * VE.modules.xxx - * - * VE BuildIn Modules - */ - modules: { - // SchemaManager, 没看到使用的地方 - // VisualDesigner, 没看到使用的地方 - VisualManager // legao-designer 有用 - // VisualRender, 没看到使用的地方 - I18nUtil, // vs-list vs-rhino-widget-mapping - Prop, // vs-list vs-rhino-widget-mapping - /* 没看到使用的地方 - Node, - Props, - - Scroller, - Insertion, - */ - }, - - /** - * VE Utils - */ - utils, - /* 包抽象 */ - Bundle, - - /* pub/sub 集线器 */ - // ve-quick-search-pane, ve-section-pane vp-in-place-editing ve-action-save - // ve-page-history vs-q-chart-data ve-action-pane ve-page-lock-pane - // ve-datapool-pane ve-youshu-card-param-pane - Bus, - - /* 拖拽引擎 */ - DragEngine, // 在 ve-metadata-pane, ve-section-pane， ve-trunk-pane-simple， ve-trunk-pane 中有用 - - /* 环境变量 */ - // vu-oneapi-parser vu-events-property ve-section-pane vs-formula vu-link-property - // ve-datapool-pane vs-form-validator vs-style vs-link vs-micro-link vs-link-options vu-field-property - Env, - - /* 状态交换 */ - // - Exchange, - - /* 状态 Flags */ - // legao-design tree-pane - Flags, - - /* 快捷键 */ - // legao-design - Hotkey, - - /* 多语言文案 */ - I18nUtil, - - /* 页面管理 */ - Pages, - - /* 面板管理 */ - Panes, - - /* 应用管理 */ - Project, - - /* 包原型 */ - Prototype, - - /* 组件仓库 */ - Trunk, - - /* 事件 */ - EVENTS: VE_EVENTS, // legao-design - - /* 修饰方法 */ - HOOKS: VE_HOOKS, // legao-design vu-visualpage-rax - - /* 视图管理 */ - Viewport, - - /* Symbol 管理类 */ - Symbols, // legao-design vu-action-util - - /** - * VisualEngine Logger Tool - */ - // lg: logger, 没看到使用的地方 - // logger, - - /* 版本号 */ - // Version: VERSION, - - // Location, - // Node, - // VirtualRenderingNode -} diff --git a/packages/vision-preset/src/editor.ts b/packages/vision-preset/src/editor.ts index 96cc11e03..48c6e4def 100644 --- a/packages/vision-preset/src/editor.ts +++ b/packages/vision-preset/src/editor.ts @@ -1,6 +1,6 @@ -import { isJSBlock } from '@ali/lowcode-types'; +import { isJSBlock, isJSSlot } from '@ali/lowcode-types'; import { isPlainObject } from '@ali/lowcode-utils'; -import { globalContext, Editor } from '@ali/lowcode-editor-core'; +import { globalContext, Editor, registerSetter } from '@ali/lowcode-editor-core'; import { Designer, TransformStage } from '@ali/lowcode-designer'; // import { registerSetters } from '@ali/lowcode-setters'; import Outline from '@ali/lowcode-plugin-outline-pane'; @@ -11,8 +11,6 @@ import Preview from '@ali/lowcode-plugin-sample-preview'; // import SourceEditor from '@ali/lowcode-plugin-source-editor'; import { i18nReducer } from './i18n-reducer'; -// registerSetters(); - export const editor = new Editor(); globalContext.register(editor, Editor); diff --git a/packages/vision-preset/src/i18n-reducer.ts b/packages/vision-preset/src/i18n-reducer.ts index 1c8511840..693ee0cae 100644 --- a/packages/vision-preset/src/i18n-reducer.ts +++ b/packages/vision-preset/src/i18n-reducer.ts @@ -9,7 +9,6 @@ interface I18nObject { } export function i18nReducer(obj?: any): any { - console.info(obj); if (!obj) { return obj; } if (Array.isArray(obj)) { return obj.map((item) => i18nReducer(item)); diff --git a/packages/vision-preset/src/vision.less b/packages/vision-preset/src/vision.less index 492464688..131227b3d 100644 --- a/packages/vision-preset/src/vision.less +++ b/packages/vision-preset/src/vision.less @@ -84,3 +84,15 @@ html.engine-blur #engine { width: 100%; white-space: nowrap; } + + +// dirty fix override vision reset +.engine-design-mode { + .next-input-group, + .next-checkbox-group,.next-date-picker,.next-input,.next-month-picker, + .next-number-picker,.next-radio-group,.next-range,.next-range-picker, + .next-rating,.next-select,.next-switch,.next-time-picker,.next-upload, + .next-year-picker { + pointer-events: auto !important; + } +}