├── .editorconfig ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── workflows │ └── pages.yml ├── .gitignore ├── .husky ├── commit-msg ├── pre-commit └── pre-push ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── commitlint.config.cjs ├── docs ├── .vitepress │ ├── config.ts │ └── theme │ │ ├── components │ │ └── demo-block.vue │ │ ├── index.ts │ │ └── styles │ │ └── vars.css ├── api │ ├── editor │ │ ├── codeBlockServiceMethods.md │ │ ├── componentListServiceMethods.md │ │ ├── dataSourceServiceMethods.md │ │ ├── editorServiceEvents.md │ │ ├── editorServiceMethods.md │ │ ├── events.md │ │ ├── eventsServiceMethods.md │ │ ├── historyServiceEvents.md │ │ ├── historyServiceMethods.md │ │ ├── props.md │ │ ├── propsServiceEvents.md │ │ ├── propsServiceMethods.md │ │ ├── slots.md │ │ ├── storageServiceMethods.md │ │ └── uiServiceMethods.md │ ├── form │ │ ├── form-dialog-events.md │ │ ├── form-dialog-methods.md │ │ ├── form-dialog-props.md │ │ ├── form-events.md │ │ ├── form-methods.md │ │ └── form-props.md │ ├── stage │ │ ├── coreEvents.md │ │ └── coreMethods.md │ └── table │ │ ├── events.md │ │ ├── methods.md │ │ └── props.md ├── form-config │ ├── compare.md │ ├── fields │ │ ├── cascader.md │ │ ├── checkbox.md │ │ ├── color-picker.md │ │ ├── date-picker.md │ │ ├── datetime-picker.md │ │ ├── display.md │ │ ├── hidden.md │ │ ├── link.md │ │ ├── number.md │ │ ├── radio.md │ │ ├── select.md │ │ ├── switch.md │ │ ├── text.md │ │ ├── textarea.md │ │ └── time-picker.md │ ├── layout.md │ └── relate.md ├── guide │ ├── advanced │ │ ├── code-block.md │ │ ├── coupling.md │ │ ├── data-source.md │ │ ├── js-schema.md │ │ ├── layout.md │ │ ├── page.md │ │ ├── tmagic-form.md │ │ └── tmagic-ui.md │ ├── component.md │ ├── conception.md │ ├── editor-expand.md │ ├── index.md │ ├── introduction.md │ ├── migration.md │ ├── publish.md │ ├── runtime.md │ └── tutorial │ │ ├── hello-world.md │ │ ├── index.md │ │ ├── render.md │ │ └── runtime.md ├── index.md └── public │ ├── code-block-list.png │ ├── code-block.png │ ├── create-data-source.png │ ├── data-source-input.png │ ├── data-source.png │ ├── display-cond.png │ ├── favicon.png │ ├── flow.png │ ├── layout.png │ ├── tmagic.png │ └── tutorial │ └── one │ └── init.png ├── eslint-config ├── flat │ ├── base.mjs │ ├── import-sort.mjs │ ├── import.mjs │ ├── prettier.mjs │ └── ts.mjs ├── index.mjs └── package.json ├── eslint.config.js ├── package.json ├── packages ├── cli │ ├── .gitignore │ ├── bin │ │ └── tmagic.js │ ├── package.json │ ├── src │ │ ├── Core.ts │ │ ├── cli.ts │ │ ├── commands │ │ │ └── index.ts │ │ ├── index.ts │ │ ├── types.ts │ │ └── utils │ │ │ ├── allowTs.ts │ │ │ ├── backupPackageFile.ts │ │ │ ├── defineUserConfig.ts │ │ │ ├── index.ts │ │ │ ├── loadUserConfig.ts │ │ │ ├── logger.ts │ │ │ ├── prepareEntryFile.ts │ │ │ └── resolveAppPackages.ts │ ├── tests │ │ └── Core.spec.ts │ └── tsconfig.build.json ├── core │ ├── README.md │ ├── package.json │ ├── resetcss.css │ ├── src │ │ ├── App.ts │ │ ├── DevtoolApi.ts │ │ ├── Env.ts │ │ ├── EventHelper.ts │ │ ├── Flexible.ts │ │ ├── FlowState.ts │ │ ├── IteratorContainer.ts │ │ ├── Node.ts │ │ ├── Page.ts │ │ ├── Store.ts │ │ ├── index.ts │ │ ├── type.ts │ │ └── utils.ts │ └── tests │ │ └── App.spec.ts ├── data-source │ ├── .npmignore │ ├── package.json │ ├── src │ │ ├── DataSourceManager.ts │ │ ├── createDataSourceManager.ts │ │ ├── data-sources │ │ │ ├── Base.ts │ │ │ ├── Http.ts │ │ │ └── index.ts │ │ ├── depsCache.ts │ │ ├── index.ts │ │ ├── observed-data │ │ │ ├── DeepObservedData.ts │ │ │ ├── ObservedData.ts │ │ │ ├── SimpleObservedData.ts │ │ │ └── index.ts │ │ ├── types.ts │ │ └── utils.ts │ └── tests │ │ ├── DataSource.spec.ts │ │ ├── DataSourceMenager.spec.ts │ │ ├── createDataSourceManager.spec.ts │ │ └── utils.spec.ts ├── dep │ ├── package.json │ ├── src │ │ ├── Target.ts │ │ ├── Watcher.ts │ │ ├── index.ts │ │ ├── types.ts │ │ └── utils.ts │ └── tests │ │ ├── Target.spec.ts │ │ ├── Watch.spec.ts │ │ └── utils.spec.ts ├── design │ ├── package.json │ └── src │ │ ├── Autocomplete.vue │ │ ├── Badge.vue │ │ ├── Button.vue │ │ ├── Card.vue │ │ ├── Cascader.vue │ │ ├── Checkbox.vue │ │ ├── CheckboxGroup.vue │ │ ├── Col.vue │ │ ├── Collapse.vue │ │ ├── CollapseItem.vue │ │ ├── ColorPicker.vue │ │ ├── DatePicker.vue │ │ ├── Dialog.vue │ │ ├── Divider.vue │ │ ├── Drawer.vue │ │ ├── Dropdown.vue │ │ ├── DropdownItem.vue │ │ ├── DropdownMenu.vue │ │ ├── Form.vue │ │ ├── FormItem.vue │ │ ├── Icon.vue │ │ ├── Input.vue │ │ ├── InputNumber.vue │ │ ├── Option.vue │ │ ├── OptionGroup.vue │ │ ├── Pagination.vue │ │ ├── Popover.vue │ │ ├── Radio.vue │ │ ├── RadioButton.vue │ │ ├── RadioGroup.vue │ │ ├── Row.vue │ │ ├── Scrollbar.vue │ │ ├── Select.vue │ │ ├── Step.vue │ │ ├── Steps.vue │ │ ├── Switch.vue │ │ ├── TabPane.vue │ │ ├── Table.vue │ │ ├── TableColumn.vue │ │ ├── Tabs.vue │ │ ├── Tag.vue │ │ ├── TimePicker.vue │ │ ├── Tooltip.vue │ │ ├── Tree.vue │ │ ├── Upload.vue │ │ ├── config.ts │ │ ├── index.ts │ │ ├── theme │ │ ├── index.scss │ │ └── popover.scss │ │ └── types.ts ├── editor │ ├── README.md │ ├── package.json │ ├── src │ │ ├── Editor.vue │ │ ├── components │ │ │ ├── CodeBlockEditor.vue │ │ │ ├── CodeParams.vue │ │ │ ├── ContentMenu.vue │ │ │ ├── FloatingBox.vue │ │ │ ├── Icon.vue │ │ │ ├── Resizer.vue │ │ │ ├── ScrollBar.vue │ │ │ ├── ScrollViewer.vue │ │ │ ├── SearchInput.vue │ │ │ ├── SplitView.vue │ │ │ ├── ToolButton.vue │ │ │ ├── Tree.vue │ │ │ └── TreeNode.vue │ │ ├── editorProps.ts │ │ ├── fields │ │ │ ├── Code.vue │ │ │ ├── CodeLink.vue │ │ │ ├── CodeSelect.vue │ │ │ ├── CodeSelectCol.vue │ │ │ ├── CondOpSelect.vue │ │ │ ├── DataSourceFieldSelect │ │ │ │ ├── FieldSelect.vue │ │ │ │ └── Index.vue │ │ │ ├── DataSourceFields.vue │ │ │ ├── DataSourceInput.vue │ │ │ ├── DataSourceMethodSelect.vue │ │ │ ├── DataSourceMethods.vue │ │ │ ├── DataSourceMocks.vue │ │ │ ├── DataSourceSelect.vue │ │ │ ├── DisplayConds.vue │ │ │ ├── EventSelect.vue │ │ │ ├── KeyValue.vue │ │ │ ├── PageFragmentSelect.vue │ │ │ ├── StyleSetter │ │ │ │ ├── Index.vue │ │ │ │ ├── components │ │ │ │ │ ├── BackgroundPosition.vue │ │ │ │ │ ├── Border.vue │ │ │ │ │ ├── Box.vue │ │ │ │ │ └── Position.vue │ │ │ │ ├── icons │ │ │ │ │ ├── background-position │ │ │ │ │ │ ├── LeftBottom.vue │ │ │ │ │ │ ├── LeftCenter.vue │ │ │ │ │ │ ├── LeftTop.vue │ │ │ │ │ │ └── index.ts │ │ │ │ │ ├── background-repeat │ │ │ │ │ │ ├── NoRepeat.vue │ │ │ │ │ │ ├── Repeat.vue │ │ │ │ │ │ ├── RepeatX.vue │ │ │ │ │ │ ├── RepeatY.vue │ │ │ │ │ │ └── index.ts │ │ │ │ │ ├── display │ │ │ │ │ │ ├── Block.vue │ │ │ │ │ │ ├── Flex.vue │ │ │ │ │ │ ├── Inline.vue │ │ │ │ │ │ ├── InlineBlock.vue │ │ │ │ │ │ ├── None.vue │ │ │ │ │ │ └── index.ts │ │ │ │ │ ├── flex-direction │ │ │ │ │ │ ├── Column.vue │ │ │ │ │ │ ├── ColumnReverse.vue │ │ │ │ │ │ ├── Row.vue │ │ │ │ │ │ ├── RowReverse.vue │ │ │ │ │ │ └── index.ts │ │ │ │ │ ├── justify-content │ │ │ │ │ │ ├── Center.vue │ │ │ │ │ │ ├── FlexEnd.vue │ │ │ │ │ │ ├── FlexStart.vue │ │ │ │ │ │ ├── SpaceAround.vue │ │ │ │ │ │ ├── SpaceBetween.vue │ │ │ │ │ │ └── index.ts │ │ │ │ │ └── text-align │ │ │ │ │ │ ├── Center.vue │ │ │ │ │ │ ├── Left.vue │ │ │ │ │ │ ├── Right.vue │ │ │ │ │ │ └── index.ts │ │ │ │ └── pro │ │ │ │ │ ├── Background.vue │ │ │ │ │ ├── Border.vue │ │ │ │ │ ├── Font.vue │ │ │ │ │ ├── Layout.vue │ │ │ │ │ ├── Position.vue │ │ │ │ │ └── index.ts │ │ │ └── UISelect.vue │ │ ├── hooks │ │ │ ├── index.ts │ │ │ ├── use-code-block-edit.ts │ │ │ ├── use-data-source-edit.ts │ │ │ ├── use-editor-content-height.ts │ │ │ ├── use-filter.ts │ │ │ ├── use-float-box.ts │ │ │ ├── use-getso.ts │ │ │ ├── use-next-float-box-position.ts │ │ │ ├── use-node-status.ts │ │ │ ├── use-services.ts │ │ │ ├── use-stage.ts │ │ │ └── use-window-rect.ts │ │ ├── icons │ │ │ ├── AppManageIcon.vue │ │ │ ├── CenterIcon.vue │ │ │ ├── CodeIcon.vue │ │ │ ├── FolderMinusIcon.vue │ │ │ ├── PinIcon.vue │ │ │ └── PinnedIcon.vue │ │ ├── index.ts │ │ ├── initService.ts │ │ ├── layouts │ │ │ ├── AddPageBox.vue │ │ │ ├── CodeEditor.vue │ │ │ ├── Framework.vue │ │ │ ├── NavMenu.vue │ │ │ ├── page-bar │ │ │ │ ├── AddButton.vue │ │ │ │ ├── PageBar.vue │ │ │ │ ├── PageBarScrollContainer.vue │ │ │ │ ├── PageList.vue │ │ │ │ └── Search.vue │ │ │ ├── props-panel │ │ │ │ ├── FormPanel.vue │ │ │ │ ├── PropsPanel.vue │ │ │ │ └── use-style-panel.ts │ │ │ ├── sidebar │ │ │ │ ├── ComponentListPanel.vue │ │ │ │ ├── Sidebar.vue │ │ │ │ ├── code-block │ │ │ │ │ ├── CodeBlockList.vue │ │ │ │ │ ├── CodeBlockListPanel.vue │ │ │ │ │ └── useContentMenu.ts │ │ │ │ ├── data-source │ │ │ │ │ ├── DataSourceConfigPanel.vue │ │ │ │ │ ├── DataSourceList.vue │ │ │ │ │ ├── DataSourceListPanel.vue │ │ │ │ │ └── useContentMenu.ts │ │ │ │ └── layer │ │ │ │ │ ├── LayerMenu.vue │ │ │ │ │ ├── LayerNodeTool.vue │ │ │ │ │ ├── LayerPanel.vue │ │ │ │ │ ├── use-click.ts │ │ │ │ │ ├── use-drag.ts │ │ │ │ │ ├── use-keybinding.ts │ │ │ │ │ └── use-node-status.ts │ │ │ └── workspace │ │ │ │ ├── Breadcrumb.vue │ │ │ │ ├── Workspace.vue │ │ │ │ └── viewer │ │ │ │ ├── NodeListMenu.vue │ │ │ │ ├── Stage.vue │ │ │ │ ├── StageOverlay.vue │ │ │ │ └── ViewerMenu.vue │ │ ├── services │ │ │ ├── BaseService.ts │ │ │ ├── codeBlock.ts │ │ │ ├── componentList.ts │ │ │ ├── dataSource.ts │ │ │ ├── dep.ts │ │ │ ├── editor.ts │ │ │ ├── events.ts │ │ │ ├── history.ts │ │ │ ├── keybinding.ts │ │ │ ├── props.ts │ │ │ ├── stageOverlay.ts │ │ │ ├── storage.ts │ │ │ └── ui.ts │ │ ├── theme │ │ │ ├── breadcrumb.scss │ │ │ ├── code-block.scss │ │ │ ├── code-editor.scss │ │ │ ├── common │ │ │ │ └── var.scss │ │ │ ├── component-list-panel.scss │ │ │ ├── content-menu.scss │ │ │ ├── data-source-field-select.scss │ │ │ ├── data-source-field.scss │ │ │ ├── data-source-fields.scss │ │ │ ├── data-source-input.scss │ │ │ ├── data-source-methods.scss │ │ │ ├── data-source.scss │ │ │ ├── event.scss │ │ │ ├── floating-box.scss │ │ │ ├── framework.scss │ │ │ ├── icon.scss │ │ │ ├── index.scss │ │ │ ├── key-value.scss │ │ │ ├── layer-panel.scss │ │ │ ├── layout.scss │ │ │ ├── nav-menu.scss │ │ │ ├── page-bar.scss │ │ │ ├── page-fragment-select.scss │ │ │ ├── props-panel.scss │ │ │ ├── resizer.scss │ │ │ ├── ruler.scss │ │ │ ├── search-input.scss │ │ │ ├── sidebar.scss │ │ │ ├── stage.scss │ │ │ ├── style-setter │ │ │ │ ├── background.scss │ │ │ │ ├── border.scss │ │ │ │ ├── index.scss │ │ │ │ └── layout.scss │ │ │ ├── theme.scss │ │ │ ├── tree.scss │ │ │ └── workspace.scss │ │ ├── type.ts │ │ └── utils │ │ │ ├── compose.ts │ │ │ ├── config.ts │ │ │ ├── const.ts │ │ │ ├── content-menu.ts │ │ │ ├── data-source │ │ │ ├── formConfigs │ │ │ │ ├── base.ts │ │ │ │ └── http.ts │ │ │ └── index.ts │ │ │ ├── dep │ │ │ ├── idle-task.ts │ │ │ └── worker.ts │ │ │ ├── editor.ts │ │ │ ├── index.ts │ │ │ ├── keybinding-config.ts │ │ │ ├── logger.ts │ │ │ ├── monaco-editor.ts │ │ │ ├── operator.ts │ │ │ ├── props.ts │ │ │ ├── scroll-viewer.ts │ │ │ ├── tree.ts │ │ │ └── undo-redo.ts │ └── tests │ │ └── unit │ │ ├── layouts │ │ └── workspace │ │ │ └── Stage.spec.ts │ │ ├── services │ │ ├── editor.spec.ts │ │ ├── events.spec.ts │ │ ├── props.spec.ts │ │ └── ui.spec.ts │ │ └── utils │ │ ├── editor.spec.ts │ │ ├── form.spec.ts │ │ └── undo-redo.spec.ts ├── element-plus-adapter │ ├── package.json │ └── src │ │ └── index.ts ├── form-schema │ ├── package.json │ └── src │ │ ├── base.ts │ │ ├── editor.ts │ │ └── index.ts ├── form │ ├── README.md │ ├── package.json │ ├── src │ │ ├── Form.vue │ │ ├── FormBox.vue │ │ ├── FormDialog.vue │ │ ├── FormDrawer.vue │ │ ├── containers │ │ │ ├── Col.vue │ │ │ ├── Container.vue │ │ │ ├── Fieldset.vue │ │ │ ├── GroupList.vue │ │ │ ├── GroupListItem.vue │ │ │ ├── Panel.vue │ │ │ ├── Row.vue │ │ │ ├── Step.vue │ │ │ ├── Table.vue │ │ │ └── Tabs.vue │ │ ├── fields │ │ │ ├── Cascader.vue │ │ │ ├── Checkbox.vue │ │ │ ├── CheckboxGroup.vue │ │ │ ├── ColorPicker.vue │ │ │ ├── Date.vue │ │ │ ├── DateTime.vue │ │ │ ├── Daterange.vue │ │ │ ├── Display.vue │ │ │ ├── DynamicField.vue │ │ │ ├── Hidden.vue │ │ │ ├── Link.vue │ │ │ ├── Number.vue │ │ │ ├── NumberRange.vue │ │ │ ├── RadioGroup.vue │ │ │ ├── Select.vue │ │ │ ├── Switch.vue │ │ │ ├── Text.vue │ │ │ ├── Textarea.vue │ │ │ ├── Time.vue │ │ │ └── Timerange.vue │ │ ├── index.ts │ │ ├── schema.ts │ │ ├── theme │ │ │ ├── container.scss │ │ │ ├── date-time.scss │ │ │ ├── fieldset.scss │ │ │ ├── form-box.scss │ │ │ ├── form-dialog.scss │ │ │ ├── form-drawer.scss │ │ │ ├── form.scss │ │ │ ├── group-list.scss │ │ │ ├── index.scss │ │ │ ├── link.scss │ │ │ ├── number-range.scss │ │ │ ├── panel.scss │ │ │ ├── select.scss │ │ │ ├── table.scss │ │ │ ├── tabs.scss │ │ │ └── text.scss │ │ └── utils │ │ │ ├── config.ts │ │ │ ├── containerProps.ts │ │ │ ├── form.ts │ │ │ └── useAddField.ts │ └── tests │ │ └── unit │ │ ├── Form.spec.ts │ │ ├── containers │ │ └── Tabs.spec.ts │ │ ├── fields │ │ ├── Checkbox.spec.ts │ │ ├── CheckboxGroup.spec.ts │ │ ├── ColorPicker.spec.ts │ │ ├── Date.spec.ts │ │ ├── DateTime.spec.ts │ │ ├── Daterange.spec.ts │ │ ├── Display.spec.ts │ │ ├── Hidden.spec.ts │ │ ├── Link.spec.ts │ │ ├── Number.spec.ts │ │ ├── RadioGroup.spec.ts │ │ ├── Switch.spec.ts │ │ ├── Text.spec.ts │ │ ├── Textarea.spec.ts │ │ └── Time.spec.ts │ │ └── utils │ │ ├── config.spec.ts │ │ ├── createForm.spec.ts │ │ └── form.spec.ts ├── schema │ ├── README.md │ ├── package.json │ └── src │ │ └── index.ts ├── stage │ ├── README.md │ ├── package.json │ ├── src │ │ ├── ActionManager.ts │ │ ├── DragResizeHelper.ts │ │ ├── MoveableActionsAble.ts │ │ ├── MoveableOptionsManager.ts │ │ ├── Rule.ts │ │ ├── StageCore.ts │ │ ├── StageDragResize.ts │ │ ├── StageHighlight.ts │ │ ├── StageMask.ts │ │ ├── StageMultiDragResize.ts │ │ ├── StageRender.ts │ │ ├── TargetShadow.ts │ │ ├── const.ts │ │ ├── index.ts │ │ ├── logger.ts │ │ ├── moveable-able.css │ │ ├── style.css │ │ ├── types.ts │ │ └── util.ts │ └── tests │ │ └── unit │ │ └── util.spec.ts ├── table │ ├── README.md │ ├── package.json │ └── src │ │ ├── ActionsColumn.vue │ │ ├── ComponentColumn.vue │ │ ├── ExpandColumn.vue │ │ ├── PopoverColumn.vue │ │ ├── Table.vue │ │ ├── TextColumn.vue │ │ ├── index.ts │ │ ├── schema.ts │ │ ├── theme │ │ └── index.scss │ │ └── utils.ts ├── tdesign-vue-next-adapter │ ├── package.json │ └── src │ │ ├── DatePicker.vue │ │ ├── Icon.vue │ │ ├── Input.vue │ │ ├── Scrollbar.vue │ │ ├── TableColumn.vue │ │ ├── index.ts │ │ └── shims-vue.d.ts └── utils │ ├── package.json │ ├── src │ ├── dom.ts │ └── index.ts │ └── tests │ └── unit │ └── index.spec.ts ├── playground ├── .env.react ├── .env.vue2 ├── .env.vue3 ├── .gitignore ├── README.md ├── index.html ├── package.json ├── public │ └── favicon.png ├── shims-vue.d.ts ├── src │ ├── App.vue │ ├── components │ │ ├── DeviceGroup.vue │ │ └── NavMenu.vue │ ├── configs │ │ ├── componentGroupList.ts │ │ ├── dsl.ts │ │ └── formDsl.ts │ ├── const.ts │ ├── main.ts │ ├── pages │ │ ├── Editor.vue │ │ ├── Form.vue │ │ ├── FormEditor.vue │ │ └── Table.vue │ ├── route.ts │ ├── shims-vue.d.ts │ └── vite-env.d.ts ├── tsconfig.json └── vite.config.ts ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── react-components ├── button │ ├── package.json │ └── src │ │ ├── Button.tsx │ │ ├── event.ts │ │ ├── formConfig.ts │ │ ├── index.ts │ │ └── initValue.ts ├── container │ ├── package.json │ └── src │ │ ├── Component.tsx │ │ ├── Container.tsx │ │ ├── event.ts │ │ ├── formConfig.ts │ │ ├── index.ts │ │ └── initValue.ts ├── img │ ├── package.json │ └── src │ │ ├── Img.tsx │ │ ├── event.ts │ │ ├── formConfig.ts │ │ ├── index.ts │ │ └── initValue.ts ├── iterator-container │ ├── package.json │ └── src │ │ ├── IteratorContainer.tsx │ │ ├── event.ts │ │ ├── formConfig.ts │ │ ├── index.ts │ │ └── initValue.ts ├── overlay │ ├── package.json │ └── src │ │ ├── Overlay.tsx │ │ ├── event.ts │ │ ├── formConfig.ts │ │ ├── index.ts │ │ └── initValue.ts ├── page-fragment-container │ ├── package.json │ └── src │ │ ├── PageFragmentContainer.tsx │ │ ├── event.ts │ │ ├── formConfig.ts │ │ ├── index.ts │ │ └── initValue.ts ├── page-fragment │ ├── package.json │ └── src │ │ ├── PageFragment.tsx │ │ ├── event.ts │ │ ├── formConfig.ts │ │ ├── index.ts │ │ └── initValue.ts ├── page │ ├── package.json │ └── src │ │ ├── Page.tsx │ │ ├── event.ts │ │ ├── formConfig.ts │ │ ├── index.ts │ │ └── initValue.ts ├── qrcode │ ├── package.json │ └── src │ │ ├── QrCode.tsx │ │ ├── event.ts │ │ ├── formConfig.ts │ │ ├── index.ts │ │ └── initValue.ts └── text │ ├── package.json │ └── src │ ├── Text.tsx │ ├── event.ts │ ├── formConfig.ts │ ├── index.ts │ └── initValue.ts ├── rollup.dts.config.js ├── runtime ├── react-runtime-help │ ├── package.json │ └── src │ │ ├── AppContent.ts │ │ ├── hooks │ │ ├── use-app.ts │ │ ├── use-component-status.ts │ │ ├── use-dsl.ts │ │ └── use-editor-dsl.ts │ │ └── index.ts ├── react │ ├── .gitignore │ ├── build.vite.config.ts │ ├── dev.vite.config.ts │ ├── package.json │ ├── page │ │ ├── App.tsx │ │ ├── index.html │ │ └── main.tsx │ ├── playground │ │ ├── App.tsx │ │ ├── index.html │ │ └── main.tsx │ ├── public │ │ └── favicon.png │ ├── tmagic.config.ts │ └── tsconfig.json ├── tmagic-form │ ├── README.md │ ├── package.json │ ├── shims-vue.d.ts │ └── src │ │ ├── App.vue │ │ ├── component-group-list.ts │ │ ├── form-config │ │ ├── checkbox.ts │ │ ├── common.ts │ │ ├── display.ts │ │ ├── index.ts │ │ ├── number.ts │ │ ├── switch.ts │ │ └── text.ts │ │ ├── index.ts │ │ ├── types.ts │ │ └── useFormConfig.ts ├── ui-react │ ├── README.md │ ├── package.json │ └── src │ │ └── index.ts ├── ui │ ├── README.md │ ├── package.json │ └── src │ │ └── index.ts ├── vue-runtime-help │ ├── package.json │ ├── src │ │ ├── hooks │ │ │ ├── use-app.ts │ │ │ ├── use-component-status.ts │ │ │ ├── use-component.ts │ │ │ ├── use-dsl.ts │ │ │ └── use-editor-dsl.ts │ │ └── index.ts │ └── tests │ │ └── use-component.test.ts ├── vue2 │ ├── .gitignore │ ├── build.vite.config.ts │ ├── dev.vite.config.ts │ ├── package.json │ ├── page │ │ ├── App.vue │ │ ├── index.html │ │ ├── main.ts │ │ ├── shims-vue.d.ts │ │ └── utils │ │ │ ├── index.ts │ │ │ └── request.ts │ ├── playground │ │ ├── App.vue │ │ ├── index.html │ │ ├── main.ts │ │ └── shims-vue.d.ts │ ├── public │ │ └── favicon.png │ └── tmagic.config.ts └── vue3 │ ├── .gitignore │ ├── build.vite.config.ts │ ├── dev.vite.config.ts │ ├── package.json │ ├── page │ ├── App.vue │ ├── index.html │ ├── main.ts │ ├── shims-vue.d.ts │ └── utils │ │ ├── index.ts │ │ └── request.ts │ ├── playground │ ├── App.vue │ ├── index.html │ ├── main.ts │ └── shims-vue.d.ts │ ├── public │ └── favicon.png │ └── tmagic.config.ts ├── scripts ├── build.mjs └── release.mjs ├── shims-vue.d.ts ├── tsconfig.build-browser.json ├── tsconfig.build-vue.json ├── tsconfig.check-vue.json ├── tsconfig.check.json ├── tsconfig.json ├── vite-env.d.ts ├── vitest.config.ts └── vue-components ├── button ├── package.json └── src │ ├── event.ts │ ├── formConfig.ts │ ├── index.ts │ ├── index.vue │ └── initValue.ts ├── container ├── package.json └── src │ ├── Component.ts │ ├── Container.vue │ ├── event.ts │ ├── formConfig.ts │ ├── index.ts │ └── initValue.ts ├── img ├── package.json └── src │ ├── event.ts │ ├── formConfig.ts │ ├── index.ts │ ├── index.vue │ └── initValue.ts ├── iterator-container ├── package.json └── src │ ├── IteratorContainer.vue │ ├── IteratorItem.vue │ ├── event.ts │ ├── formConfig.ts │ ├── index.ts │ ├── initValue.ts │ └── type.ts ├── overlay ├── package.json └── src │ ├── event.ts │ ├── formConfig.ts │ ├── index.ts │ ├── index.vue │ └── initValue.ts ├── page-fragment-container ├── package.json └── src │ ├── PageFragmentContainer.vue │ ├── event.ts │ ├── formConfig.ts │ ├── index.ts │ └── initValue.ts ├── page-fragment ├── package.json └── src │ ├── PageFragment.vue │ ├── event.ts │ ├── formConfig.ts │ ├── index.ts │ └── initValue.ts ├── page ├── package.json └── src │ ├── event.ts │ ├── formConfig.ts │ ├── index.ts │ ├── index.vue │ └── initValue.ts ├── qrcode ├── package.json └── src │ ├── event.ts │ ├── formConfig.ts │ ├── index.ts │ ├── index.vue │ └── initValue.ts └── text ├── package.json └── src ├── event.ts ├── formConfig.ts ├── index.ts ├── index.vue └── initValue.ts /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | end_of_line = lf 5 | trim_trailing_whitespace = true 6 | insert_final_newline = true 7 | max_line_length = 100 8 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | dist 4 | types 5 | 6 | .temp 7 | .cache 8 | temp 9 | 10 | # local env files 11 | .env.local 12 | .env.*.local 13 | 14 | # Log files 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | pnpm-debug.log* 19 | 20 | # Editor directories and files 21 | .idea 22 | .vscode 23 | *.suo 24 | *.ntvs* 25 | *.njsproj 26 | *.sln 27 | *.sw? 28 | 29 | coverage 30 | 31 | auto-imports.d.ts 32 | components.d.ts 33 | docs/.vitepress/cache 34 | 35 | .eslintcache 36 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx --no-install commitlint --edit $1 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | 6 | pnpm check:type 7 | -------------------------------------------------------------------------------- /.husky/pre-push: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npm test 5 | -------------------------------------------------------------------------------- /commitlint.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { extends: ['@commitlint/config-conventional'] }; 2 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/styles/vars.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --vp-c-brand: #2882e0; 3 | --vp-button-brand-border: #2882e0; 4 | --vp-button-brand-hover-border: #2882e0; 5 | --vp-c-brand-light: #559ce7; 6 | --vp-c-brand-lighter: #2882e0; 7 | --vp-c-brand-lightest: #2882e0; 8 | --vp-c-brand-dark: #2882e0; 9 | --vp-c-brand-darker: #2882e0; 10 | } -------------------------------------------------------------------------------- /docs/api/editor/componentListServiceMethods.md: -------------------------------------------------------------------------------- 1 | # componentListService方法 2 | 3 | ## setList 4 | 5 | - **参数：** 6 | 7 | - 8 | 9 | - **返回：** 10 | 11 | - `{Promise}` 12 | 13 | - **详情：** 14 | 15 | ## getList 16 | 17 | - **参数：** 18 | 19 | - 20 | 21 | - **返回：** 22 | 23 | - `{Promise}` 24 | 25 | - **详情：** 26 | 27 | ## destroy 28 | 29 | - **参数：** 30 | 31 | - 32 | 33 | - **返回：** 34 | 35 | - `{Promise}` 36 | 37 | - **详情：** 38 | -------------------------------------------------------------------------------- /docs/api/editor/dataSourceServiceMethods.md: -------------------------------------------------------------------------------- 1 | # dataSourceService方法 2 | 3 | ## get 4 | 5 | ## getFormConfig 6 | 7 | ## setFormConfig 8 | 9 | ## getFormValue 10 | 11 | ## setFormValue 12 | 13 | ## getFormEvent 14 | 15 | ## setFormEvent 16 | 17 | ## getFormMethod 18 | 19 | ## setFormMethod 20 | 21 | ## add 22 | 23 | ## update 24 | 25 | ## remove 26 | 27 | ## getDataSourceById 28 | 29 | ## resetState 30 | 31 | ## destroy -------------------------------------------------------------------------------- /docs/api/editor/events.md: -------------------------------------------------------------------------------- 1 | # Editor组件 events 2 | 3 | ## props-panel-mounted 4 | 5 | - **详情：** 编辑器右侧组件属性配置加载完毕后触发 6 | 7 | - **回调函数：** (formState: [FomState](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/form/src/schema.ts#L27-L39)) => void 8 | -------------------------------------------------------------------------------- /docs/api/editor/historyServiceEvents.md: -------------------------------------------------------------------------------- 1 | # historyService事件 2 | 3 | ## page-change 4 | 5 | - **详情：** 页面切换 6 | 7 | - **回调函数：** (undoRedo: [undoRedo](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/utils/undo-redo.ts)) => void 8 | 9 | ## change 10 | 11 | - **详情：** 历史记录发生变化 12 | 13 | - **回调函数：** (state: [StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404)) => void 14 | 15 | -------------------------------------------------------------------------------- /docs/api/editor/propsServiceEvents.md: -------------------------------------------------------------------------------- 1 | # propsService事件 2 | 3 | ## props-configs-change 4 | 5 | - **详情：** [propsService.setPropsConfigs()](./propsServiceMethods.md#setPropsConfigs)后触发 6 | 7 | - **回调函数：** () => void 8 | -------------------------------------------------------------------------------- /docs/api/editor/uiServiceMethods.md: -------------------------------------------------------------------------------- 1 | # uiService方法 2 | 3 | ## zoom 4 | 5 | - **[扩展支持](../../guide/editor-expand#行为扩展)：** 是 6 | 7 | - **参数：** 8 | 9 | - `{number}` zoom 缩放倍数 10 | 11 | - **返回：** 12 | 13 | - `{Promise}` 14 | 15 | - **详情：** 16 | 17 | 设置缩放倍数，最小为0.1 18 | 19 | ## calcZoom 20 | 21 | - **[扩展支持](../../guide/editor-expand#行为扩展)：** 是 22 | 23 | - **返回：** 24 | 25 | - `{Promise}` 26 | 27 | - **详情：** 28 | 29 | 计算出缩放以适应的倍数 30 | 31 | ## use 32 | 33 | 使用中间件的方式扩展方法，上述方法中标记有`扩展支持： 是`的方法都支持使用use扩展 34 | 35 | ## usePlugin 36 | 37 | - **详情：** 38 | 39 | 相对于[use](#use), usePlugin支持更加灵活更加细致的扩展， 上述方法中标记有`扩展支持： 是`的方法都支持使用usePlugin扩展 40 | 41 | 每个支持扩展的方法都支持定制before、after两个hook来干预原有方法的行为，before可以用于修改传入参数，after可以用于修改返回的值 42 | 43 | ## removeAllPlugins 44 | 45 | - **详情：** 46 | 47 | 删掉当前设置的所有扩展 48 | 49 | -------------------------------------------------------------------------------- /docs/api/form/form-dialog-events.md: -------------------------------------------------------------------------------- 1 | # FormDialog组件 events 2 | 3 | ## close 4 | 5 | - **详情：** 弹出关闭 6 | 7 | - **回调函数：** () => void 8 | 9 | 10 | ## submit 11 | 12 | - **详情：** 调用[save()](./form-dialog-methods.md#save) 13 | 14 | - **回调函数：** (values: any) => void 15 | 16 | ## error 17 | 18 | - **详情：** 表单校验不同 19 | 20 | - **回调函数：** (error: any) => void 21 | 22 | ## change 23 | 24 | - **详情：** 表单中任何值发生变化 25 | 26 | - **回调函数：** (values: any) => void 27 | 28 | -------------------------------------------------------------------------------- /docs/api/form/form-dialog-methods.md: -------------------------------------------------------------------------------- 1 | # FormDialog组件 methods 2 | 3 | ## cancel 4 | 5 | - **详情：** 关闭弹窗 6 | 7 | ## save 8 | 9 | - **返回：** 10 | 11 | - `{Promise}` 12 | 13 | - **详情：** 获取表单的值 14 | -------------------------------------------------------------------------------- /docs/api/form/form-events.md: -------------------------------------------------------------------------------- 1 | # Form组件 events 2 | 3 | ## change 4 | 5 | - **详情：** 表单中任何值发生变化 6 | 7 | - **回调函数：** (values: any) => void 8 | -------------------------------------------------------------------------------- /docs/api/form/form-methods.md: -------------------------------------------------------------------------------- 1 | # Form组件 methods 2 | 3 | ## resetForm 4 | 5 | - **详情：** 重置该表单项，将其值重置为初始值，并移除校验结果 6 | 7 | ## submitForm 8 | 9 | - **返回：** 10 | 11 | - `{Promise}` 12 | 13 | - **详情：** 提交表单，获取表单的值 14 | -------------------------------------------------------------------------------- /docs/api/stage/coreEvents.md: -------------------------------------------------------------------------------- 1 | # stage事件 2 | 3 | ## runtime-ready 4 | 5 | ## mounted 6 | 7 | ## highlight 8 | 9 | ## update 10 | 11 | ## select 12 | 13 | ## multi-select 14 | 15 | ## select-parent 16 | 17 | ## sort 18 | 19 | ## update 20 | 21 | ## change-guides 22 | -------------------------------------------------------------------------------- /docs/api/stage/coreMethods.md: -------------------------------------------------------------------------------- 1 | # stage方法 2 | 3 | ## select 4 | 5 | - **详情：** 单选选中元素 6 | 7 | ## multiSelect 8 | 9 | - **详情：** 多选选中多个元素 10 | 11 | ## highlight 12 | 13 | - **详情：** 高亮选中元素 14 | 15 | ## update 16 | 17 | - **详情：** 更新组件 18 | 19 | ## add 20 | 21 | - **详情：** 往画布增加一个组件 22 | 23 | ## remove 24 | 25 | - **详情：** 从画布删除一个组件 26 | 27 | ## setZoom 28 | 29 | - **详情：** 30 | 31 | ## mount 32 | 33 | - **详情：** 挂载Dom节点 34 | 35 | ## clearGuides 36 | 37 | - **详情：** 清空所有参考线 38 | 39 | ## clearGuides 40 | 41 | - **详情：** 清空所有参考线 42 | 43 | ## delayedMarkContainer 44 | 45 | - **详情：** 46 | 47 | 鼠标拖拽着元素，在容器上方悬停，延迟一段时间后，对容器进行标记，如果悬停时间够长将标记成功，悬停时间短，调用方通过返回的timeoutId取消标记 48 | 49 | 标记的作用： 50 | 51 | 1、高亮容器，给用户一个加入容器的交互感知； 52 | 53 | 2、释放鼠标后，通过标记的标志找到要加入的容器 54 | 55 | ## destroy 56 | 57 | - **详情：** 销毁实例 58 | 59 | -------------------------------------------------------------------------------- /docs/api/table/events.md: -------------------------------------------------------------------------------- 1 | # Table组件 events 2 | 3 | ## sort-change 4 | 5 | ## after-action 6 | 7 | ## select 8 | 9 | ## select-all 10 | 11 | ## selection-change 12 | 13 | ## expand-change 14 | 15 | ## cell-click 16 | -------------------------------------------------------------------------------- /docs/api/table/methods.md: -------------------------------------------------------------------------------- 1 | # Table组件 methods 2 | 3 | ## toggleRowSelection 4 | 5 | ## toggleRowExpansion 6 | 7 | ## clearSelection 8 | -------------------------------------------------------------------------------- /docs/form-config/compare.md: -------------------------------------------------------------------------------- 1 | # 表单对比 2 | tmagic-form可以支持两个版本的表单值对比，如果有容器嵌套，将在tab标签页展示对应tab下存在的差异数，便于在复杂嵌套表单场景下直观的看到差异情况 3 | ## 使用方法 4 | 在初始化表单时，需要传入当前版本的表单值，上一版本的表单值，以及表单配置，具体可参见[Form Playground](https://tencent.github.io/tmagic-editor/playground/index.html#/form)的demo演示 5 | ## 效果展示 6 | 表单对比 7 | 8 | -------------------------------------------------------------------------------- /docs/form-config/fields/color-picker.md: -------------------------------------------------------------------------------- 1 | # ColorPicker 颜色选择器 2 | 3 | 用于颜色选择，支持多种格式。 4 | 5 | ## 基础用法 6 | 7 | 12 | 17 | 18 | -------------------------------------------------------------------------------- /docs/form-config/fields/display.md: -------------------------------------------------------------------------------- 1 | 2 | # Display 只读文本 3 | 4 | 用于显示，不可编辑 5 | 6 | ## TS 定义 7 | 8 | ```typescript 9 | interface Display extends FormItem { 10 | type: 'display'; 11 | } 12 | ``` 13 | 14 | 点击查看[FormItem](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)的定义 15 | 16 | ## 基础用法 17 | 18 | 24 | 29 | 30 | 31 | 32 | ## Input Attributes 33 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 34 | |---------- |-------- |---------- |------------- |-------- | 35 | | name | 绑定值 | string | — | — | 36 | | text | 表单标签 | string | — | — | 37 | -------------------------------------------------------------------------------- /docs/form-config/fields/hidden.md: -------------------------------------------------------------------------------- 1 | # Hidden 隐藏域 2 | 3 | 改值体现于最终提交的表单中，用于例如编辑记录的id这种场景中 4 | 5 | ## TS 定义 6 | 7 | ```typescript 8 | interface Hidden extends FormItem { 9 | type: 'hidden'; 10 | } 11 | ``` 12 | 13 | 点击查看[FormItem](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)的定义 14 | 15 | ## 基础用法 16 | 17 | 21 | 26 | 27 | 28 | 29 | ## Input Attributes 30 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 31 | |---------- |-------- |---------- |------------- |-------- | 32 | | name | 绑定值 | string | — | — | 33 | -------------------------------------------------------------------------------- /docs/form-config/relate.md: -------------------------------------------------------------------------------- 1 | # 联动 2 | 3 | ## 显隐 4 | 5 | 14 | 15 | ## 输入关联 16 | 17 | 37 | 38 | -------------------------------------------------------------------------------- /docs/guide/tutorial/index.md: -------------------------------------------------------------------------------- 1 | # 写在前面 2 | 3 | 本教程将一步一步引导大家实现一个完整的可视化编辑器，每个章节都是在前一章节的基础上进行，后一章节会比前一章节的功能更加完善，旨在帮助大家理解编辑器的各个组成部分的实现思路 4 | 5 | [第一章 Hello World](./hello-world.md) 6 | 7 | 通过搭建一个最简单的编辑器，让大家对编辑器有一个最基本的认识。 8 | 9 | [第二章 Runtime](./runtime.md) 10 | 11 | 通过将组件渲染从编辑器中解耦分离出来，实现编辑器对不同技术栈实现的组件的支持 12 | 13 | [第三章 DSL解析渲染](./render.md) 14 | 15 | 理解DSL，并将DSL渲染成对应的组件 16 | -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | 4 | title: tmagic-editor 5 | titleTemplate: tmagic-editor 6 | 7 | hero: 8 | name: tmagic-editor 9 | text: 页面可视化平台 10 | image: 11 | src: ./favicon.png 12 | alt: TMagicEditor 13 | 14 | actions: 15 | - theme: brand 16 | text: 开始 17 | link: /guide/ 18 | - theme: alt 19 | text: GitHub 20 | link: https://github.com/Tencent/tmagic-editor 21 | 22 | 23 | features: 24 | - title: 所见即所得 25 | details: 体验友好的拖拽编辑方式。 26 | - title: 丰富的拓展能力 27 | details: 支持业务方自定义组件、插件。 28 | - title: 支持多种布局方式 29 | details: tmagic-editor的容器概念，支持配置项目时，自由组合嵌套业务组件，提供超强的组件布局方式。 30 | - title: 强大的配置 31 | details: 支持表单联动等配置能力。 32 | - title: 组件联动 33 | details: 支持组件通信、组件联动，允许页面内各组件提供丰富配置能力。 34 | - title: 低代码 35 | details: 支持在平台写入代码，修改页面样式属性等，提供除组件外的高级编码能力。 36 | 37 | footer: Powered by 腾讯视频会员平台技术中心 38 | --- 39 | -------------------------------------------------------------------------------- /docs/public/code-block-list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmagic-editor/92534fc9159b408f93e194ce119b45ff5cd5f95f/docs/public/code-block-list.png -------------------------------------------------------------------------------- /docs/public/code-block.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmagic-editor/92534fc9159b408f93e194ce119b45ff5cd5f95f/docs/public/code-block.png -------------------------------------------------------------------------------- /docs/public/create-data-source.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmagic-editor/92534fc9159b408f93e194ce119b45ff5cd5f95f/docs/public/create-data-source.png -------------------------------------------------------------------------------- /docs/public/data-source-input.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmagic-editor/92534fc9159b408f93e194ce119b45ff5cd5f95f/docs/public/data-source-input.png -------------------------------------------------------------------------------- /docs/public/data-source.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmagic-editor/92534fc9159b408f93e194ce119b45ff5cd5f95f/docs/public/data-source.png -------------------------------------------------------------------------------- /docs/public/display-cond.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmagic-editor/92534fc9159b408f93e194ce119b45ff5cd5f95f/docs/public/display-cond.png -------------------------------------------------------------------------------- /docs/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmagic-editor/92534fc9159b408f93e194ce119b45ff5cd5f95f/docs/public/favicon.png -------------------------------------------------------------------------------- /docs/public/flow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmagic-editor/92534fc9159b408f93e194ce119b45ff5cd5f95f/docs/public/flow.png -------------------------------------------------------------------------------- /docs/public/layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmagic-editor/92534fc9159b408f93e194ce119b45ff5cd5f95f/docs/public/layout.png -------------------------------------------------------------------------------- /docs/public/tmagic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmagic-editor/92534fc9159b408f93e194ce119b45ff5cd5f95f/docs/public/tmagic.png -------------------------------------------------------------------------------- /docs/public/tutorial/one/init.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmagic-editor/92534fc9159b408f93e194ce119b45ff5cd5f95f/docs/public/tutorial/one/init.png -------------------------------------------------------------------------------- /eslint-config/flat/import.mjs: -------------------------------------------------------------------------------- 1 | import { rules } from 'eslint-plugin-import'; 2 | 3 | export default { 4 | plugins: { 5 | import: { 6 | meta: { name: 'eslint-plugin-import' }, 7 | rules, 8 | }, 9 | }, 10 | files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2018, 13 | sourceType: 'module', 14 | }, 15 | rules: { 16 | /** 17 | * 导入语句前不允许有任何非导入语句 18 | */ 19 | 'import/first': 'error', 20 | /** 21 | * 禁止重复导入模块 22 | */ 23 | 'import/no-duplicates': 'error', 24 | /** 25 | * 禁止使用 let 导出 26 | */ 27 | 'import/no-mutable-exports': 'warn', 28 | /** 29 | * 禁用导入的模块时使用 webpack 特有的语法（感叹号） 30 | */ 31 | 'import/no-webpack-loader-syntax': 'warn', 32 | /** 33 | * 当只有一个导出时，必须使用 export default 来导出 34 | */ 35 | 'import/prefer-default-export': 'off', 36 | }, 37 | }; 38 | -------------------------------------------------------------------------------- /eslint-config/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tmagic/eslint-config", 3 | "version": "0.0.1", 4 | "main": "index.mjs", 5 | "type": "module", 6 | "repository": { 7 | "directory": "eslint-config", 8 | "type": "git", 9 | "url": "https://github.com/Tencent/tmagic-editor.git" 10 | }, 11 | "dependencies": { 12 | "@eslint/js": "^9.24.0", 13 | "@typescript-eslint/parser": "^8.30.1", 14 | "@typescript-eslint/eslint-plugin": "^8.30.1", 15 | "@stylistic/eslint-plugin": "^4.2.0", 16 | "@stylistic/eslint-plugin-ts": "^4.2.0", 17 | "eslint-config-prettier": "^10.1.2", 18 | "eslint-plugin-import": "^2.31.0", 19 | "eslint-plugin-simple-import-sort": "^12.1.1", 20 | "eslint-plugin-vue": "^10.0.0", 21 | "eslint-plugin-prettier": "^5.2.6", 22 | "globals": "^16.0.0", 23 | "typescript-eslint": "^8.30.1" 24 | }, 25 | "peerDependencies": { 26 | "eslint": ">=9.24.0", 27 | "prettier": ">=3.5.3" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/cli/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | lib 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | 24 | coverage 25 | -------------------------------------------------------------------------------- /packages/cli/bin/tmagic.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const { cli } = require('../lib'); 4 | 5 | cli({ 6 | source: process.cwd(), 7 | packages: {}, 8 | componentFileAffix: '', 9 | cleanTemp: true, 10 | temp: '.tmagic', 11 | useTs: true, 12 | dynamicImport: false, 13 | npmConfig: { 14 | client: 'npm', 15 | autoInstall: true, 16 | keepPackageJsonClean: true, 17 | }, 18 | }); 19 | -------------------------------------------------------------------------------- /packages/cli/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './cli'; 2 | export * from './utils'; 3 | export * from './types'; 4 | export * from './commands'; 5 | -------------------------------------------------------------------------------- /packages/cli/src/utils/allowTs.ts: -------------------------------------------------------------------------------- 1 | import { transformSync } from 'esbuild'; 2 | import fs from 'fs-extra'; 3 | 4 | /** 5 | * Transform a ts file to cjs code 6 | */ 7 | export const transformTsFileToCodeSync = (filename: string): string => 8 | transformSync(fs.readFileSync(filename).toString(), { 9 | format: 'cjs', 10 | loader: 'ts', 11 | sourcefile: filename, 12 | sourcemap: 'inline', 13 | target: 'node18', 14 | }).code; 15 | 16 | /** 17 | * Globally allow ts files to be loaded via `require()` 18 | */ 19 | export const allowTs = (): void => { 20 | require.extensions['.ts'] = (m: any, filename) => { 21 | m._compile(transformTsFileToCodeSync(filename), filename); 22 | }; 23 | }; 24 | -------------------------------------------------------------------------------- /packages/cli/src/utils/defineUserConfig.ts: -------------------------------------------------------------------------------- 1 | import { UserConfig } from '../types'; 2 | 3 | export const defineConfig = (config: Partial): Partial => config; 4 | -------------------------------------------------------------------------------- /packages/cli/src/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from './allowTs'; 2 | export * from './defineUserConfig'; 3 | export * from './loadUserConfig'; 4 | export * from './prepareEntryFile'; 5 | export * from './resolveAppPackages'; 6 | export * from './backupPackageFile'; 7 | -------------------------------------------------------------------------------- /packages/cli/src/utils/logger.ts: -------------------------------------------------------------------------------- 1 | import pico from 'picocolors'; 2 | 3 | export const info = (msg: string) => { 4 | console.log(pico.white(msg)); 5 | }; 6 | 7 | export const error = (msg: string) => { 8 | console.log(pico.red(msg)); 9 | }; 10 | 11 | export const success = (msg: string) => { 12 | console.log(pico.green(msg)); 13 | }; 14 | 15 | export const execInfo = (msg: string) => { 16 | console.log(pico.blue(msg)); 17 | }; 18 | -------------------------------------------------------------------------------- /packages/cli/tests/Core.spec.ts: -------------------------------------------------------------------------------- 1 | import path from 'node:path'; 2 | 3 | import { describe, expect, test } from 'vitest'; 4 | 5 | import Core from '../src/Core'; 6 | 7 | describe('Core', () => { 8 | test('instance', () => { 9 | const core = new Core({ 10 | packages: [], 11 | source: './a', 12 | temp: './b', 13 | }); 14 | expect(core).toBeInstanceOf(Core); 15 | 16 | expect(core.dir.temp()).toBe(path.join(process.cwd(), './a/b')); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/cli/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 5 | "moduleResolution": "Node", 6 | "module": "CommonJS", 7 | "rootDir": "./src", 8 | "outDir": "./lib", 9 | "declaration": true, 10 | 11 | "types": ["node"], 12 | }, 13 | "include": ["./src"], 14 | } 15 | -------------------------------------------------------------------------------- /packages/core/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmagic-editor/92534fc9159b408f93e194ce119b45ff5cd5f95f/packages/core/README.md -------------------------------------------------------------------------------- /packages/core/src/FlowState.ts: -------------------------------------------------------------------------------- 1 | export default class FlowState { 2 | public isAbort: boolean; 3 | constructor() { 4 | this.isAbort = false; 5 | } 6 | public abort() { 7 | this.isAbort = true; 8 | } 9 | public reset() { 10 | this.isAbort = false; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/core/src/Store.ts: -------------------------------------------------------------------------------- 1 | export default class Store { 2 | private data: any; 3 | 4 | constructor({ initialData = {} }: { initialData?: any } = {}) { 5 | this.data = initialData; 6 | } 7 | 8 | public set(key: string, value: any) { 9 | this.data[key] = value; 10 | } 11 | 12 | public get(key: string) { 13 | return this.data[key]; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/data-source/.npmignore: -------------------------------------------------------------------------------- 1 | .babelrc 2 | .eslintrc 3 | .editorconfig 4 | node_modules 5 | .DS_Store 6 | examples 7 | tests 8 | .code.yml 9 | reports 10 | tsconfig.build.json 11 | tsconfig.json 12 | vite.config.ts 13 | 14 | # local env files 15 | .env.local 16 | .env.*.local 17 | 18 | # Log files 19 | npm-debug.log* 20 | pnpm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | 24 | # Editor directories and files 25 | .idea 26 | .vscode 27 | *.suo 28 | *.ntvs* 29 | *.njsproj 30 | *.sln 31 | *.sw? 32 | -------------------------------------------------------------------------------- /packages/data-source/src/data-sources/index.ts: -------------------------------------------------------------------------------- 1 | export { default as DataSource } from './Base'; 2 | export { default as HttpDataSource } from './Http'; 3 | -------------------------------------------------------------------------------- /packages/data-source/src/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | export { default as DataSourceManager } from './DataSourceManager'; 19 | export * from './data-sources'; 20 | export * from './createDataSourceManager'; 21 | export * from './observed-data'; 22 | export * from './utils'; 23 | export * from './types'; 24 | -------------------------------------------------------------------------------- /packages/data-source/src/observed-data/ObservedData.ts: -------------------------------------------------------------------------------- 1 | export abstract class ObservedData { 2 | abstract update(data: any, path?: string): void; 3 | 4 | abstract on(path: string, callback: (newVal: any) => void): void; 5 | 6 | abstract off(path: string, callback: (newVal: any) => void): void; 7 | 8 | abstract getData(path: string): any; 9 | 10 | abstract destroy(): void; 11 | } 12 | -------------------------------------------------------------------------------- /packages/data-source/src/observed-data/index.ts: -------------------------------------------------------------------------------- 1 | export { ObservedData } from './ObservedData'; 2 | export { DeepObservedData } from './DeepObservedData'; 3 | export { SimpleObservedData } from './SimpleObservedData'; 4 | -------------------------------------------------------------------------------- /packages/dep/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.5.20", 3 | "name": "@tmagic/dep", 4 | "type": "module", 5 | "main": "dist/tmagic-dep.umd.cjs", 6 | "module": "dist/tmagic-dep.js", 7 | "types": "types/index.d.ts", 8 | "exports": { 9 | ".": { 10 | "types": "./types/index.d.ts", 11 | "import": "./dist/tmagic-dep.js", 12 | "require": "./dist/tmagic-dep.umd.cjs" 13 | }, 14 | "./*": "./*" 15 | }, 16 | "files": [ 17 | "dist", 18 | "types", 19 | "src" 20 | ], 21 | "license": "Apache-2.0", 22 | "engines": { 23 | "node": ">=18" 24 | }, 25 | "repository": { 26 | "directory": "packages/dep", 27 | "type": "git", 28 | "url": "https://github.com/Tencent/tmagic-editor.git" 29 | }, 30 | "peerDependencies": { 31 | "@tmagic/schema": "workspace:*", 32 | "@tmagic/utils": "workspace:*", 33 | "typescript": "*" 34 | }, 35 | "peerDependenciesMeta": { 36 | "typescript": { 37 | "optional": true 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /packages/dep/src/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Target } from './Target'; 2 | export { default as Watcher } from './Watcher'; 3 | export * from './utils'; 4 | export * from './types'; 5 | -------------------------------------------------------------------------------- /packages/dep/tests/Target.spec.ts: -------------------------------------------------------------------------------- 1 | import { describe, expect, test } from 'vitest'; 2 | 3 | import Target from '../src/Target'; 4 | 5 | describe('Target', () => { 6 | test('instance', () => { 7 | const target = new Target({ 8 | isTarget: () => true, 9 | id: 'target', 10 | }); 11 | expect(target).toBeInstanceOf(Target); 12 | }); 13 | 14 | test('default target type', () => { 15 | const defaultTarget = new Target({ 16 | isTarget: () => true, 17 | id: 'default', 18 | type: 'default', 19 | }); 20 | const target = new Target({ 21 | isTarget: () => true, 22 | id: 'target', 23 | type: 'target', 24 | }); 25 | expect(defaultTarget.type).toBe('default'); 26 | expect(target.type).toBe('target'); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /packages/design/src/Badge.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 24 | -------------------------------------------------------------------------------- /packages/design/src/Button.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 33 | -------------------------------------------------------------------------------- /packages/design/src/Card.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 31 | -------------------------------------------------------------------------------- /packages/design/src/CheckboxGroup.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 41 | -------------------------------------------------------------------------------- /packages/design/src/Col.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 25 | -------------------------------------------------------------------------------- /packages/design/src/Collapse.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 41 | -------------------------------------------------------------------------------- /packages/design/src/DatePicker.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 42 | -------------------------------------------------------------------------------- /packages/design/src/Divider.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 25 | -------------------------------------------------------------------------------- /packages/design/src/Dropdown.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 35 | -------------------------------------------------------------------------------- /packages/design/src/DropdownItem.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 25 | -------------------------------------------------------------------------------- /packages/design/src/DropdownMenu.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | -------------------------------------------------------------------------------- /packages/design/src/FormItem.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 28 | -------------------------------------------------------------------------------- /packages/design/src/Icon.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 22 | -------------------------------------------------------------------------------- /packages/design/src/Option.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 25 | -------------------------------------------------------------------------------- /packages/design/src/OptionGroup.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 27 | -------------------------------------------------------------------------------- /packages/design/src/Radio.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 25 | -------------------------------------------------------------------------------- /packages/design/src/RadioButton.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 25 | -------------------------------------------------------------------------------- /packages/design/src/RadioGroup.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 41 | -------------------------------------------------------------------------------- /packages/design/src/Row.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /packages/design/src/Scrollbar.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | -------------------------------------------------------------------------------- /packages/design/src/Step.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 31 | -------------------------------------------------------------------------------- /packages/design/src/Steps.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 25 | -------------------------------------------------------------------------------- /packages/design/src/Switch.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 43 | -------------------------------------------------------------------------------- /packages/design/src/TabPane.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 31 | -------------------------------------------------------------------------------- /packages/design/src/TableColumn.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 28 | -------------------------------------------------------------------------------- /packages/design/src/Tag.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 25 | -------------------------------------------------------------------------------- /packages/design/src/TimePicker.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 40 | -------------------------------------------------------------------------------- /packages/design/src/Tooltip.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 28 | -------------------------------------------------------------------------------- /packages/design/src/Upload.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 42 | -------------------------------------------------------------------------------- /packages/design/src/theme/index.scss: -------------------------------------------------------------------------------- 1 | @use "./popover.scss"; 2 | -------------------------------------------------------------------------------- /packages/editor/README.md: -------------------------------------------------------------------------------- 1 | # [文档](https://tencent.github.io/tmagic-editor/docs/) -------------------------------------------------------------------------------- /packages/editor/src/components/Icon.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 28 | -------------------------------------------------------------------------------- /packages/editor/src/components/Resizer.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 24 | -------------------------------------------------------------------------------- /packages/editor/src/components/SearchInput.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 39 | -------------------------------------------------------------------------------- /packages/editor/src/fields/Code.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 36 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/background-position/LeftBottom.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/background-position/LeftCenter.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/background-position/LeftTop.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/background-position/index.ts: -------------------------------------------------------------------------------- 1 | export { default as BackgroundPositionLeftTop } from './LeftTop.vue'; 2 | export { default as DisplayFlex } from './Flex.vue'; 3 | export { default as DisplayInline } from './Inline.vue'; 4 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/background-repeat/NoRepeat.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/background-repeat/RepeatX.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/background-repeat/RepeatY.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/background-repeat/index.ts: -------------------------------------------------------------------------------- 1 | export { default as BackgroundRepeat } from './Repeat.vue'; 2 | export { default as BackgroundRepeatX } from './RepeatX.vue'; 3 | export { default as BackgroundRepeatY } from './RepeatY.vue'; 4 | export { default as BackgroundNoRepeat } from './NoRepeat.vue'; 5 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/display/Block.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/display/Flex.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/display/None.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/display/index.ts: -------------------------------------------------------------------------------- 1 | export { default as DisplayBlock } from './Block.vue'; 2 | export { default as DisplayFlex } from './Flex.vue'; 3 | export { default as DisplayInline } from './Inline.vue'; 4 | export { default as DisplayInlineBlock } from './InlineBlock.vue'; 5 | export { default as DisplayNone } from './None.vue'; 6 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/flex-direction/Column.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/flex-direction/ColumnReverse.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/flex-direction/Row.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/flex-direction/RowReverse.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/flex-direction/index.ts: -------------------------------------------------------------------------------- 1 | export { default as FlexDirectionColumn } from './Column.vue'; 2 | export { default as FlexDirectionColumnReverse } from './ColumnReverse.vue'; 3 | export { default as FlexDirectionRow } from './Row.vue'; 4 | export { default as FlexDirectionRowReverse } from './RowReverse.vue'; 5 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/justify-content/Center.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/justify-content/FlexEnd.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/justify-content/FlexStart.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/justify-content/SpaceAround.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/justify-content/SpaceBetween.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/justify-content/index.ts: -------------------------------------------------------------------------------- 1 | export { default as JustifyContentCenter } from './Center.vue'; 2 | export { default as JustifyContentFlexEnd } from './FlexEnd.vue'; 3 | export { default as JustifyContentFlexStart } from './FlexStart.vue'; 4 | export { default as JustifyContentSpaceAround } from './SpaceAround.vue'; 5 | export { default as JustifyContentSpaceBetween } from './SpaceBetween.vue'; 6 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/text-align/Center.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/text-align/Left.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/text-align/Right.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/icons/text-align/index.ts: -------------------------------------------------------------------------------- 1 | export { default as AlignLeft } from './Left.vue'; 2 | export { default as AlignCenter } from './Center.vue'; 3 | export { default as AlignRight } from './Right.vue'; 4 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/pro/Border.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 36 | -------------------------------------------------------------------------------- /packages/editor/src/fields/StyleSetter/pro/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Background } from './Background.vue'; 2 | export { default as Font } from './Font.vue'; 3 | export { default as Layout } from './Layout.vue'; 4 | export { default as Position } from './Position.vue'; 5 | export { default as Border } from './Border.vue'; 6 | -------------------------------------------------------------------------------- /packages/editor/src/hooks/use-editor-content-height.ts: -------------------------------------------------------------------------------- 1 | import { computed, ref, watch } from 'vue'; 2 | 3 | import { useServices } from './use-services'; 4 | 5 | export const useEditorContentHeight = () => { 6 | const { uiService } = useServices(); 7 | const frameworkHeight = computed(() => uiService.get('frameworkRect').height); 8 | const navMenuHeight = computed(() => uiService.get('navMenuRect').height); 9 | const editorContentHeight = computed(() => frameworkHeight.value - navMenuHeight.value); 10 | 11 | const height = ref(0); 12 | watch( 13 | editorContentHeight, 14 | () => { 15 | if (height.value > 0 && height.value === editorContentHeight.value) return; 16 | height.value = editorContentHeight.value; 17 | }, 18 | { 19 | immediate: true, 20 | }, 21 | ); 22 | 23 | return { 24 | height, 25 | }; 26 | }; 27 | -------------------------------------------------------------------------------- /packages/editor/src/hooks/use-getso.ts: -------------------------------------------------------------------------------- 1 | import { onBeforeUnmount, onMounted, ref, type ShallowRef } from 'vue'; 2 | import Gesto, { type OnDrag } from 'gesto'; 3 | 4 | export const useGetSo = (target: ShallowRef, emit: (evt: 'change', e: OnDrag) => void) => { 5 | let getso: Gesto; 6 | const isDragging = ref(false); 7 | 8 | onMounted(() => { 9 | if (!target.value) return; 10 | getso = new Gesto(target.value, { 11 | container: window, 12 | pinchOutside: true, 13 | }) 14 | .on('drag', (e) => { 15 | if (!target.value) return; 16 | 17 | emit('change', e); 18 | }) 19 | .on('dragStart', () => { 20 | isDragging.value = true; 21 | }) 22 | .on('dragEnd', () => { 23 | isDragging.value = false; 24 | }); 25 | }); 26 | 27 | onBeforeUnmount(() => { 28 | getso?.unset(); 29 | isDragging.value = false; 30 | }); 31 | 32 | return { 33 | isDragging, 34 | }; 35 | }; 36 | -------------------------------------------------------------------------------- /packages/editor/src/hooks/use-next-float-box-position.ts: -------------------------------------------------------------------------------- 1 | import { type Ref, ref } from 'vue'; 2 | 3 | import type { Services } from '@editor/type'; 4 | 5 | export const useNextFloatBoxPosition = (uiService: Services['uiService'], parent?: Ref) => { 6 | const boxPosition = ref({ 7 | left: 0, 8 | top: 0, 9 | }); 10 | 11 | const calcBoxPosition = () => { 12 | const columnWidth = uiService.get('columnWidth'); 13 | const navMenuRect = uiService.get('navMenuRect'); 14 | let left = columnWidth.left ?? 0; 15 | if (parent?.value) { 16 | const rect = parent.value.getBoundingClientRect(); 17 | left = rect.left + rect.width; 18 | } 19 | boxPosition.value = { 20 | left, 21 | top: navMenuRect.top + navMenuRect.height, 22 | }; 23 | }; 24 | 25 | return { 26 | boxPosition, 27 | calcBoxPosition, 28 | }; 29 | }; 30 | -------------------------------------------------------------------------------- /packages/editor/src/hooks/use-services.ts: -------------------------------------------------------------------------------- 1 | import { inject } from 'vue'; 2 | 3 | import type { Services } from '@editor/type'; 4 | 5 | export const useServices = () => { 6 | const services = inject('services'); 7 | 8 | if (!services) { 9 | throw new Error('services is required'); 10 | } 11 | 12 | return services; 13 | }; 14 | -------------------------------------------------------------------------------- /packages/editor/src/hooks/use-window-rect.ts: -------------------------------------------------------------------------------- 1 | import { onBeforeUnmount, reactive } from 'vue'; 2 | 3 | export const useWindowRect = () => { 4 | const rect = reactive({ width: globalThis.innerWidth, height: globalThis.innerHeight }); 5 | 6 | const windowResizeHandler = () => { 7 | rect.width = globalThis.innerWidth; 8 | rect.height = globalThis.innerHeight; 9 | }; 10 | 11 | globalThis.addEventListener('resize', windowResizeHandler); 12 | 13 | onBeforeUnmount(() => { 14 | globalThis.removeEventListener('resize', windowResizeHandler); 15 | }); 16 | 17 | return { 18 | rect, 19 | }; 20 | }; 21 | -------------------------------------------------------------------------------- /packages/editor/src/icons/AppManageIcon.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 16 | -------------------------------------------------------------------------------- /packages/editor/src/icons/CenterIcon.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /packages/editor/src/icons/FolderMinusIcon.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 23 | -------------------------------------------------------------------------------- /packages/editor/src/icons/PinIcon.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 26 | -------------------------------------------------------------------------------- /packages/editor/src/icons/PinnedIcon.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 26 | -------------------------------------------------------------------------------- /packages/editor/src/layouts/sidebar/layer/LayerNodeTool.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 29 | -------------------------------------------------------------------------------- /packages/editor/src/theme/breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .m-editor-breadcrumb { 2 | position: absolute; 3 | left: 5px; 4 | top: 5px; 5 | z-index: 10; 6 | } 7 | -------------------------------------------------------------------------------- /packages/editor/src/theme/code-block.scss: -------------------------------------------------------------------------------- 1 | .m-fields-code-select { 2 | width: 100%; 3 | .el-card__header { 4 | display: none; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/editor/src/theme/code-editor.scss: -------------------------------------------------------------------------------- 1 | .m-container-vs-code { 2 | .el-form-item { 3 | margin-bottom: 0; 4 | } 5 | } 6 | 7 | .magic-code-editor { 8 | width: 100%; 9 | } 10 | 11 | .magic-code-editor-wrapper { 12 | width: 100%; 13 | height: 100%; 14 | position: relative; 15 | 16 | &.full-screen { 17 | position: fixed; 18 | z-index: 10000; 19 | top: 0; 20 | left: 0; 21 | } 22 | 23 | .magic-code-editor-content { 24 | width: 100%; 25 | height: 100%; 26 | 27 | .margin { 28 | margin: 0; 29 | } 30 | } 31 | 32 | .magic-code-editor-full-screen-icon { 33 | position: absolute; 34 | top: 5px; 35 | right: 0; 36 | z-index: 11; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /packages/editor/src/theme/common/var.scss: -------------------------------------------------------------------------------- 1 | $theme-color: #2882e0; 2 | 3 | $font-color: #313a40; 4 | $border-color: #d9dbdd; 5 | $hover-color: #f3f5f9; 6 | 7 | $nav-height: 35px; 8 | $nav-color: #313a40; 9 | $nav--background-color: #ffffff; 10 | 11 | $sidebar-heder-background-color: $theme-color; 12 | $sidebar-content-background-color: #ffffff; 13 | $sidebar-heder-width: 40px; 14 | 15 | $page-bar-height: 32px; 16 | 17 | $props-style-panel-width: 300px; 18 | -------------------------------------------------------------------------------- /packages/editor/src/theme/data-source-field-select.scss: -------------------------------------------------------------------------------- 1 | .m-fields-data-source-field-select { 2 | width: 100%; 3 | .m-editor-data-source-field-select { 4 | display: flex; 5 | width: 100%; 6 | 7 | .tmagic-design-select { 8 | flex: 1; 9 | margin-right: 10px; 10 | } 11 | 12 | .tmagic-design-cascader { 13 | flex: 2; 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/editor/src/theme/data-source-field.scss: -------------------------------------------------------------------------------- 1 | .m-fields-data-source-select, 2 | .m-fields-data-source-field-select, 3 | .m-fields-data-source-method-select .data-source-method-select-container, 4 | .m-fields-code-select-col .code-select-container { 5 | width: 100%; 6 | display: flex; 7 | align-items: center; 8 | 9 | .m-fields-select-action-button { 10 | margin-left: 5px; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/editor/src/theme/data-source-fields.scss: -------------------------------------------------------------------------------- 1 | .m-editor-data-source-fields { 2 | width: 100%; 3 | 4 | .tmagic-design-table { 5 | width: 100%; 6 | } 7 | 8 | .m-editor-data-source-fields-footer { 9 | display: flex; 10 | justify-content: flex-end; 11 | margin-top: 15px; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/editor/src/theme/data-source-input.scss: -------------------------------------------------------------------------------- 1 | .tmagic-data-source-input-text { 2 | .el-input__wrapper.tmagic-data-source-input-text-wrapper { 3 | overflow: hidden; 4 | padding-right: 30px; 5 | } 6 | 7 | .el-input__inner { 8 | display: flex; 9 | align-items: center; 10 | overflow: hidden; 11 | white-space: nowrap; 12 | } 13 | 14 | .tmagic-data-source-input-icon { 15 | position: absolute; 16 | right: 7px; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/editor/src/theme/data-source-methods.scss: -------------------------------------------------------------------------------- 1 | .m-editor-data-source-methods { 2 | width: 100%; 3 | 4 | .tmagic-design-table { 5 | width: 100%; 6 | } 7 | 8 | .m-editor-data-source-methods-footer { 9 | display: flex; 10 | justify-content: flex-end; 11 | margin-top: 15px; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/editor/src/theme/data-source.scss: -------------------------------------------------------------------------------- 1 | @use "common/var" as *; 2 | 3 | .data-source-list-panel { 4 | .list-container { 5 | .list-item { 6 | .codeIcon { 7 | width: 22px; 8 | height: 22px; 9 | margin-right: 5px; 10 | } 11 | 12 | .compIcon { 13 | width: 22px; 14 | height: 22px; 15 | margin-right: 5px; 16 | } 17 | } 18 | } 19 | } 20 | 21 | .data-source-list-panel-add-menu { 22 | padding: 4px 0; 23 | 24 | .menu-item { 25 | cursor: pointer; 26 | transition: all 0.2s ease 0s; 27 | padding: 5px 14px; 28 | 29 | &:hover { 30 | background-color: $hover-color; 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /packages/editor/src/theme/event.scss: -------------------------------------------------------------------------------- 1 | .m-fields-event-select { 2 | width: 100%; 3 | .fullWidth { 4 | width: 100%; 5 | } 6 | 7 | .event-select-code { 8 | margin-left: 20px; 9 | width: auto; 10 | } 11 | 12 | .m-form-panel { 13 | margin: 10px 0px; 14 | } 15 | 16 | .el-card.is-always-shadow { 17 | box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12); 18 | } 19 | } 20 | .m-fields-code-select-col, 21 | .m-fields-data-source-method-select { 22 | width: 100%; 23 | } 24 | 25 | .code-select-container, 26 | .data-source-method-select-container { 27 | display: flex; 28 | align-items: center; 29 | .select { 30 | flex: 10 0 100px; 31 | } 32 | .icon { 33 | flex: 1 0 20px; 34 | cursor: pointer; 35 | margin-right: 5px; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /packages/editor/src/theme/floating-box.scss: -------------------------------------------------------------------------------- 1 | @use "common/var" as *; 2 | 3 | .m-editor-float-box { 4 | position: absolute; 5 | background-color: #fff; 6 | z-index: 100; 7 | border: 1px solid $border-color; 8 | display: flex; 9 | flex-direction: column; 10 | max-height: 100%; 11 | max-width: 100%; 12 | 13 | .m-editor-float-box-title { 14 | text-align: center; 15 | font-size: 14px; 16 | font-weight: 600; 17 | padding: 5px; 18 | cursor: move; 19 | display: flex; 20 | justify-content: space-between; 21 | align-items: center; 22 | border-bottom: 1px solid $border-color; 23 | } 24 | 25 | .m-editor-float-box-body { 26 | overflow: auto; 27 | flex: 1; 28 | padding: 0 16px; 29 | } 30 | } 31 | 32 | .m-editor-floating-box-moveable { 33 | opacity: 0; 34 | } 35 | -------------------------------------------------------------------------------- /packages/editor/src/theme/icon.scss: -------------------------------------------------------------------------------- 1 | .tmagic-design-icon { 2 | --color: inherit; 3 | height: 1em; 4 | width: 1em; 5 | position: relative; 6 | fill: currentColor; 7 | 8 | img { 9 | max-width: 100%; 10 | max-height: 100%; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/editor/src/theme/index.scss: -------------------------------------------------------------------------------- 1 | @use "@tmagic/design/src/theme/index.scss" as tMagicDesign; 2 | @use "@tmagic/table/src/theme/index.scss" as tMagicTable; 3 | @use "@tmagic/form/src/theme/index.scss" as tMagicForm; 4 | @use "./theme.scss"; 5 | 6 | .fade-enter-active, 7 | .fade-leave-active { 8 | transition: opacity 0.5s; 9 | } 10 | .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { 11 | opacity: 0; 12 | } 13 | -------------------------------------------------------------------------------- /packages/editor/src/theme/key-value.scss: -------------------------------------------------------------------------------- 1 | .m-fields-key-value { 2 | display: flex; 3 | justify-items: center; 4 | align-items: top; 5 | width: 100%; 6 | } 7 | 8 | .m-fields-key-value-item { 9 | display: flex; 10 | margin-bottom: 10px; 11 | align-items: center; 12 | } 13 | 14 | .m-fields-key-value-delimiter { 15 | margin: 0 10px; 16 | } 17 | 18 | .m-fields-key-value-delete { 19 | margin-left: 10px; 20 | } 21 | -------------------------------------------------------------------------------- /packages/editor/src/theme/layer-panel.scss: -------------------------------------------------------------------------------- 1 | @use "common/var" as *; 2 | 3 | .m-editor-layer-panel { 4 | background: $sidebar-content-background-color; 5 | 6 | .m-editor-tree { 7 | padding-top: 48px; 8 | } 9 | 10 | .search-wrapper { 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | position: absolute; 15 | top: 0; 16 | width: 100%; 17 | z-index: 1; 18 | 19 | .search-input { 20 | flex: 1; 21 | position: relative; 22 | } 23 | 24 | .tmagic-design-button { 25 | margin-right: 10px; 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/editor/src/theme/layout.scss: -------------------------------------------------------------------------------- 1 | .m-editor-layout { 2 | width: 100%; 3 | display: flex; 4 | justify-self: space-between; 5 | 6 | &:has(.m-editor-resizer-dragging) { 7 | overflow: hidden; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/editor/src/theme/page-fragment-select.scss: -------------------------------------------------------------------------------- 1 | .m-fields-page-fragment-select { 2 | width: 100%; 3 | .page-fragment-select-container { 4 | width: 100%; 5 | display: flex; 6 | align-items: center; 7 | .select { 8 | flex: 1; 9 | } 10 | .icon { 11 | margin-left: 10px; 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/editor/src/theme/ruler.scss: -------------------------------------------------------------------------------- 1 | #ruler-container { 2 | width: calc(100% + 40px); 3 | position: absolute; 4 | top: -40px; 5 | left: -40px; 6 | height: 40px; 7 | z-index: 100000; 8 | 9 | .moveable-line { 10 | display: none; 11 | } 12 | 13 | .moveable-control.moveable-origin { 14 | display: none; 15 | } 16 | } 17 | 18 | #ruler-container::after { 19 | content: ""; 20 | position: absolute; 21 | left: 100%; 22 | top: 0; 23 | width: calc(2000px - 100%); 24 | height: 100%; 25 | background-color: white; 26 | } 27 | 28 | #horizontal { 29 | width: 2000px; 30 | max-width: fit-content; 31 | } 32 | 33 | #vertical { 34 | position: absolute; 35 | height: 1000px; 36 | top: 0; 37 | left: 0; 38 | } 39 | -------------------------------------------------------------------------------- /packages/editor/src/theme/search-input.scss: -------------------------------------------------------------------------------- 1 | .tmagic-design-input.search-input { 2 | background: #fff; 3 | color: #bbbbbb; 4 | padding: 10px; 5 | position: absolute; 6 | top: 0; 7 | left: 0; 8 | box-sizing: border-box; 9 | z-index: 1; 10 | background: transparent; 11 | 12 | .el-input__prefix { 13 | padding: 7px; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/editor/src/theme/style-setter/index.scss: -------------------------------------------------------------------------------- 1 | @use "./border.scss"; 2 | @use "./layout.scss"; 3 | @use "./background.scss"; 4 | 5 | .m-fields-style-setter { 6 | width: 100%; 7 | 8 | .tmagic-design-collapse-item { 9 | > .el-collapse-item__header { 10 | background-color: #f2f3f7; 11 | height: 36px; 12 | padding: 10px; 13 | } 14 | 15 | .el-collapse-item__wrap { 16 | padding: 0 10px; 17 | } 18 | } 19 | } 20 | 21 | .text-align-list { 22 | display: flex; 23 | height: 100%; 24 | 25 | .btn-active { 26 | color: var(--el-color-primary) !important; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/editor/src/theme/theme.scss: -------------------------------------------------------------------------------- 1 | @use "./search-input.scss"; 2 | @use "./nav-menu.scss"; 3 | @use "./framework.scss"; 4 | @use "./sidebar.scss"; 5 | @use "./layer-panel.scss"; 6 | @use "./component-list-panel.scss"; 7 | @use "./resizer.scss"; 8 | @use "./workspace.scss"; 9 | @use "./page-bar.scss"; 10 | @use "./props-panel.scss"; 11 | @use "./content-menu.scss"; 12 | @use "./stage.scss"; 13 | @use "./code-editor.scss"; 14 | @use "./icon.scss"; 15 | @use "./code-block.scss"; 16 | @use "./event.scss"; 17 | @use "./layout.scss"; 18 | @use "./breadcrumb.scss"; 19 | @use "./data-source.scss"; 20 | @use "./data-source-fields.scss"; 21 | @use "./data-source-methods.scss"; 22 | @use "./data-source-input.scss"; 23 | @use "./key-value.scss"; 24 | @use "./tree.scss"; 25 | @use "./floating-box.scss"; 26 | @use "./page-fragment-select.scss"; 27 | @use "./data-source-field.scss"; 28 | @use "./data-source-field-select.scss"; 29 | @use "./style-setter/index.scss"; 30 | -------------------------------------------------------------------------------- /packages/editor/src/theme/workspace.scss: -------------------------------------------------------------------------------- 1 | .m-editor-workspace { 2 | height: 100%; 3 | width: 100%; 4 | user-select: none; 5 | 6 | &:focus-visible { 7 | outline: 0; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/editor/src/utils/const.ts: -------------------------------------------------------------------------------- 1 | /** 当uiService.get('uiSelectMode')为true,点击组件（包括任何形式，组件树/画布）时触发的事件名 */ 2 | export const UI_SELECT_MODE_EVENT_NAME = 'ui-select'; 3 | 4 | export const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData'; 5 | export const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData'; 6 | export const PROPS_PANEL_WIDTH_STORAGE_KEY = '$MagicEditorPropsPanelWidthData'; 7 | 8 | export const DEFAULT_LEFT_COLUMN_WIDTH = 310; 9 | export const DEFAULT_RIGHT_COLUMN_WIDTH = 480; 10 | 11 | export const MIN_LEFT_COLUMN_WIDTH = 200; 12 | export const MIN_CENTER_COLUMN_WIDTH = 400; 13 | export const MIN_RIGHT_COLUMN_WIDTH = 300; 14 | 15 | export const H_GUIDE_LINE_STORAGE_KEY = '$MagicStageHorizontalGuidelinesData'; 16 | export const V_GUIDE_LINE_STORAGE_KEY = '$MagicStageVerticalGuidelinesData'; 17 | -------------------------------------------------------------------------------- /packages/editor/src/utils/data-source/formConfigs/base.ts: -------------------------------------------------------------------------------- 1 | import { defineFormConfig } from '@tmagic/form'; 2 | 3 | export default () => 4 | defineFormConfig([ 5 | { 6 | name: 'id', 7 | type: 'hidden', 8 | }, 9 | { 10 | name: 'type', 11 | text: '类型', 12 | type: 'hidden', 13 | defaultValue: 'base', 14 | }, 15 | { 16 | name: 'title', 17 | text: '名称', 18 | rules: [ 19 | { 20 | required: true, 21 | message: '请输入名称', 22 | }, 23 | ], 24 | }, 25 | { 26 | name: 'description', 27 | text: '描述', 28 | }, 29 | ]); 30 | -------------------------------------------------------------------------------- /packages/editor/src/utils/monaco-editor.ts: -------------------------------------------------------------------------------- 1 | import { emmetCSS, emmetHTML } from 'emmet-monaco-es'; 2 | import * as monaco from 'monaco-editor'; 3 | 4 | // 注册emmet插件 5 | emmetHTML(monaco); 6 | emmetCSS(monaco, ['css', 'scss']); 7 | 8 | export default monaco; 9 | -------------------------------------------------------------------------------- /packages/editor/src/utils/tree.ts: -------------------------------------------------------------------------------- 1 | import type { Id } from '@tmagic/core'; 2 | import { getKeys } from '@tmagic/utils'; 3 | 4 | import type { LayerNodeStatus } from '@editor/type'; 5 | 6 | export const updateStatus = (nodeStatusMap: Map, id: Id, status: Partial) => { 7 | const nodeStatus = nodeStatusMap.get(id); 8 | 9 | if (!nodeStatus) return; 10 | getKeys(status).forEach((key) => { 11 | if (nodeStatus[key] !== undefined && status[key] !== undefined) { 12 | nodeStatus[key] = Boolean(status[key]); 13 | } 14 | }); 15 | }; 16 | -------------------------------------------------------------------------------- /packages/form-schema/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.5.20", 3 | "name": "@tmagic/form-schema", 4 | "type": "module", 5 | "main": "dist/tmagic-form-schema.umd.cjs", 6 | "module": "dist/tmagic-form-schema.js", 7 | "types": "types/index.d.ts", 8 | "exports": { 9 | ".": { 10 | "types": "./types/index.d.ts", 11 | "import": "./dist/tmagic-form-schema.js", 12 | "require": "./dist/tmagic-form-schema.umd.cjs" 13 | }, 14 | "./*": "./*" 15 | }, 16 | "files": [ 17 | "dist", 18 | "types", 19 | "src" 20 | ], 21 | "engines": { 22 | "node": ">=18" 23 | }, 24 | "license": "Apache-2.0", 25 | "repository": { 26 | "directory": "packages/form-schema", 27 | "type": "git", 28 | "url": "https://github.com/Tencent/tmagic-editor.git" 29 | }, 30 | "dependencies": { 31 | "@tmagic/schema": "workspace:*" 32 | }, 33 | "peerDependencies": { 34 | "typescript": "*" 35 | }, 36 | "peerDependenciesMeta": { 37 | "typescript": { 38 | "optional": true 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /packages/form-schema/src/index.ts: -------------------------------------------------------------------------------- 1 | import type { FormConfig } from './base'; 2 | 3 | export * from './base'; 4 | export * from './editor'; 5 | 6 | export const defineFormConfig = (config: T): T => config; 7 | -------------------------------------------------------------------------------- /packages/form/README.md: -------------------------------------------------------------------------------- 1 | # [文档](https://tencent.github.io/tmagic-editor/docs/) -------------------------------------------------------------------------------- /packages/form/src/fields/ColorPicker.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 31 | -------------------------------------------------------------------------------- /packages/form/src/fields/Display.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 21 | -------------------------------------------------------------------------------- /packages/form/src/fields/Hidden.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 17 | -------------------------------------------------------------------------------- /packages/form/src/fields/Time.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 35 | -------------------------------------------------------------------------------- /packages/form/src/schema.ts: -------------------------------------------------------------------------------- 1 | export * from '@tmagic/form-schema'; 2 | 3 | export interface ValidateError { 4 | message: string; 5 | field: string; 6 | } 7 | 8 | export interface ChangeRecord { 9 | propPath?: string; 10 | value: any; 11 | } 12 | 13 | export interface ContainerChangeEventData { 14 | modifyKey?: string; 15 | changeRecords?: ChangeRecord[]; 16 | } 17 | -------------------------------------------------------------------------------- /packages/form/src/theme/container.scss: -------------------------------------------------------------------------------- 1 | .tmagic-design-form-inline { 2 | .m-form-container { 3 | display: inline-flex; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /packages/form/src/theme/date-time.scss: -------------------------------------------------------------------------------- 1 | .magic-datetime-picker-popper { 2 | .el-picker-panel__footer { 3 | button:first-child { 4 | display: none; 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/form/src/theme/fieldset.scss: -------------------------------------------------------------------------------- 1 | fieldset.m-fieldset { 2 | position: relative; 3 | border: 1px solid rgb(229, 229, 229); 4 | margin-top: 10px; 5 | margin-bottom: 10px; 6 | min-inline-size: auto; 7 | 8 | .el-checkbox { 9 | height: 22px; 10 | } 11 | 12 | legend { 13 | font-size: 14px; 14 | position: absolute; 15 | border: 0; 16 | top: -10px; 17 | left: 20px; 18 | background: rgb(255, 255, 255); 19 | width: auto; 20 | padding: 0px 3px; 21 | font-weight: bold; 22 | line-height: 20px; 23 | } 24 | 25 | .m-form-tip { 26 | margin-left: 5px; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/form/src/theme/form-box.scss: -------------------------------------------------------------------------------- 1 | .m-form-box { 2 | display: flex; 3 | flex-direction: column; 4 | .el-box__header { 5 | margin: 0; 6 | } 7 | 8 | .dialog-footer { 9 | display: flex; 10 | align-items: center; 11 | justify-content: space-between; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/form/src/theme/form-dialog.scss: -------------------------------------------------------------------------------- 1 | .m-form-dialog { 2 | .el-dialog__body { 3 | padding: 0 !important; 4 | } 5 | 6 | .m-dialog-body { 7 | padding: 0 20px; 8 | } 9 | 10 | .el-table .m-form-item .el-form-item { 11 | margin-bottom: 0; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/form/src/theme/form-drawer.scss: -------------------------------------------------------------------------------- 1 | .m-form-drawer { 2 | .el-drawer__header { 3 | margin: 0; 4 | } 5 | 6 | .m-drawer-body { 7 | height: 100%; 8 | overflow-y: auto; 9 | overflow-x: hidden; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/form/src/theme/form.scss: -------------------------------------------------------------------------------- 1 | .fade-enter-active, 2 | .fade-leave-active { 3 | transition: opacity 0.5s; 4 | } 5 | 6 | .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { 7 | opacity: 0; 8 | } 9 | 10 | .m-form { 11 | .m-form-tip { 12 | color: rgba(0, 0, 0, 0.45); 13 | font-size: 12px; 14 | transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); 15 | } 16 | 17 | .m-form-schematic { 18 | max-width: 50%; 19 | height: 100%; 20 | } 21 | 22 | .el-table { 23 | .cell > div.m-form-container { 24 | display: block; 25 | } 26 | } 27 | 28 | .el-tabs { 29 | margin-bottom: 10px; 30 | } 31 | 32 | .el-form-item.tmagic-form-hidden { 33 | > .el-form-item__label { 34 | display: none; 35 | } 36 | } 37 | 38 | .t-form__item.tmagic-form-hidden { 39 | > .t-form__label { 40 | display: none; 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /packages/form/src/theme/group-list.scss: -------------------------------------------------------------------------------- 1 | .m-fields-group-list { 2 | .el-button--text { 3 | padding: 0; 4 | margin-bottom: 7px; 5 | } 6 | 7 | .el-tree-node__expand-icon { 8 | padding: 0; 9 | margin-bottom: 7px; 10 | &.expand { 11 | transform: rotate(90deg); 12 | } 13 | } 14 | 15 | .m-fields-group-list-item { 16 | border-bottom: 1px solid #ebeef5; 17 | margin-bottom: 7px; 18 | 19 | &:last-of-type { 20 | border-bottom: 0; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/form/src/theme/index.scss: -------------------------------------------------------------------------------- 1 | @use "./container.scss"; 2 | @use "./form-dialog.scss"; 3 | @use "./form-drawer.scss"; 4 | @use "./form.scss"; 5 | @use "./date-time.scss"; 6 | @use "./text.scss"; 7 | @use "./link.scss"; 8 | @use "./fieldset.scss"; 9 | @use "./group-list.scss"; 10 | @use "./panel.scss"; 11 | @use "./table.scss"; 12 | @use "./select.scss"; 13 | @use "./tabs.scss"; 14 | @use "./number-range.scss"; 15 | @use "./form-box.scss"; 16 | -------------------------------------------------------------------------------- /packages/form/src/theme/link.scss: -------------------------------------------------------------------------------- 1 | div.m-fields-link { 2 | width: fit-content; 3 | } 4 | -------------------------------------------------------------------------------- /packages/form/src/theme/number-range.scss: -------------------------------------------------------------------------------- 1 | .m-fields-number-range { 2 | display: flex; 3 | align-items: center; 4 | 5 | .split-tag { 6 | margin: 0 5px; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/form/src/theme/panel.scss: -------------------------------------------------------------------------------- 1 | .m-form-panel { 2 | .el-card__header { 3 | &:hover { 4 | background: #f2f6fc; 5 | } 6 | a { 7 | color: #409eff; 8 | } 9 | } 10 | 11 | .el-card__body { 12 | padding: 10px; 13 | } 14 | 15 | .m-form-tip { 16 | margin-left: 5px; 17 | } 18 | } 19 | 20 | .m-container-panel { 21 | &:not(:last-of-type) { 22 | margin-bottom: 20px; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/form/src/theme/select.scss: -------------------------------------------------------------------------------- 1 | .m-select { 2 | width: 100%; 3 | } 4 | -------------------------------------------------------------------------------- /packages/form/src/theme/tabs.scss: -------------------------------------------------------------------------------- 1 | .magic-form-dynamic-tab { 2 | .el-tabs__header.is-top { 3 | padding-right: 8px; 4 | .el-tabs__new-tab { 5 | margin-right: auto; 6 | min-width: 50px; 7 | outline: none; 8 | border-color: #409eff; 9 | color: #409eff; 10 | width: 10px; 11 | &::before { 12 | content: "添加"; 13 | } 14 | .el-icon-plus { 15 | display: none; 16 | } 17 | } 18 | } 19 | } 20 | 21 | .magic-form-tab { 22 | margin-bottom: 10px; 23 | } 24 | 25 | .diff-count-badge { 26 | top: -10px; 27 | } 28 | -------------------------------------------------------------------------------- /packages/form/src/utils/config.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | let $MAGIC_FORM = {} as any; 20 | 21 | const setConfig = (option: any): void => { 22 | $MAGIC_FORM = option; 23 | }; 24 | 25 | const getConfig = (key: string): T => $MAGIC_FORM[key]; 26 | 27 | export { getConfig, setConfig }; 28 | -------------------------------------------------------------------------------- /packages/schema/README.md: -------------------------------------------------------------------------------- 1 | # [文档](https://tencent.github.io/tmagic-editor/docs/) -------------------------------------------------------------------------------- /packages/schema/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.5.20", 3 | "name": "@tmagic/schema", 4 | "type": "module", 5 | "main": "dist/tmagic-schema.umd.cjs", 6 | "module": "dist/tmagic-schema.js", 7 | "types": "types/index.d.ts", 8 | "exports": { 9 | ".": { 10 | "types": "./types/index.d.ts", 11 | "import": "./dist/tmagic-schema.js", 12 | "require": "./dist/tmagic-schema.umd.cjs" 13 | }, 14 | "./*": "./*" 15 | }, 16 | "files": [ 17 | "dist", 18 | "types", 19 | "src" 20 | ], 21 | "engines": { 22 | "node": ">=18" 23 | }, 24 | "license": "Apache-2.0", 25 | "repository": { 26 | "directory": "packages/schema", 27 | "type": "git", 28 | "url": "https://github.com/Tencent/tmagic-editor.git" 29 | }, 30 | "peerDependencies": { 31 | "typescript": "*" 32 | }, 33 | "peerDependenciesMeta": { 34 | "typescript": { 35 | "optional": true 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /packages/stage/src/style.css: -------------------------------------------------------------------------------- 1 | .tmagic-stage-container-highlight::after { 2 | content: ''; 3 | position: absolute; 4 | width: 100%; 5 | height: 100%; 6 | top: 0; 7 | left: 0; 8 | background-color: #000; 9 | opacity: .1; 10 | pointer-events: none; 11 | } 12 | 13 | .magic-ui-container.magic-layout-relative { 14 | min-height: 50px; 15 | } 16 | -------------------------------------------------------------------------------- /packages/table/README.md: -------------------------------------------------------------------------------- 1 | # [文档](https://tencent.github.io/tmagic-editor/docs/) -------------------------------------------------------------------------------- /packages/table/src/theme/index.scss: -------------------------------------------------------------------------------- 1 | .m-table { 2 | .el-button.action-btn + .el-button.action-btn { 3 | margin-left: 0; 4 | } 5 | .keep-all { 6 | word-break: keep-all; 7 | } 8 | .el-table .cell > div { 9 | display: inline-block; 10 | vertical-align: middle; 11 | } 12 | .el-table__row.el-table__row--level-1 { 13 | color: #999; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/tdesign-vue-next-adapter/src/Icon.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/tdesign-vue-next-adapter/src/Scrollbar.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /packages/tdesign-vue-next-adapter/src/TableColumn.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/tdesign-vue-next-adapter/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import { DefineComponent } from 'vue'; 3 | 4 | const component: DefineComponent<{}, {}, any>; 5 | export default component; 6 | } 7 | -------------------------------------------------------------------------------- /packages/utils/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.5.20", 3 | "name": "@tmagic/utils", 4 | "type": "module", 5 | "main": "dist/tmagic-utils.umd.cjs", 6 | "module": "dist/tmagic-utils.js", 7 | "types": "types/index.d.ts", 8 | "exports": { 9 | ".": { 10 | "types": "./types/index.d.ts", 11 | "import": "./dist/tmagic-utils.js", 12 | "require": "./dist/tmagic-utils.umd.cjs" 13 | } 14 | }, 15 | "files": [ 16 | "dist", 17 | "types", 18 | "src" 19 | ], 20 | "license": "Apache-2.0", 21 | "engines": { 22 | "node": ">=18" 23 | }, 24 | "repository": { 25 | "directory": "packages/utils", 26 | "type": "git", 27 | "url": "https://github.com/Tencent/tmagic-editor.git" 28 | }, 29 | "dependencies": { 30 | "lodash-es": "^4.17.21" 31 | }, 32 | "devDependencies": { 33 | "@types/lodash-es": "^4.17.4" 34 | }, 35 | "peerDependencies": { 36 | "@tmagic/schema": "workspace:*", 37 | "typescript": "*" 38 | }, 39 | "peerDependenciesMeta": { 40 | "typescript": { 41 | "optional": true 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /playground/.env.react: -------------------------------------------------------------------------------- 1 | VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/react 2 | VITE_ENTRY_PATH=./entry/react -------------------------------------------------------------------------------- /playground/.env.vue2: -------------------------------------------------------------------------------- 1 | VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/vue2 2 | VITE_ENTRY_PATH=./entry/vue2 -------------------------------------------------------------------------------- /playground/.env.vue3: -------------------------------------------------------------------------------- 1 | VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/vue3 2 | VITE_ENTRY_PATH=./entry/vue3 -------------------------------------------------------------------------------- /playground/.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | public/entry 3 | public/runtime -------------------------------------------------------------------------------- /playground/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Magic Editor Playground 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /playground/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmagic-editor/92534fc9159b408f93e194ce119b45ff5cd5f95f/playground/public/favicon.png -------------------------------------------------------------------------------- /playground/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import { DefineComponent } from 'vue'; 3 | 4 | const component: DefineComponent<{}, {}, any>; 5 | export default component; 6 | } 7 | -------------------------------------------------------------------------------- /playground/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 21 | -------------------------------------------------------------------------------- /playground/src/components/NavMenu.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 32 | 33 | 39 | -------------------------------------------------------------------------------- /playground/src/const.ts: -------------------------------------------------------------------------------- 1 | export enum DeviceType { 2 | Phone = 'phone', 3 | Pad = 'pad', 4 | PC = 'pc', 5 | } 6 | 7 | export const uaMap = { 8 | [DeviceType.Phone]: 9 | 'Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1', 10 | [DeviceType.Pad]: 11 | 'Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1', 12 | [DeviceType.PC]: 13 | 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36', 14 | }; 15 | -------------------------------------------------------------------------------- /playground/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import { DefineComponent } from 'vue'; 3 | 4 | const component: DefineComponent<{}, {}, any>; 5 | export default component; 6 | } 7 | -------------------------------------------------------------------------------- /playground/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /playground/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "baseUrl": "..", 5 | }, 6 | "exclude": [ 7 | "**/dist/**/*" 8 | ], 9 | } 10 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'packages/*' 3 | - 'playground' 4 | - 'runtime/*' 5 | - 'vue-components/*' 6 | - 'react-components/*' 7 | - 'eslint-config' 8 | -------------------------------------------------------------------------------- /react-components/button/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.0", 3 | "name": "@tmagic/react-button", 4 | "type": "module", 5 | "main": "src/index.ts", 6 | "files": [ 7 | "src" 8 | ], 9 | "engines": { 10 | "node": ">=18" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/Tencent/tmagic-editor.git" 15 | }, 16 | "dependencies": { 17 | "@tmagic/form-schema": "workspace:^" 18 | }, 19 | "peerDependencies": { 20 | "@tmagic/core": "workspace:^", 21 | "@tmagic/react-runtime-help": "workspace:^", 22 | "react": ">=18.3.1", 23 | "react-dom": ">=18.3.1", 24 | "typescript": "*" 25 | }, 26 | "peerDependenciesMeta": { 27 | "typescript": { 28 | "optional": true 29 | } 30 | }, 31 | "devDependencies": { 32 | "@types/react": "^18.3.3", 33 | "@types/react-dom": "^18.3.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /react-components/button/src/event.ts: -------------------------------------------------------------------------------- 1 | import { COMMON_EVENT_PREFIX } from '@tmagic/core'; 2 | 3 | export default { 4 | methods: [], 5 | events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }], 6 | }; 7 | -------------------------------------------------------------------------------- /react-components/button/src/formConfig.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | import { defineFormConfig } from '@tmagic/form-schema'; 20 | 21 | export default defineFormConfig([ 22 | { 23 | text: '文本', 24 | name: 'text', 25 | type: 'data-source-input', 26 | }, 27 | ]); 28 | -------------------------------------------------------------------------------- /react-components/button/src/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | import Button from './Button'; 20 | 21 | export { default as config } from './formConfig'; 22 | export { default as value } from './initValue'; 23 | export { default as event } from './event'; 24 | 25 | export default Button; 26 | -------------------------------------------------------------------------------- /react-components/button/src/initValue.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | export default { 20 | text: '请输入文本内容', 21 | multiple: true, 22 | style: { 23 | width: '270', 24 | height: '37.5', 25 | border: 0, 26 | backgroundColor: '#fb6f00', 27 | }, 28 | }; 29 | -------------------------------------------------------------------------------- /react-components/container/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.0", 3 | "name": "@tmagic/react-container", 4 | "type": "module", 5 | "main": "src/index.ts", 6 | "files": [ 7 | "src" 8 | ], 9 | "engines": { 10 | "node": ">=18" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/Tencent/tmagic-editor.git" 15 | }, 16 | "dependencies": { 17 | "@tmagic/form-schema": "workspace:^" 18 | }, 19 | "peerDependencies": { 20 | "@tmagic/core": "workspace:^", 21 | "@tmagic/react-runtime-help": "workspace:^", 22 | "react": ">=18.3.1", 23 | "react-dom": ">=18.3.1", 24 | "typescript": "*" 25 | }, 26 | "peerDependenciesMeta": { 27 | "typescript": { 28 | "optional": true 29 | } 30 | }, 31 | "devDependencies": { 32 | "@types/react": "^18.3.3", 33 | "@types/react-dom": "^18.3.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /react-components/container/src/event.ts: -------------------------------------------------------------------------------- 1 | import { COMMON_EVENT_PREFIX } from '@tmagic/core'; 2 | 3 | export default { 4 | methods: [], 5 | events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }], 6 | }; 7 | -------------------------------------------------------------------------------- /react-components/container/src/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | import Container from './Container'; 20 | 21 | export { default as config } from './formConfig'; 22 | export { default as value } from './initValue'; 23 | export { default as event } from './event'; 24 | 25 | export default Container; 26 | -------------------------------------------------------------------------------- /react-components/container/src/initValue.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | export default { 20 | items: [], 21 | style: { 22 | width: '375', 23 | height: '100', 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /react-components/img/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.0", 3 | "name": "@tmagic/react-img", 4 | "type": "module", 5 | "main": "src/index.ts", 6 | "files": [ 7 | "src" 8 | ], 9 | "engines": { 10 | "node": ">=18" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/Tencent/tmagic-editor.git" 15 | }, 16 | "dependencies": { 17 | "@tmagic/form-schema": "workspace:^" 18 | }, 19 | "peerDependencies": { 20 | "@tmagic/core": "workspace:^", 21 | "@tmagic/react-runtime-help": "workspace:^", 22 | "react": ">=18.3.1", 23 | "react-dom": ">=18.3.1", 24 | "typescript": "*" 25 | }, 26 | "peerDependenciesMeta": { 27 | "typescript": { 28 | "optional": true 29 | } 30 | }, 31 | "devDependencies": { 32 | "@types/react": "^18.3.3", 33 | "@types/react-dom": "^18.3.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /react-components/img/src/event.ts: -------------------------------------------------------------------------------- 1 | import { COMMON_EVENT_PREFIX } from '@tmagic/core'; 2 | 3 | export default { 4 | methods: [], 5 | events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }], 6 | }; 7 | -------------------------------------------------------------------------------- /react-components/img/src/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | import Img from './Img'; 20 | 21 | export { default as config } from './formConfig'; 22 | export { default as value } from './initValue'; 23 | export { default as event } from './event'; 24 | 25 | export default Img; 26 | -------------------------------------------------------------------------------- /react-components/img/src/initValue.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | export default { 20 | src: 'https://puui.qpic.cn/vupload/0/1573555382625_bhp0wud8l6w.png/0', 21 | url: '', 22 | style: { 23 | position: 'absolute', 24 | left: '57', 25 | width: '176', 26 | height: '176', 27 | }, 28 | }; 29 | -------------------------------------------------------------------------------- /react-components/iterator-container/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.0", 3 | "name": "@tmagic/react-iterator-container", 4 | "type": "module", 5 | "main": "src/index.ts", 6 | "files": [ 7 | "src" 8 | ], 9 | "engines": { 10 | "node": ">=18" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/Tencent/tmagic-editor.git" 15 | }, 16 | "dependencies": { 17 | "@tmagic/form-schema": "workspace:^" 18 | }, 19 | "peerDependencies": { 20 | "@tmagic/core": "workspace:^", 21 | "@tmagic/react-runtime-help": "workspace:^", 22 | "react": ">=18.3.1", 23 | "react-dom": ">=18.3.1", 24 | "typescript": "*" 25 | }, 26 | "peerDependenciesMeta": { 27 | "typescript": { 28 | "optional": true 29 | } 30 | }, 31 | "devDependencies": { 32 | "@types/react": "^18.3.3", 33 | "@types/react-dom": "^18.3.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /react-components/iterator-container/src/event.ts: -------------------------------------------------------------------------------- 1 | import { COMMON_EVENT_PREFIX } from '@tmagic/core'; 2 | 3 | export default { 4 | methods: [], 5 | events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }], 6 | }; 7 | -------------------------------------------------------------------------------- /react-components/iterator-container/src/initValue.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | export default { 20 | style: { 21 | width: '375', 22 | height: '100', 23 | }, 24 | itemConfig: { 25 | style: { 26 | width: '100%', 27 | height: '100%', 28 | }, 29 | }, 30 | items: [], 31 | }; 32 | -------------------------------------------------------------------------------- /react-components/overlay/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.0", 3 | "name": "@tmagic/react-overlay", 4 | "type": "module", 5 | "main": "src/index.ts", 6 | "files": [ 7 | "src" 8 | ], 9 | "engines": { 10 | "node": ">=18" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/Tencent/tmagic-editor.git" 15 | }, 16 | "dependencies": { 17 | "@tmagic/form-schema": "workspace:^" 18 | }, 19 | "peerDependencies": { 20 | "@tmagic/core": "workspace:^", 21 | "@tmagic/react-runtime-help": "workspace:^", 22 | "react": ">=18.3.1", 23 | "react-dom": ">=18.3.1", 24 | "typescript": "*" 25 | }, 26 | "peerDependenciesMeta": { 27 | "typescript": { 28 | "optional": true 29 | } 30 | }, 31 | "devDependencies": { 32 | "@types/react": "^18.3.3", 33 | "@types/react-dom": "^18.3.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /react-components/overlay/src/event.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: [ 3 | { 4 | label: '打开蒙层', 5 | value: 'openOverlay', 6 | }, 7 | { 8 | label: '关闭蒙层', 9 | value: 'closeOverlay', 10 | }, 11 | ], 12 | events: [ 13 | { 14 | label: '打开蒙层', 15 | value: 'overlay:open', 16 | }, 17 | { 18 | label: '关闭蒙层', 19 | value: 'overlay:close', 20 | }, 21 | ], 22 | }; 23 | -------------------------------------------------------------------------------- /react-components/overlay/src/formConfig.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | import { defineFormConfig } from '@tmagic/form-schema'; 20 | 21 | export default defineFormConfig([]); 22 | -------------------------------------------------------------------------------- /react-components/overlay/src/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | import overlay from './Overlay'; 20 | 21 | export { default as config } from './formConfig'; 22 | export { default as value } from './initValue'; 23 | export { default as event } from './event'; 24 | 25 | export default overlay; 26 | -------------------------------------------------------------------------------- /react-components/overlay/src/initValue.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | style: { 3 | position: 'fixed', 4 | width: '100%', 5 | height: '100%', 6 | top: 0, 7 | left: 0, 8 | backgroundColor: 'rgba(0, 0, 0, 0.8)', 9 | }, 10 | items: [], 11 | }; 12 | -------------------------------------------------------------------------------- /react-components/page-fragment-container/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.0", 3 | "name": "@tmagic/react-page-fragment-container", 4 | "type": "module", 5 | "main": "src/index.ts", 6 | "files": [ 7 | "src" 8 | ], 9 | "engines": { 10 | "node": ">=18" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/Tencent/tmagic-editor.git" 15 | }, 16 | "dependencies": { 17 | "@tmagic/form-schema": "workspace:^" 18 | }, 19 | "peerDependencies": { 20 | "@tmagic/core": "workspace:^", 21 | "@tmagic/react-runtime-help": "workspace:^", 22 | "react": ">=18.3.1", 23 | "react-dom": ">=18.3.1", 24 | "typescript": "*" 25 | }, 26 | "peerDependenciesMeta": { 27 | "typescript": { 28 | "optional": true 29 | } 30 | }, 31 | "devDependencies": { 32 | "@types/react": "^18.3.3", 33 | "@types/react-dom": "^18.3.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /react-components/page-fragment-container/src/event.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: [], 3 | events: [], 4 | }; 5 | -------------------------------------------------------------------------------- /react-components/page-fragment-container/src/formConfig.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | import { defineFormConfig } from '@tmagic/form-schema'; 20 | 21 | export default defineFormConfig([ 22 | { 23 | name: 'pageFragmentId', 24 | text: '页面片ID', 25 | type: 'page-fragment-select', 26 | }, 27 | ]); 28 | -------------------------------------------------------------------------------- /react-components/page-fragment-container/src/initValue.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | export default { 20 | style: { 21 | width: '', 22 | height: '', 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /react-components/page-fragment/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.0", 3 | "name": "@tmagic/react-page-fragment", 4 | "type": "module", 5 | "main": "src/index.ts", 6 | "files": [ 7 | "src" 8 | ], 9 | "engines": { 10 | "node": ">=18" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/Tencent/tmagic-editor.git" 15 | }, 16 | "dependencies": { 17 | "@tmagic/form-schema": "workspace:^" 18 | }, 19 | "peerDependencies": { 20 | "@tmagic/core": "workspace:^", 21 | "@tmagic/react-runtime-help": "workspace:^", 22 | "react": ">=18.3.1", 23 | "react-dom": ">=18.3.1", 24 | "typescript": "*" 25 | }, 26 | "peerDependenciesMeta": { 27 | "typescript": { 28 | "optional": true 29 | } 30 | }, 31 | "devDependencies": { 32 | "@types/react": "^18.3.3", 33 | "@types/react-dom": "^18.3.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /react-components/page-fragment/src/PageFragment.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { IS_DSL_NODE_KEY, type MPageFragment } from '@tmagic/core'; 4 | import { useApp } from '@tmagic/react-runtime-help'; 5 | 6 | interface PageFragmentProps { 7 | config: MPageFragment; 8 | } 9 | 10 | const PageFragment: React.FC = ({ config }) => { 11 | const { app } = useApp({ 12 | config, 13 | methods: {}, 14 | }); 15 | 16 | if (!app) return null; 17 | 18 | const MagicUiComp = app.resolveComponent('container'); 19 | const classNames = ['magic-ui-page-fragment']; 20 | if (config.className) { 21 | classNames.push(config.className); 22 | } 23 | 24 | return ( 25 | 30 | ); 31 | }; 32 | 33 | PageFragment.displayName = 'magic-ui-page-fragment'; 34 | 35 | export default PageFragment; 36 | -------------------------------------------------------------------------------- /react-components/page-fragment/src/event.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: [], 3 | events: [], 4 | }; 5 | -------------------------------------------------------------------------------- /react-components/page-fragment/src/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | import PageFragment from './PageFragment'; 20 | 21 | export { default as config } from './formConfig'; 22 | export { default as value } from './initValue'; 23 | export { default as event } from './event'; 24 | 25 | export default PageFragment; 26 | -------------------------------------------------------------------------------- /react-components/page-fragment/src/initValue.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | export default { 20 | items: [], 21 | style: { 22 | width: '375', 23 | height: '817', 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /react-components/page/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.0", 3 | "name": "@tmagic/react-page", 4 | "type": "module", 5 | "main": "src/index.ts", 6 | "files": [ 7 | "src" 8 | ], 9 | "engines": { 10 | "node": ">=18" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/Tencent/tmagic-editor.git" 15 | }, 16 | "dependencies": { 17 | "@tmagic/form-schema": "workspace:^" 18 | }, 19 | "peerDependencies": { 20 | "@tmagic/core": "workspace:^", 21 | "@tmagic/react-runtime-help": "workspace:^", 22 | "react": ">=18.3.1", 23 | "react-dom": ">=18.3.1", 24 | "typescript": "*" 25 | }, 26 | "peerDependenciesMeta": { 27 | "typescript": { 28 | "optional": true 29 | } 30 | }, 31 | "devDependencies": { 32 | "@types/react": "^18.3.3", 33 | "@types/react-dom": "^18.3.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /react-components/page/src/event.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: [ 3 | { 4 | label: '刷新页面', 5 | value: 'refresh', 6 | }, 7 | ], 8 | }; 9 | -------------------------------------------------------------------------------- /react-components/page/src/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | import Page from './Page'; 20 | 21 | export { default as config } from './formConfig'; 22 | export { default as value } from './initValue'; 23 | export { default as event } from './event'; 24 | 25 | export default Page; 26 | -------------------------------------------------------------------------------- /react-components/page/src/initValue.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | export default { 20 | items: [], 21 | style: { 22 | width: '100%', 23 | height: '100%', 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /react-components/qrcode/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.0", 3 | "name": "@tmagic/react-qrcode", 4 | "type": "module", 5 | "main": "src/index.ts", 6 | "files": [ 7 | "src" 8 | ], 9 | "engines": { 10 | "node": ">=18" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/Tencent/tmagic-editor.git" 15 | }, 16 | "dependencies": { 17 | "@tmagic/form-schema": "workspace:^", 18 | "qrcode": "^1.5.0" 19 | }, 20 | "peerDependencies": { 21 | "@tmagic/core": "workspace:^", 22 | "@tmagic/react-runtime-help": "workspace:^", 23 | "react": ">=18.3.1", 24 | "react-dom": ">=18.3.1", 25 | "typescript": "*" 26 | }, 27 | "peerDependenciesMeta": { 28 | "typescript": { 29 | "optional": true 30 | } 31 | }, 32 | "devDependencies": { 33 | "@types/qrcode": "^1.4.2", 34 | "@types/react": "^18.3.3", 35 | "@types/react-dom": "^18.3.0" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /react-components/qrcode/src/event.ts: -------------------------------------------------------------------------------- 1 | import { COMMON_EVENT_PREFIX } from '@tmagic/core'; 2 | 3 | export default { 4 | methods: [], 5 | events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }], 6 | }; 7 | -------------------------------------------------------------------------------- /react-components/qrcode/src/formConfig.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | import { defineFormConfig } from '@tmagic/form-schema'; 20 | 21 | export default defineFormConfig([ 22 | { 23 | text: '链接', 24 | name: 'url', 25 | type: 'data-source-input', 26 | }, 27 | ]); 28 | -------------------------------------------------------------------------------- /react-components/qrcode/src/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | import QrCode from './QrCode'; 20 | 21 | export { default as config } from './formConfig'; 22 | export { default as value } from './initValue'; 23 | export { default as event } from './event'; 24 | 25 | export default QrCode; 26 | -------------------------------------------------------------------------------- /react-components/qrcode/src/initValue.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | export default { 20 | url: 'https://m.film.qq.com', 21 | style: { 22 | position: 'absolute', 23 | left: '57', 24 | width: '176', 25 | height: '176', 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /react-components/text/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.0", 3 | "name": "@tmagic/react-text", 4 | "type": "module", 5 | "main": "src/index.ts", 6 | "files": [ 7 | "src" 8 | ], 9 | "engines": { 10 | "node": ">=18" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/Tencent/tmagic-editor.git" 15 | }, 16 | "dependencies": { 17 | "@tmagic/form-schema": "workspace:^" 18 | }, 19 | "peerDependencies": { 20 | "@tmagic/core": "workspace:^", 21 | "@tmagic/react-runtime-help": "workspace:^", 22 | "react": ">=18.3.1", 23 | "react-dom": ">=18.3.1", 24 | "typescript": "*" 25 | }, 26 | "peerDependenciesMeta": { 27 | "typescript": { 28 | "optional": true 29 | } 30 | }, 31 | "devDependencies": { 32 | "@types/react": "^18.3.3", 33 | "@types/react-dom": "^18.3.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /react-components/text/src/event.ts: -------------------------------------------------------------------------------- 1 | import { COMMON_EVENT_PREFIX } from '@tmagic/core'; 2 | 3 | export default { 4 | methods: [], 5 | events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }], 6 | }; 7 | -------------------------------------------------------------------------------- /react-components/text/src/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | import Text from './Text'; 20 | 21 | export { default as config } from './formConfig'; 22 | export { default as value } from './initValue'; 23 | export { default as event } from './event'; 24 | 25 | export default Text; 26 | -------------------------------------------------------------------------------- /react-components/text/src/initValue.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | export default { 20 | type: 'text', 21 | text: '请输入文本内容', 22 | multiple: true, 23 | style: { 24 | width: '100', 25 | height: 'auto', 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /runtime/react-runtime-help/src/AppContent.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | import React from 'react'; 20 | 21 | import type TMagicApp from '@tmagic/core'; 22 | 23 | export default React.createContext(undefined); 24 | -------------------------------------------------------------------------------- /runtime/react-runtime-help/src/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | export { default as AppContent } from './AppContent'; 19 | export * from './hooks/use-editor-dsl'; 20 | export * from './hooks/use-dsl'; 21 | export * from './hooks/use-app'; 22 | export * from './hooks/use-component-status'; 23 | -------------------------------------------------------------------------------- /runtime/react/.gitignore: -------------------------------------------------------------------------------- 1 | .tmagic 2 | entry-dist 3 | -------------------------------------------------------------------------------- /runtime/react/page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | React Page 9 | 27 | 28 | 29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /runtime/react/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmagic-editor/92534fc9159b408f93e194ce119b45ff5cd5f95f/runtime/react/public/favicon.png -------------------------------------------------------------------------------- /runtime/react/tmagic.config.ts: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | 3 | import { defineConfig } from '@tmagic/cli'; 4 | 5 | export default defineConfig({ 6 | packages: [path.join(__dirname, '../ui-react')], 7 | componentFileAffix: '.tsx', 8 | }); 9 | -------------------------------------------------------------------------------- /runtime/react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "jsx": "react", 6 | "forceConsistentCasingInFileNames": true, 7 | "types": ["node"], 8 | "paths": { 9 | // 内部模块都指向 src/index.ts, 会有更好的代码跳转体验. 10 | "@tmagic/*": ["../../packages/*/src"], 11 | "@tmagic/react-runtime-help": ["../react-runtime-help/src"], 12 | }, 13 | }, 14 | } 15 | -------------------------------------------------------------------------------- /runtime/tmagic-form/README.md: -------------------------------------------------------------------------------- 1 | # TMagicFormRuntime 2 | TMagicFormRuntime 基于@tmagic/form的编辑器runtime 3 | 4 | ## 环境准备 5 | 6 | 先基于[tmagic-editor](https://tencent.github.io/tmagic-editor/docs/guide/)将编辑器搭建起来 7 | 8 | 按住依赖 9 | 10 | ```bash 11 | pnpm add @tmagic/tmagic-form-runtime 12 | ``` 13 | 14 | ```html 15 | 26 | 27 | ``` 28 | 29 | ```ts 30 | import { 31 | canSelect, 32 | COMPONENT_GROUP_LIST as componentGroupList, 33 | propsConfigs, 34 | useRuntime, 35 | } from '@tmagic/tmagic-form-runtime'; 36 | 37 | const { render } = useRuntime(); 38 | ``` -------------------------------------------------------------------------------- /runtime/tmagic-form/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import { DefineComponent } from 'vue'; 3 | 4 | const component: DefineComponent<{}, {}, any>; 5 | export default component; 6 | } 7 | -------------------------------------------------------------------------------- /runtime/tmagic-form/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 24 | -------------------------------------------------------------------------------- /runtime/tmagic-form/src/form-config/checkbox.ts: -------------------------------------------------------------------------------- 1 | import { createForm } from '@tmagic/editor'; 2 | 3 | export default createForm([ 4 | { 5 | name: 'activeValue', 6 | text: '选中时的值', 7 | defaultValue: true, 8 | }, 9 | { 10 | name: 'inactiveValue', 11 | text: '没有选中时的值', 12 | defaultValue: false, 13 | }, 14 | ]); 15 | -------------------------------------------------------------------------------- /runtime/tmagic-form/src/form-config/common.ts: -------------------------------------------------------------------------------- 1 | import { createForm } from '@tmagic/editor'; 2 | 3 | export default createForm([ 4 | { 5 | name: 'id', 6 | type: 'hidden', 7 | }, 8 | { 9 | name: 'type', 10 | type: 'hidden', 11 | }, 12 | { 13 | name: 'name', 14 | text: '表单key', 15 | extra: '字段名', 16 | }, 17 | { 18 | name: 'text', 19 | text: '标签文本', 20 | extra: 'label 标签的文本', 21 | }, 22 | { 23 | name: 'labelWidth', 24 | text: '标签宽度', 25 | extra: '表单域标签的的宽度，例如 "50px"。支持 auto。', 26 | }, 27 | { 28 | name: 'disabled', 29 | text: '是否禁用', 30 | type: 'switch', 31 | defaultValue: false, 32 | }, 33 | ]); 34 | -------------------------------------------------------------------------------- /runtime/tmagic-form/src/form-config/display.ts: -------------------------------------------------------------------------------- 1 | import { createForm } from '@tmagic/editor'; 2 | 3 | export default createForm([]); 4 | -------------------------------------------------------------------------------- /runtime/tmagic-form/src/form-config/index.ts: -------------------------------------------------------------------------------- 1 | import type { FormConfig } from '@tmagic/editor'; 2 | 3 | import checkbox from './checkbox'; 4 | import display from './display'; 5 | import number from './number'; 6 | import switchConfig from './switch'; 7 | import text from './text'; 8 | 9 | const configs: Record = { 10 | text, 11 | checkbox, 12 | display, 13 | number, 14 | switch: switchConfig, 15 | }; 16 | 17 | export default configs; 18 | -------------------------------------------------------------------------------- /runtime/tmagic-form/src/form-config/number.ts: -------------------------------------------------------------------------------- 1 | import { createForm } from '@tmagic/editor'; 2 | 3 | export default createForm([ 4 | { 5 | type: 'number', 6 | name: 'min', 7 | text: '最小值', 8 | }, 9 | { 10 | type: 'number', 11 | name: 'max', 12 | text: '最大值', 13 | }, 14 | { 15 | type: 'number', 16 | name: 'step', 17 | text: '步数', 18 | }, 19 | { 20 | name: 'placeholder', 21 | text: 'placeholder', 22 | }, 23 | ]); 24 | -------------------------------------------------------------------------------- /runtime/tmagic-form/src/form-config/switch.ts: -------------------------------------------------------------------------------- 1 | import { createForm } from '@tmagic/editor'; 2 | 3 | export default createForm([]); 4 | -------------------------------------------------------------------------------- /runtime/tmagic-form/src/form-config/text.ts: -------------------------------------------------------------------------------- 1 | import { createForm } from '@tmagic/editor'; 2 | 3 | export default createForm([ 4 | { 5 | name: 'placeholder', 6 | text: 'placeholder', 7 | }, 8 | { 9 | name: 'append', 10 | legend: '后置按钮', 11 | type: 'fieldset', 12 | labelWidth: '80px', 13 | checkbox: true, 14 | expand: true, 15 | items: [ 16 | { 17 | name: 'type', 18 | type: 'hidden', 19 | defaultValue: 'button', 20 | }, 21 | { 22 | name: 'text', 23 | text: '按钮文案', 24 | }, 25 | { 26 | name: 'handler', 27 | type: 'vs-code', 28 | height: '400px', 29 | text: '点击', 30 | }, 31 | ], 32 | }, 33 | ]); 34 | -------------------------------------------------------------------------------- /runtime/tmagic-form/src/types.ts: -------------------------------------------------------------------------------- 1 | import type { Ref } from 'vue'; 2 | 3 | import type { FormConfig, MForm, StageCore } from '@tmagic/editor'; 4 | 5 | export interface AppProps { 6 | stage: StageCore; 7 | fillConfig: (config: FormConfig, mForm: Ref>) => FormConfig; 8 | } 9 | -------------------------------------------------------------------------------- /runtime/ui-react/README.md: -------------------------------------------------------------------------------- 1 | # [文档](https://tencent.github.io/tmagic-editor/docs/) -------------------------------------------------------------------------------- /runtime/ui/README.md: -------------------------------------------------------------------------------- 1 | # [文档](https://tencent.github.io/tmagic-editor/docs/) -------------------------------------------------------------------------------- /runtime/vue-runtime-help/src/index.ts: -------------------------------------------------------------------------------- 1 | import { h } from 'vue-demi'; 2 | 3 | import type { MComponent, StyleSchema } from '@tmagic/core'; 4 | 5 | export * from './hooks/use-editor-dsl'; 6 | export * from './hooks/use-dsl'; 7 | export * from './hooks/use-app'; 8 | export * from './hooks/use-component-status'; 9 | export { useComponent } from './hooks/use-component'; 10 | 11 | export interface UserRenderFunctionOptions { 12 | h: typeof h; 13 | type: Parameters[0]; 14 | props?: { 15 | [key: string]: any; 16 | }; 17 | attrs?: { 18 | [key: string]: any; 19 | }; 20 | className?: string | string[]; 21 | style?: StyleSchema; 22 | config: Omit; 23 | on?: { 24 | [key: string]: (...args: any[]) => any; 25 | }; 26 | directives?: { name: string; value: any; modifiers: any }[]; 27 | } 28 | 29 | export type UserRenderFunction = (options: UserRenderFunctionOptions) => any; 30 | -------------------------------------------------------------------------------- /runtime/vue2/.gitignore: -------------------------------------------------------------------------------- 1 | .tmagic 2 | entry-dist 3 | -------------------------------------------------------------------------------- /runtime/vue2/page/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 24 | -------------------------------------------------------------------------------- /runtime/vue2/page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue2 Page 8 | 28 | 29 | 30 | 31 | 32 | 33 |
34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /runtime/vue2/page/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import { DefineComponent } from 'vue'; 3 | 4 | const component: DefineComponent<{}, {}, any>; 5 | export default component; 6 | } 7 | -------------------------------------------------------------------------------- /runtime/vue2/playground/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 48 | -------------------------------------------------------------------------------- /runtime/vue2/playground/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import { DefineComponent } from 'vue'; 3 | 4 | const component: DefineComponent<{}, {}, any>; 5 | export default component; 6 | } 7 | -------------------------------------------------------------------------------- /runtime/vue2/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmagic-editor/92534fc9159b408f93e194ce119b45ff5cd5f95f/runtime/vue2/public/favicon.png -------------------------------------------------------------------------------- /runtime/vue2/tmagic.config.ts: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | 3 | import { defineConfig } from '@tmagic/cli'; 4 | 5 | export default defineConfig({ 6 | packages: [path.join(__dirname, '../ui')], 7 | componentFileAffix: '.vue', 8 | dynamicImport: true, 9 | }); 10 | -------------------------------------------------------------------------------- /runtime/vue3/.gitignore: -------------------------------------------------------------------------------- 1 | .tmagic 2 | -------------------------------------------------------------------------------- /runtime/vue3/page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue3 Page 8 | 28 | 29 | 30 | 31 | 32 | 33 |
34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /runtime/vue3/page/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import { DefineComponent } from 'vue'; 3 | 4 | const component: DefineComponent<{}, {}, any>; 5 | export default component; 6 | } 7 | -------------------------------------------------------------------------------- /runtime/vue3/playground/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 11 | -------------------------------------------------------------------------------- /runtime/vue3/playground/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import { DefineComponent } from 'vue'; 3 | 4 | const component: DefineComponent<{}, {}, any>; 5 | export default component; 6 | } 7 | -------------------------------------------------------------------------------- /runtime/vue3/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmagic-editor/92534fc9159b408f93e194ce119b45ff5cd5f95f/runtime/vue3/public/favicon.png -------------------------------------------------------------------------------- /runtime/vue3/tmagic.config.ts: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | 3 | import { defineConfig } from '@tmagic/cli'; 4 | 5 | export default defineConfig({ 6 | packages: [path.join(__dirname, '../ui')], 7 | componentFileAffix: '.vue', 8 | dynamicImport: true, 9 | }); 10 | -------------------------------------------------------------------------------- /shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import { DefineComponent } from 'vue'; 3 | 4 | const component: DefineComponent<{}, {}, any>; 5 | export default component; 6 | } 7 | -------------------------------------------------------------------------------- /tsconfig.build-browser.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "declaration": true, 5 | "emitDeclarationOnly": true, 6 | "stripInternal": true 7 | }, 8 | "include": [ 9 | "packages/core/src", 10 | "packages/data-source/src", 11 | "packages/dep/src", 12 | "packages/form-schema/src", 13 | "packages/schema/src", 14 | "packages/stage/src", 15 | "packages/utils/src", 16 | "packages/element-plus-adapter/src", 17 | "packages/ui/src", 18 | "packages/ui-react/src", 19 | "runtime/react-runtime-help/src", 20 | "runtime/vue-runtime-help/src", 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /tsconfig.build-vue.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "declaration": true, 5 | "emitDeclarationOnly": true, 6 | "stripInternal": true 7 | }, 8 | "include": [ 9 | "packages/design/src", 10 | "packages/editor/src", 11 | "packages/form/src", 12 | "packages/table/src", 13 | "packages/tdesign-vue-next-adapter/src", 14 | "runtime/tmagic-form/src", 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /tsconfig.check-vue.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "include": [ 4 | "packages/design/src", 5 | "packages/editor/src", 6 | "packages/form/src", 7 | "packages/table/src", 8 | "packages/tdesign-vue-next-adapter/src", 9 | "runtime/tmagic-form/src", 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /tsconfig.check.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "include": [ 4 | "packages/core/src", 5 | "packages/data-source/src", 6 | "packages/dep/src", 7 | "packages/form-schema/src", 8 | "packages/schema/src", 9 | "packages/stage/src", 10 | "packages/utils/src", 11 | "packages/element-plus-adapter/src", 12 | "runtime/react-runtime-help/src", 13 | "runtime/vue-runtime-help/src", 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /vue-components/button/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.2", 3 | "name": "@tmagic/vue-button", 4 | "type": "module", 5 | "main": "src/index.ts", 6 | "files": [ 7 | "src" 8 | ], 9 | "engines": { 10 | "node": ">=18" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/Tencent/tmagic-editor.git" 15 | }, 16 | "dependencies": { 17 | "@tmagic/form-schema": "workspace:^", 18 | "vue-demi": "^0.14.10" 19 | }, 20 | "peerDependencies": { 21 | "@tmagic/core": "workspace:^", 22 | "@tmagic/vue-runtime-help": "workspace:^", 23 | "@vue/composition-api": ">=1.7.2", 24 | "typescript": "*", 25 | "vue": ">=2.6.0 || >=3.5.0" 26 | }, 27 | "peerDependenciesMeta": { 28 | "@vue/composition-api": { 29 | "optional": true 30 | }, 31 | 32 | "typescript": { 33 | "optional": true 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /vue-components/button/src/event.ts: -------------------------------------------------------------------------------- 1 | import { COMMON_EVENT_PREFIX } from '@tmagic/core'; 2 | 3 | export default { 4 | methods: [], 5 | events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }], 6 | }; 7 | -------------------------------------------------------------------------------- /vue-components/button/src/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | import Button from './index.vue'; 20 | 21 | export { default as config } from './formConfig'; 22 | export { default as value } from './initValue'; 23 | export { default as event } from './event'; 24 | 25 | export default Button; 26 | -------------------------------------------------------------------------------- /vue-components/button/src/initValue.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | export default { 20 | text: '请输入文本内容', 21 | multiple: true, 22 | style: { 23 | width: '270', 24 | height: '37.5', 25 | border: 0, 26 | backgroundColor: '#fb6f00', 27 | }, 28 | }; 29 | -------------------------------------------------------------------------------- /vue-components/container/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.1.0", 3 | "name": "@tmagic/vue-container", 4 | "type": "module", 5 | "main": "src/index.ts", 6 | "files": [ 7 | "src" 8 | ], 9 | "engines": { 10 | "node": ">=18" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/Tencent/tmagic-editor.git" 15 | }, 16 | "dependencies": { 17 | "@tmagic/form-schema": "workspace:^", 18 | "vue-demi": "^0.14.10" 19 | }, 20 | "peerDependencies": { 21 | "@tmagic/core": "workspace:^", 22 | "@tmagic/vue-runtime-help": "workspace:^", 23 | "@vue/composition-api": ">=1.7.2", 24 | "typescript": "*", 25 | "vue": ">=2.6.0 || >=3.5.0" 26 | }, 27 | "peerDependenciesMeta": { 28 | "typescript": { 29 | "optional": true 30 | }, 31 | "@vue/composition-api": { 32 | "optional": true 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /vue-components/container/src/event.ts: -------------------------------------------------------------------------------- 1 | import { COMMON_EVENT_PREFIX } from '@tmagic/core'; 2 | 3 | export default { 4 | methods: [], 5 | events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }], 6 | }; 7 | -------------------------------------------------------------------------------- /vue-components/container/src/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | import Container from './Container.vue'; 20 | 21 | export { default as config } from './formConfig'; 22 | export { default as value } from './initValue'; 23 | export { default as event } from './event'; 24 | 25 | export default Container; 26 | -------------------------------------------------------------------------------- /vue-components/container/src/initValue.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | export default { 20 | items: [], 21 | style: { 22 | width: '375', 23 | height: '100', 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /vue-components/img/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.0", 3 | "name": "@tmagic/vue-img", 4 | "type": "module", 5 | "main": "src/index.ts", 6 | "files": [ 7 | "src" 8 | ], 9 | "engines": { 10 | "node": ">=18" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/Tencent/tmagic-editor.git" 15 | }, 16 | "dependencies": { 17 | "@tmagic/form-schema": "workspace:^", 18 | "vue-demi": "^0.14.10" 19 | }, 20 | "peerDependencies": { 21 | "@tmagic/core": "workspace:^", 22 | "@tmagic/vue-runtime-help": "workspace:^", 23 | "@vue/composition-api": ">=1.7.2", 24 | "typescript": "*", 25 | "vue": ">=2.6.0 || >=3.5.0" 26 | }, 27 | "peerDependenciesMeta": { 28 | "@vue/composition-api": { 29 | "optional": true 30 | }, 31 | "typescript": { 32 | "optional": true 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /vue-components/img/src/event.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: [], 3 | events: [], 4 | }; 5 | -------------------------------------------------------------------------------- /vue-components/img/src/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | import Img from './index.vue'; 20 | 21 | export { default as config } from './formConfig'; 22 | export { default as value } from './initValue'; 23 | export { default as event } from './event'; 24 | 25 | export default Img; 26 | -------------------------------------------------------------------------------- /vue-components/img/src/initValue.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | export default { 20 | src: 'https://puui.qpic.cn/vupload/0/1573555382625_bhp0wud8l6w.png/0', 21 | url: '', 22 | style: { 23 | position: 'absolute', 24 | left: '57', 25 | width: '176', 26 | height: '176', 27 | }, 28 | }; 29 | -------------------------------------------------------------------------------- /vue-components/iterator-container/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.0", 3 | "name": "@tmagic/vue-iterator-container", 4 | "type": "module", 5 | "main": "src/index.ts", 6 | "files": [ 7 | "src" 8 | ], 9 | "engines": { 10 | "node": ">=18" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/Tencent/tmagic-editor.git" 15 | }, 16 | "dependencies": { 17 | "@tmagic/form-schema": "workspace:^", 18 | "vue-demi": "^0.14.10" 19 | }, 20 | "peerDependencies": { 21 | "@tmagic/core": "workspace:^", 22 | "@tmagic/vue-runtime-help": "workspace:^", 23 | "@vue/composition-api": ">=1.7.2", 24 | "typescript": "*", 25 | "vue": ">=2.6.0 || >=3.5.0" 26 | }, 27 | "peerDependenciesMeta": { 28 | "@vue/composition-api": { 29 | "optional": true 30 | }, 31 | "typescript": { 32 | "optional": true 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /vue-components/iterator-container/src/event.ts: -------------------------------------------------------------------------------- 1 | import { COMMON_EVENT_PREFIX } from '@tmagic/core'; 2 | 3 | export default { 4 | methods: [], 5 | events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }], 6 | }; 7 | -------------------------------------------------------------------------------- /vue-components/iterator-container/src/initValue.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | export default { 20 | style: { 21 | width: '375', 22 | height: '100', 23 | }, 24 | itemConfig: { 25 | style: { 26 | width: '100%', 27 | height: '100%', 28 | }, 29 | }, 30 | items: [], 31 | }; 32 | -------------------------------------------------------------------------------- /vue-components/iterator-container/src/type.ts: -------------------------------------------------------------------------------- 1 | import type { MNode } from '@tmagic/core'; 2 | 3 | export interface IteratorItemSchema { 4 | items: MNode[]; 5 | condResult: boolean; 6 | style: { 7 | [key: string]: any; 8 | }; 9 | } 10 | -------------------------------------------------------------------------------- /vue-components/overlay/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.0", 3 | "name": "@tmagic/vue-overlay", 4 | "type": "module", 5 | "main": "src/index.ts", 6 | "files": [ 7 | "src" 8 | ], 9 | "engines": { 10 | "node": ">=18" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/Tencent/tmagic-editor.git" 15 | }, 16 | "dependencies": { 17 | "@tmagic/form-schema": "workspace:^", 18 | "vue-demi": "^0.14.10" 19 | }, 20 | "peerDependencies": { 21 | "@tmagic/core": "workspace:^", 22 | "@tmagic/vue-runtime-help": "workspace:^", 23 | "vue-demi": ">=0.14.7", 24 | "typescript": "*" 25 | }, 26 | "peerDependenciesMeta": { 27 | "typescript": { 28 | "optional": true 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /vue-components/overlay/src/event.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: [ 3 | { 4 | label: '打开蒙层', 5 | value: 'openOverlay', 6 | }, 7 | { 8 | label: '关闭蒙层', 9 | value: 'closeOverlay', 10 | }, 11 | ], 12 | events: [ 13 | { 14 | label: '打开蒙层', 15 | value: 'overlay:open', 16 | }, 17 | { 18 | label: '关闭蒙层', 19 | value: 'overlay:close', 20 | }, 21 | ], 22 | }; 23 | -------------------------------------------------------------------------------- /vue-components/overlay/src/formConfig.ts: -------------------------------------------------------------------------------- 1 | import { defineFormConfig } from '@tmagic/form-schema'; 2 | 3 | export default defineFormConfig([]); 4 | -------------------------------------------------------------------------------- /vue-components/overlay/src/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | import Overlay from './index.vue'; 20 | 21 | export { default as config } from './formConfig'; 22 | export { default as value } from './initValue'; 23 | export { default as event } from './event'; 24 | 25 | export default Overlay; 26 | -------------------------------------------------------------------------------- /vue-components/overlay/src/initValue.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | style: { 3 | position: 'fixed', 4 | width: '100%', 5 | height: '100%', 6 | top: 0, 7 | left: 0, 8 | backgroundColor: 'rgba(0, 0, 0, 0.8)', 9 | zIndex: 100, 10 | }, 11 | items: [], 12 | }; 13 | -------------------------------------------------------------------------------- /vue-components/page-fragment-container/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.0", 3 | "name": "@tmagic/vue-page-fragment-container", 4 | "type": "module", 5 | "main": "src/index.ts", 6 | "files": [ 7 | "src" 8 | ], 9 | "engines": { 10 | "node": ">=18" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/Tencent/tmagic-editor.git" 15 | }, 16 | "dependencies": { 17 | "@tmagic/form-schema": "workspace:^", 18 | "vue-demi": "^0.14.10" 19 | }, 20 | "peerDependencies": { 21 | "@tmagic/core": "workspace:^", 22 | "@tmagic/vue-runtime-help": "workspace:^", 23 | "typescript": "*" 24 | }, 25 | "peerDependenciesMeta": { 26 | "typescript": { 27 | "optional": true 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /vue-components/page-fragment-container/src/event.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: [], 3 | events: [], 4 | }; 5 | -------------------------------------------------------------------------------- /vue-components/page-fragment-container/src/initValue.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | export default { 20 | style: { 21 | width: '', 22 | height: '', 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /vue-components/page-fragment/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.0", 3 | "name": "@tmagic/vue-page-fragment", 4 | "type": "module", 5 | "main": "src/index.ts", 6 | "files": [ 7 | "src" 8 | ], 9 | "engines": { 10 | "node": ">=18" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/Tencent/tmagic-editor.git" 15 | }, 16 | "dependencies": { 17 | "@tmagic/form-schema": "workspace:^", 18 | "vue-demi": "^0.14.10" 19 | }, 20 | "peerDependencies": { 21 | "@tmagic/core": "workspace:^", 22 | "@tmagic/vue-runtime-help": "workspace:^", 23 | "typescript": "*" 24 | }, 25 | "peerDependenciesMeta": { 26 | "typescript": { 27 | "optional": true 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /vue-components/page-fragment/src/event.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: [], 3 | events: [], 4 | }; 5 | -------------------------------------------------------------------------------- /vue-components/page-fragment/src/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | import PageFragment from './PageFragment.vue'; 20 | 21 | export { default as config } from './formConfig'; 22 | export { default as value } from './initValue'; 23 | export { default as event } from './event'; 24 | 25 | export default PageFragment; 26 | -------------------------------------------------------------------------------- /vue-components/page-fragment/src/initValue.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | export default { 20 | items: [], 21 | style: { 22 | width: '375', 23 | height: '817', 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /vue-components/page/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.1", 3 | "name": "@tmagic/vue-page", 4 | "type": "module", 5 | "main": "src/index.ts", 6 | "files": [ 7 | "src" 8 | ], 9 | "engines": { 10 | "node": ">=18" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/Tencent/tmagic-editor.git" 15 | }, 16 | "dependencies": { 17 | "@tmagic/form-schema": "workspace:^", 18 | "vue-demi": "^0.14.10" 19 | }, 20 | "peerDependencies": { 21 | "@tmagic/core": "workspace:^", 22 | "@tmagic/vue-runtime-help": "workspace:^", 23 | "typescript": "*" 24 | }, 25 | "peerDependenciesMeta": { 26 | "typescript": { 27 | "optional": true 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /vue-components/page/src/event.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: [ 3 | { 4 | label: '刷新页面', 5 | value: 'refresh', 6 | }, 7 | ], 8 | }; 9 | -------------------------------------------------------------------------------- /vue-components/page/src/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | import Page from './index.vue'; 20 | 21 | export { default as config } from './formConfig'; 22 | export { default as value } from './initValue'; 23 | export { default as event } from './event'; 24 | 25 | export default Page; 26 | -------------------------------------------------------------------------------- /vue-components/page/src/initValue.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | export default { 20 | items: [], 21 | style: { 22 | width: '100%', 23 | height: '100%', 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /vue-components/qrcode/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.0", 3 | "name": "@tmagic/vue-qrcode", 4 | "type": "module", 5 | "main": "src/index.ts", 6 | "files": [ 7 | "src" 8 | ], 9 | "engines": { 10 | "node": ">=18" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/Tencent/tmagic-editor.git" 15 | }, 16 | "dependencies": { 17 | "@tmagic/form-schema": "workspace:^", 18 | "qrcode": "^1.5.0", 19 | "vue-demi": "^0.14.10" 20 | }, 21 | "peerDependencies": { 22 | "@tmagic/core": "workspace:^", 23 | "@tmagic/vue-runtime-help": "workspace:^", 24 | "@vue/composition-api": ">=1.7.2", 25 | "typescript": "*", 26 | "vue": ">=2.6.0 || >=3.5.0" 27 | }, 28 | "peerDependenciesMeta": { 29 | "typescript": { 30 | "optional": true 31 | }, 32 | "@vue/composition-api": { 33 | "optional": true 34 | } 35 | }, 36 | "devDependencies": { 37 | "@types/qrcode": "^1.4.2" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /vue-components/qrcode/src/event.ts: -------------------------------------------------------------------------------- 1 | import { COMMON_EVENT_PREFIX } from '@tmagic/core'; 2 | 3 | export default { 4 | methods: [], 5 | events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }], 6 | }; 7 | -------------------------------------------------------------------------------- /vue-components/qrcode/src/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | import QrCode from './index.vue'; 20 | 21 | export { default as config } from './formConfig'; 22 | export { default as value } from './initValue'; 23 | export { default as event } from './event'; 24 | 25 | export default QrCode; 26 | -------------------------------------------------------------------------------- /vue-components/qrcode/src/initValue.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | export default { 20 | url: 'https://m.film.qq.com', 21 | style: { 22 | position: 'absolute', 23 | left: '57', 24 | width: '176', 25 | height: '176', 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /vue-components/text/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.1", 3 | "name": "@tmagic/vue-text", 4 | "type": "module", 5 | "main": "src/index.ts", 6 | "files": [ 7 | "src" 8 | ], 9 | "engines": { 10 | "node": ">=18" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/Tencent/tmagic-editor.git" 15 | }, 16 | "dependencies": { 17 | "@tmagic/form-schema": "workspace:^", 18 | "vue-demi": "^0.14.10" 19 | }, 20 | "peerDependencies": { 21 | "@tmagic/core": "workspace:^", 22 | "@tmagic/vue-runtime-help": "workspace:^", 23 | "@vue/composition-api": ">=1.7.2", 24 | "typescript": "*", 25 | "vue": ">=2.6.0 || >=3.5.0" 26 | }, 27 | "peerDependenciesMeta": { 28 | "typescript": { 29 | "optional": true 30 | }, 31 | "@vue/composition-api": { 32 | "optional": true 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /vue-components/text/src/event.ts: -------------------------------------------------------------------------------- 1 | import { COMMON_EVENT_PREFIX } from '@tmagic/core'; 2 | 3 | export default { 4 | methods: [], 5 | events: [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }], 6 | }; 7 | -------------------------------------------------------------------------------- /vue-components/text/src/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | import Text from './index.vue'; 20 | 21 | export { default as config } from './formConfig'; 22 | export { default as value } from './initValue'; 23 | export { default as event } from './event'; 24 | 25 | export default Text; 26 | -------------------------------------------------------------------------------- /vue-components/text/src/initValue.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tencent is pleased to support the open source community by making TMagicEditor available. 3 | * 4 | * Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved. 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * 10 | * http://www.apache.org/licenses/LICENSE-2.0 11 | * 12 | * Unless required by applicable law or agreed to in writing, software 13 | * distributed under the License is distributed on an "AS IS" BASIS, 14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | * See the License for the specific language governing permissions and 16 | * limitations under the License. 17 | */ 18 | 19 | export default { 20 | type: 'text', 21 | text: '请输入文本内容', 22 | multiple: true, 23 | style: { 24 | width: '100', 25 | height: 'auto', 26 | }, 27 | }; 28 | --------------------------------------------------------------------------------