From 4f9e338753bb7943d8a8f6bfb4e4f2d05ac8000c Mon Sep 17 00:00:00 2001 From: FalkWolsky Date: Fri, 1 Dec 2023 12:37:31 +0100 Subject: [PATCH] Introduce Layout Mode and Fixes - final --- .../autoCompleteComp/autoCompleteComp.tsx | 2 +- .../src/comps/comps/richTextEditorComp.tsx | 4 +- .../comps/textInputComp/textAreaComp.tsx | 22 +- client/packages/lowcoder/src/comps/index.tsx | 1383 +++++++++-------- .../lowcoder/src/comps/uiCompRegistry.ts | 28 +- .../packages/lowcoder/src/i18n/locales/en.ts | 51 +- .../lowcoder/src/pages/ComponentDoc/index.tsx | 2 +- .../src/pages/ComponentPlayground/index.tsx | 2 +- .../src/pages/editor/right/uiCompPanel.tsx | 4 +- 9 files changed, 786 insertions(+), 712 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx index acd4b2d09..a99d5eaee 100644 --- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx @@ -103,7 +103,7 @@ const childrenMap = { searchCompletePY: BoolControl, searchLabelOnly: BoolControl.DEFAULT_TRUE, valueOrLabel: dropdownControl(valueOrLabelOption, "label"), - autoCompleteType: dropdownControl(autoCompleteType, "AntDesign"), + autoCompleteType: dropdownControl(autoCompleteType, "normal"), autocompleteIconColor: dropdownControl(autocompleteIconColor, "blue"), componentSize: dropdownControl(componentSize, "small"), valueInItems: booleanExposingStateControl("valueInItems"), diff --git a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx index 290d873f2..c0602b4a4 100644 --- a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx @@ -168,7 +168,7 @@ const childrenMap = { value: stringExposingStateControl("value"), hideToolbar: BoolControl, readOnly: BoolControl, - autoHeight: AutoHeightControl, + autoHeight: withDefault(AutoHeightControl, "fixed"), placeholder: withDefault(StringControl, trans("richTextEditor.placeholder")), toolbar: withDefault(StringControl, JSON.stringify(toolbarOptions)), onEvent: ChangeEventHandlerControl, @@ -327,7 +327,7 @@ const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => { )} - {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( <>
{children.autoHeight.getPropertyView()} diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx index 80c8c5900..6c043e30a 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx @@ -7,7 +7,7 @@ import { import { Section, sectionNames } from "lowcoder-design"; import { BoolControl } from "../../controls/boolControl"; import { AutoHeightControl } from "../../controls/autoHeightControl"; -import { UICompBuilder } from "../../generators"; +import { UICompBuilder, withDefault } from "../../generators"; import { FormDataPropertyView } from "../formComp/formDataConstants"; import { getStyle, @@ -45,15 +45,19 @@ const TextAreaStyled = styled(TextArea)<{ const Wrapper = styled.div<{ $style: InputLikeStyleType; }>` - height: 100%; + height: 100% !important; + + .ant-input { + height:100% !important; + } .ant-input-clear-icon { - opacity: 0.45; + opacity: 0.75; color: ${(props) => props.$style.text}; top: 10px; &:hover { - opacity: 0.65; + opacity: 0.9; color: ${(props) => props.$style.text}; } } @@ -64,7 +68,7 @@ let TextAreaTmpComp = (function () { ...textInputChildren, viewRef: RefControl, allowClear: BoolControl, - autoHeight: AutoHeightControl, + autoHeight: withDefault(AutoHeightControl, "fixed"), style: styleControl(InputLikeStyle), }; return new UICompBuilder(childrenMap, (props) => { @@ -73,12 +77,11 @@ let TextAreaTmpComp = (function () { required: props.required, children: ( - @@ -105,7 +108,8 @@ let TextAreaTmpComp = (function () {
{allowClearPropertyView(children)} {readOnlyPropertyView(children)} -
+
+ )} {useContext(EditorContext).editorModeStatus === "layout" && ( diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx index a14e4e682..45edf6636 100644 --- a/client/packages/lowcoder/src/comps/index.tsx +++ b/client/packages/lowcoder/src/comps/index.tsx @@ -5,10 +5,7 @@ import { ModalComp } from "comps/hooks/modalComp"; import { ButtonComp } from "./comps/buttonComp/buttonComp"; import { DropdownComp } from "./comps/buttonComp/dropdownComp"; import { LinkComp } from "./comps/buttonComp/linkComp"; -import { - ContainerComp, - defaultContainerData, -} from "./comps/containerComp/containerComp"; +import { ContainerComp, defaultContainerData } from "./comps/containerComp/containerComp"; import { CustomComp } from "./comps/customComp/customComp"; import { DatePickerComp, DateRangeComp } from "./comps/dateComp/dateComp"; import { DividerComp } from "./comps/dividerComp"; @@ -37,6 +34,39 @@ import { InputComp } from "./comps/textInputComp/inputComp"; import { PasswordComp } from "./comps/textInputComp/passwordComp"; import { TextAreaComp } from "./comps/textInputComp/textAreaComp"; import { TimePickerComp, TimeRangeComp } from "./comps/dateComp/timeComp"; +import { defaultFormData, FormComp } from "./comps/formComp/formComp"; +import { IFrameComp } from "./comps/iframeComp"; +import { defaultGridData, defaultListViewData, GridComp, ListViewComp,} from "./comps/listViewComp"; +import { ModuleComp } from "./comps/moduleComp/moduleComp"; +import { NavComp } from "./comps/navComp/navComp"; +import { TableComp } from "./comps/tableComp"; +import { registerComp, UICompManifest, UICompType } from "./uiCompRegistry"; +import { QRCodeComp } from "./comps/qrCodeComp"; +import { JsonExplorerComp } from "./comps/jsonComp/jsonExplorerComp"; +import { JsonEditorComp } from "./comps/jsonComp/jsonEditorComp"; +import { TreeComp } from "./comps/treeComp/treeComp"; +import { TreeSelectComp } from "./comps/treeComp/treeSelectComp"; +import { trans } from "i18n"; +import { remoteComp } from "./comps/remoteComp/remoteComp"; +import { AudioComp } from "./comps/mediaComp/audioComp"; +import { VideoComp } from "./comps/mediaComp/videoComp"; +import { DrawerComp } from "./hooks/drawerComp"; +import { CarouselComp } from "./comps/carouselComp"; +import { ToggleButtonComp } from "./comps/buttonComp/toggleButtonComp"; +import { defaultCollapsibleContainerData } from "./comps/containerComp/collapsibleContainerComp"; +import { RemoteCompInfo } from "types/remoteComp"; +import { ScannerComp } from "./comps/buttonComp/scannerComp"; +import { SignatureComp } from "./comps/signatureComp"; +import { TimeLineComp } from "./comps/timelineComp/timelineComp"; +import { CommentComp } from "./comps/commentComp/commentComp"; +import { MentionComp } from "./comps/textInputComp/mentionComp"; +import { AutoCompleteComp } from "./comps/autoCompleteComp/autoCompleteComp"; +import { JsonLottieComp } from "./comps/jsonComp/jsonLottieComp"; +import { ResponsiveLayoutComp } from "./comps/responsiveLayout"; +import { VideoMeetingStreamComp } from "./comps/meetingComp/videoMeetingStreamComp"; +import { ControlButton } from "./comps/meetingComp/controlButton"; +import { VideoMeetingControllerComp } from "./comps/meetingComp/videoMeetingControllerComp"; +import { VideoSharingStreamComp } from "./comps/meetingComp/videoSharingStreamComp"; import { AudioCompIcon, @@ -104,46 +134,6 @@ import { MermaidIcon, } from "lowcoder-design"; -import { defaultFormData, FormComp } from "./comps/formComp/formComp"; -import { IFrameComp } from "./comps/iframeComp"; -import { - defaultGridData, - defaultListViewData, - GridComp, - ListViewComp, -} from "./comps/listViewComp"; -import { ModuleComp } from "./comps/moduleComp/moduleComp"; -import { NavComp } from "./comps/navComp/navComp"; -import { TableComp } from "./comps/tableComp"; -import { registerComp, UICompManifest, UICompType } from "./uiCompRegistry"; -import { QRCodeComp } from "./comps/qrCodeComp"; -import { JsonExplorerComp } from "./comps/jsonComp/jsonExplorerComp"; -import { JsonEditorComp } from "./comps/jsonComp/jsonEditorComp"; -import { TreeComp } from "./comps/treeComp/treeComp"; -import { TreeSelectComp } from "./comps/treeComp/treeSelectComp"; -import { trans } from "i18n"; -import { remoteComp } from "./comps/remoteComp/remoteComp"; -import { AudioComp } from "./comps/mediaComp/audioComp"; -import { VideoComp } from "./comps/mediaComp/videoComp"; -import { DrawerComp } from "./hooks/drawerComp"; -import { CarouselComp } from "./comps/carouselComp"; -import { ToggleButtonComp } from "./comps/buttonComp/toggleButtonComp"; -import { defaultCollapsibleContainerData } from "./comps/containerComp/collapsibleContainerComp"; -import { RemoteCompInfo } from "types/remoteComp"; -import { ScannerComp } from "./comps/buttonComp/scannerComp"; -import { SignatureComp } from "./comps/signatureComp"; -import { TimeLineComp } from "./comps/timelineComp/timelineComp"; -import { CommentComp } from "./comps/commentComp/commentComp"; -import { MentionComp } from "./comps/textInputComp/mentionComp"; -import { AutoCompleteComp } from "./comps/autoCompleteComp/autoCompleteComp"; -//Added by Aqib Mirza -import { JsonLottieComp } from "./comps/jsonComp/jsonLottieComp"; -import { ResponsiveLayoutComp } from "./comps/responsiveLayout"; -import { VideoMeetingStreamComp } from "./comps/meetingComp/videoMeetingStreamComp"; -import { ControlButton } from "./comps/meetingComp/controlButton"; -import { VideoMeetingControllerComp } from "./comps/meetingComp/videoMeetingControllerComp"; -import { VideoSharingStreamComp } from "./comps/meetingComp/videoSharingStreamComp"; - type Registry = { [key in UICompType]?: UICompManifest; }; @@ -155,60 +145,68 @@ const builtInRemoteComps: Omit = { }; const uiCompMap: Registry = { - input: { - name: trans("uiComp.inputCompName"), - enName: "Input", - description: trans("uiComp.inputCompDesc"), - categories: ["dataInputText", "common"], - icon: InputCompIcon, - keywords: trans("uiComp.inputCompKeywords"), - comp: InputComp, - }, - textArea: { - name: trans("uiComp.textAreaCompName"), - enName: "Text Area", - description: trans("uiComp.textAreaCompDesc"), - categories: ["dataInputText"], - icon: TextAreaCompIcon, - keywords: trans("uiComp.textAreaCompKeywords"), - comp: TextAreaComp, + + // Dashboards + + chart: { + name: trans("uiComp.chartCompName"), + enName: "Chart", + description: trans("uiComp.chartCompDesc"), + categories: ["dashboards"], + icon: ChartCompIcon, + comp: remoteComp({ ...builtInRemoteComps, compName: "chart" }), + keywords: trans("uiComp.chartCompKeywords"), + layoutInfo: { + w: 12, + h: 40, + }, }, - password: { - name: trans("uiComp.passwordCompName"), - enName: "Password", - description: trans("uiComp.passwordCompDesc"), - categories: ["dataInputText"], - icon: PasswordCompIcon, - keywords: trans("uiComp.passwordCompKeywords"), - comp: PasswordComp, + mermaid: { + name: trans("uiComp.mermaidCompName"), + enName: "Mermaid Charts", + comp: remoteComp({ ...builtInRemoteComps, compName: "mermaid" }), + description: trans("uiComp.mermaidCompDesc"), + categories: ["dashboards"], + icon: MermaidIcon, + keywords: trans("uiComp.mermaidCompKeywords"), + layoutInfo: { + w: 12, + h: 40, + }, }, - richTextEditor: { - name: trans("uiComp.richTextEditorCompName"), - enName: "Rich Text Editor", - categories: ["dataInputText"], - description: trans("uiComp.richTextEditorCompDesc"), - icon: RichTextEditorCompIcon, - keywords: trans("uiComp.richTextEditorCompKeywords"), - comp: RichTextEditorComp, + timeline: { + name: trans("uiComp.timelineCompName"), + enName: "timeline", + description: trans("uiComp.timelineCompDesc"), + categories: ["dashboards"], + icon: TimeLineIcon, + keywords: trans("uiComp.timelineCompKeywords"), + comp: TimeLineComp, layoutInfo: { - w: 8, - h: 25, + w: 12, + h: 40, }, }, - numberInput: { - name: trans("uiComp.numberInputCompName"), - enName: "Number Input", - description: trans("uiComp.numberInputCompDesc"), - categories: ["dataInputNumber"], - icon: NumberInputCompIcon, - keywords: trans("uiComp.numberInputCompKeywords"), - comp: NumberInputComp, + table: { + name: trans("uiComp.tableCompName"), + enName: "Table", + description: trans("uiComp.tableCompDesc"), + categories: ["dashboards", "projectmanagement"], + icon: TableCompIcon, + keywords: trans("uiComp.tableCompKeywords"), + comp: TableComp, + layoutInfo: { + w: 15, + h: 40, + }, + defaultDataFn: defaultTableData, + withoutLoading: true, }, slider: { name: trans("uiComp.sliderCompName"), enName: "Slider", description: trans("uiComp.sliderCompDesc"), - categories: ["dataInputNumber"], + categories: ["dashboards"], icon: SliderCompIcon, keywords: trans("uiComp.sliderCompKeywords"), comp: SliderComp, @@ -221,7 +219,7 @@ const uiCompMap: Registry = { name: trans("uiComp.rangeSliderCompName"), enName: "Range Slider", description: trans("uiComp.rangeSliderCompDesc"), - categories: ["dataInputNumber"], + categories: ["dashboards"], icon: RangeSliderCompIcon, keywords: trans("uiComp.rangeSliderCompKeywords"), comp: RangeSliderComp, @@ -230,534 +228,643 @@ const uiCompMap: Registry = { h: 5, }, }, - rating: { - name: trans("uiComp.ratingCompName"), - enName: "Rating", - description: trans("uiComp.ratingCompDesc"), - categories: ["dataInputNumber"], - icon: RatingCompIcon, - keywords: trans("uiComp.ratingCompKeywords"), - comp: RatingComp, - }, - switch: { - name: trans("uiComp.switchCompName"), - enName: "Switch", - description: trans("uiComp.switchCompDesc"), - categories: ["dataInputSelect"], - icon: SwitchCompIcon, - keywords: trans("uiComp.switchCompKeywords"), - comp: SwitchComp, - }, - select: { - name: trans("uiComp.selectCompName"), - enName: "Select", - description: trans("uiComp.selectCompDesc"), - categories: ["dataInputSelect", "common"], - icon: SelectCompIcon, - keywords: trans("uiComp.selectCompKeywords"), - comp: SelectComp, - }, - multiSelect: { - name: trans("uiComp.multiSelectCompName"), - enName: "Multiselect", - description: trans("uiComp.multiSelectCompDesc"), - categories: ["dataInputSelect"], - icon: MultiSelectCompIcon, - keywords: trans("uiComp.multiSelectCompKeywords"), - comp: MultiSelectComp, + + // Layout + + responsiveLayout: { + name: trans("uiComp.responsiveLayoutCompName"), + enName: "Responsive Layout", + description: trans("uiComp.responsiveLayoutCompDesc"), + categories: ["layout"], + icon: ResponsiveLayoutCompIcon, + keywords: trans("uiComp.responsiveLayoutCompKeywords"), + comp: ResponsiveLayoutComp, + withoutLoading: true, layoutInfo: { - w: 6, - h: 5, + w: 24, + h: 25, + delayCollision: true, }, }, - cascader: { - name: trans("uiComp.cascaderCompName"), - enName: "Cascader", - description: trans("uiComp.cascaderCompDesc"), - categories: ["dataInputSelect"], - icon: CascaderCompIcon, - keywords: trans("uiComp.cascaderCompKeywords"), - comp: CascaderWithDefault, + container: { + name: trans("uiComp.containerCompName"), + enName: "Container", + description: trans("uiComp.containerCompDesc"), + categories: ["layout"], + icon: ContainerCompIcon, + keywords: trans("uiComp.containerCompKeywords"), + comp: ContainerComp, + withoutLoading: true, layoutInfo: { - w: 9, - h: 5, + w: 12, + h: 25, + // static: true, + delayCollision: true, }, + defaultDataFn: defaultContainerData, }, - checkbox: { - name: trans("uiComp.checkboxCompName"), - enName: "Checkbox", - description: trans("uiComp.checkboxCompDesc"), - categories: ["dataInputSelect"], - icon: CheckboxCompIcon, - keywords: trans("uiComp.checkboxCompKeywords"), - comp: CheckboxComp, + tabbedContainer: { + name: trans("uiComp.tabbedContainerCompName"), + enName: "Tabbed Container", + description: trans("uiComp.tabbedContainerCompDesc"), + categories: ["layout"], + icon: TabbedContainerCompIcon, + keywords: trans("uiComp.tabbedContainerCompKeywords"), + comp: TabbedContainerComp, + withoutLoading: true, layoutInfo: { - w: 5, - h: 7, + w: 12, + h: 25, + // static: true, + delayCollision: true, }, }, - radio: { - name: trans("uiComp.radioCompName"), - enName: "Radio", - description: trans("uiComp.radioCompDesc"), - categories: ["dataInputSelect"], - icon: RadioCompIcon, - keywords: trans("uiComp.radioCompKeywords"), - comp: RadioComp, + collapsibleContainer: { + name: trans("uiComp.collapsibleContainerCompName"), + enName: "Collapsible Container", + description: trans("uiComp.collapsibleContainerCompDesc"), + categories: ["layout"], + icon: CollapsibleContainerCompIcon, + keywords: trans("uiComp.collapsibleContainerCompKeywords"), + comp: ContainerComp, + withoutLoading: true, layoutInfo: { - w: 5, - h: 7, + w: 12, + h: 25, + // static: true, + delayCollision: true, }, + defaultDataFn: defaultCollapsibleContainerData, }, - segmentedControl: { - name: trans("uiComp.segmentedControlCompName"), - enName: "Segmented Control", - description: trans("uiComp.segmentedControlCompDesc"), - categories: ["dataInputSelect"], - icon: SegmentedCompIcon, - keywords: trans("uiComp.segmentedControlCompKeywords"), - comp: SegmentedControlComp, - }, - file: { - name: trans("uiComp.fileUploadCompName"), - enName: "File Upload", - description: trans("uiComp.fileUploadCompDesc"), - categories: ["dataInputSelect"], - icon: UploadCompIcon, - keywords: trans("uiComp.fileUploadCompKeywords"), - comp: FileComp, - }, - date: { - name: trans("uiComp.dateCompName"), - enName: "Date", - description: trans("uiComp.dateCompDesc"), - categories: ["dataInputDate"], - icon: DateCompIcon, - keywords: trans("uiComp.dateCompKeywords"), - comp: DatePickerComp, + listView: { + name: trans("uiComp.listViewCompName"), + enName: "List View", + icon: ListViewIcon, + description: trans("uiComp.listViewCompDesc"), + categories: ["layout"], + keywords: trans("uiComp.listViewCompKeywords"), + comp: ListViewComp, layoutInfo: { - w: 6, - h: 5, + w: 12, + h: 40, + delayCollision: true, }, + defaultDataFn: defaultListViewData, }, - dateRange: { - name: trans("uiComp.dateRangeCompName"), - enName: "Date Range", - description: trans("uiComp.dateRangeCompDesc"), - categories: ["dataInputDate"], - icon: DateRangeCompIcon, - keywords: trans("uiComp.dateRangeCompKeywords"), - comp: DateRangeComp, + grid: { + name: trans("uiComp.gridCompName"), + enName: "Grid", + icon: GridCompIcon, + description: trans("uiComp.gridCompDesc"), + categories: ["layout"], + keywords: trans("uiComp.gridCompKeywords"), + comp: GridComp, layoutInfo: { - w: 9, - h: 5, + w: 12, + h: 40, + delayCollision: true, }, + defaultDataFn: defaultGridData, }, - time: { - name: trans("uiComp.timeCompName"), - enName: "Time", - description: trans("uiComp.timeCompDesc"), - categories: ["dataInputDate"], - icon: TimeCompIcon, - keywords: trans("uiComp.timeCompKeywords"), - comp: TimePickerComp, - layoutInfo: { - w: 6, - h: 5, - }, + modal: { + name: trans("uiComp.modalCompName"), + enName: "Modal", + icon: ModalCompIcon, + description: trans("uiComp.modalCompDesc"), + categories: ["layout"], + keywords: trans("uiComp.modalCompKeywords"), + comp: ModalComp, + withoutLoading: true, }, - timeRange: { - name: trans("uiComp.timeRangeCompName"), - enName: "Time Range", - categories: ["dataInputDate"], - description: trans("uiComp.timeRangeCompDesc"), - icon: TimeRangeCompIcon, - keywords: trans("uiComp.timeRangeCompKeywords"), - comp: TimeRangeComp, + drawer: { + name: trans("uiComp.drawerCompName"), + enName: "Drawer", + description: trans("uiComp.drawerCompDesc"), + categories: ["layout"], + icon: DrawerCompIcon, + keywords: trans("uiComp.drawerCompKeywords"), + comp: DrawerComp, + withoutLoading: true, + }, + navigation: { + name: trans("uiComp.navigationCompName"), + enName: "Navigation", + description: trans("uiComp.navigationCompDesc"), + icon: NavComIcon, + categories: ["layout"], + keywords: trans("uiComp.navigationCompKeywords"), + comp: NavComp, layoutInfo: { - w: 9, + w: 24, h: 5, }, }, - button: { - name: trans("uiComp.buttonCompName"), - enName: "Button", - description: trans("uiComp.buttonCompDesc"), - categories: ["button", "common"], - icon: ButtonCompIcon, - keywords: trans("uiComp.buttonCompKeywords"), - comp: ButtonComp, + cascader: { + name: trans("uiComp.cascaderCompName"), + enName: "Cascader", + description: trans("uiComp.cascaderCompDesc"), + categories: ["layout"], + icon: CascaderCompIcon, + keywords: trans("uiComp.cascaderCompKeywords"), + comp: CascaderWithDefault, layoutInfo: { - w: 2, + w: 9, h: 5, }, - withoutLoading: true, }, link: { name: trans("uiComp.linkCompName"), enName: "Link", description: trans("uiComp.linkCompDesc"), - categories: ["button"], + categories: ["layout"], icon: LinkCompIcon, keywords: trans("uiComp.linkCompKeywords"), comp: LinkComp, }, - dropdown: { - name: trans("uiComp.dropdownCompName"), - enName: "Dropdown", - description: trans("uiComp.dropdownCompDesc"), - categories: ["button"], - icon: DropdownCompIcon, - keywords: trans("uiComp.dropdownCompKeywords"), - comp: DropdownComp, - }, - toggleButton: { - name: trans("uiComp.toggleButtonCompName"), - enName: "Toggle Button", - description: trans("uiComp.toggleButtonCompDesc"), - categories: ["button"], - icon: ToggleButtonCompIcon, - keywords: trans("uiComp.toggleButtonCompKeywords"), - comp: ToggleButtonComp, - }, - text: { - name: trans("uiComp.textCompName"), - enName: "Text", - description: trans("uiComp.textCompDesc"), - categories: ["dataDisplay", "common"], - icon: TextCompIcon, - keywords: trans("uiComp.textCompKeywords"), - comp: TextComp, - }, - table: { - name: trans("uiComp.tableCompName"), - enName: "Table", - description: trans("uiComp.tableCompDesc"), - categories: ["dataDisplay", "common"], - icon: TableCompIcon, - keywords: trans("uiComp.tableCompKeywords"), - comp: TableComp, - layoutInfo: { - w: 15, - h: 40, - }, - defaultDataFn: defaultTableData, - withoutLoading: true, - }, - image: { - name: trans("uiComp.imageCompName"), - enName: "Image", - description: trans("uiComp.imageCompDesc"), - categories: ["dataDisplay", "common"], - icon: ImageCompIcon, - keywords: trans("uiComp.imageCompKeywords"), - comp: ImageComp, - layoutInfo: { - w: 5, - h: 24, - }, - }, - progress: { - name: trans("uiComp.progressCompName"), - enName: "Progress", - description: trans("uiComp.progressCompDesc"), - categories: ["dataDisplay"], - icon: ProgressCompIcon, - keywords: trans("uiComp.progressCompKeywords"), - comp: ProgressComp, - }, - progressCircle: { - name: trans("uiComp.progressCircleCompName"), - enName: "Process Circle", - description: trans("uiComp.progressCircleCompDesc"), - categories: ["dataDisplay"], - icon: ProcessCircleCompIcon, - keywords: trans("uiComp.progressCircleCompKeywords"), - comp: ProgressCircleComp, - layoutInfo: { - w: 4, - h: 19, - }, - }, - fileViewer: { - name: trans("uiComp.fileViewerCompName"), - enName: "File Viewer", - description: trans("uiComp.fileViewerCompDesc"), - categories: ["dataDisplay"], - icon: FileViewerCompIcon, - keywords: trans("uiComp.fileViewerCompKeywords"), - comp: FileViewerComp, - }, divider: { name: trans("uiComp.dividerCompName"), enName: "Divider", description: trans("uiComp.dividerCompDesc"), - categories: ["dataDisplay"], + categories: ["layout"], icon: DividerCompIcon, keywords: trans("uiComp.dividerCompKeywords"), comp: DividerComp, layoutInfo: { - w: 14, + w: 12, h: 1, }, }, - qrCode: { - name: trans("uiComp.qrCodeCompName"), - enName: "QR Code", - description: trans("uiComp.qrCodeCompDesc"), - categories: ["dataDisplay"], - icon: QRCodeCompIcon, - keywords: trans("uiComp.qrCodeCompKeywords"), - comp: QRCodeComp, - layoutInfo: { - w: 4, - h: 19, - }, - }, - form: { - name: trans("uiComp.formCompName"), - enName: "Form", - description: trans("uiComp.formCompDesc"), - categories: ["container", "common"], - icon: FormCompIcon, - keywords: trans("uiComp.formCompKeywords"), - comp: FormComp, - withoutLoading: true, - layoutInfo: { - w: 9, - h: 31, - // static: true, - delayCollision: true, - }, - defaultDataFn: defaultFormData, - }, - jsonSchemaForm: { - name: trans("uiComp.jsonSchemaFormCompName"), - enName: "JSON Schema Form", - description: trans("uiComp.jsonSchemaFormCompDesc"), - categories: ["container"], - icon: JsonFormCompIcon, - keywords: trans("uiComp.jsonSchemaFormCompKeywords"), - comp: JsonSchemaFormComp, - layoutInfo: { - w: 8, - h: 50, - }, - }, - container: { - name: trans("uiComp.containerCompName"), - enName: "Container", - description: trans("uiComp.containerCompDesc"), - categories: ["container", "common"], - icon: ContainerCompIcon, - keywords: trans("uiComp.containerCompKeywords"), - comp: ContainerComp, - withoutLoading: true, + + // Scheduling + + calendar: { + name: trans("uiComp.calendarCompName"), + enName: "Calendar", + description: trans("uiComp.calendarCompDesc"), + categories: ["scheduling", "projectmanagement"], + icon: CalendarCompIcon, + keywords: trans("uiComp.calendarCompKeywords"), + comp: remoteComp({ ...builtInRemoteComps, compName: "calendar" }), layoutInfo: { - w: 9, - h: 25, - // static: true, - delayCollision: true, + w: 24, + h: 60, }, - defaultDataFn: defaultContainerData, }, - //ADDED BY FRED + + // Collaboration + sharingcomponent: { name: trans("meeting.sharingCompName"), enName: "Sharing", description: trans("meeting.sharingCompName"), - categories: ["meeting"], + categories: ["collaboration"], icon: VideoCompIcon, keywords: trans("meeting.meetingCompKeywords"), comp: VideoSharingStreamComp, withoutLoading: true, + layoutInfo: { + w: 12, + h: 50, + } }, videocomponent: { name: trans("meeting.videoCompName"), enName: "Video", description: trans("meeting.videoCompName"), - categories: ["meeting"], + categories: ["collaboration"], icon: VideoCompIcon, keywords: trans("meeting.meetingCompKeywords"), comp: VideoMeetingStreamComp, withoutLoading: true, - }, - controlButton: { - name: trans("meeting.meetingControlCompName"), - enName: "Controls", + layoutInfo: { + w: 6, + h: 32, + } + }, + meeting: { + name: trans("meeting.meetingCompName"), + enName: "Drawer", description: trans("meeting.meetingCompDesc"), - categories: ["meeting"], - icon: ButtonCompIcon, + categories: ["collaboration"], + icon: DrawerCompIcon, keywords: trans("meeting.meetingCompKeywords"), - comp: ControlButton, + comp: VideoMeetingControllerComp, withoutLoading: true, }, - //END - tabbedContainer: { - name: trans("uiComp.tabbedContainerCompName"), - enName: "Tabbed Container", - description: trans("uiComp.tabbedContainerCompDesc"), - categories: ["container", "common"], - icon: TabbedContainerCompIcon, - keywords: trans("uiComp.tabbedContainerCompKeywords"), - comp: TabbedContainerComp, + comment: { + name: trans("uiComp.commentCompName"), + enName: "comment", + description: trans("uiComp.commentCompDesc"), + categories: ["forms","collaboration"], + icon: CommentIcon, + keywords: trans("uiComp.commentCompKeywords"), + comp: CommentComp, + layoutInfo: { + w: 13, + h: 55, + }, + }, + mention: { + name: trans("uiComp.mentionCompName"), + enName: "mention", + description: trans("uiComp.mentionCompDesc"), + categories: ["forms","collaboration"], + icon: MentionIcon, + keywords: trans("uiComp.mentionCompKeywords"), + comp: MentionComp, + }, + + // Forms + + form: { + name: trans("uiComp.formCompName"), + enName: "Form", + description: trans("uiComp.formCompDesc"), + categories: ["forms"], + icon: FormCompIcon, + keywords: trans("uiComp.formCompKeywords"), + comp: FormComp, withoutLoading: true, layoutInfo: { - w: 9, - h: 27, + w: 12, + h: 50, // static: true, delayCollision: true, }, + defaultDataFn: defaultFormData, }, - modal: { - name: trans("uiComp.modalCompName"), - enName: "Modal", - icon: ModalCompIcon, - description: trans("uiComp.modalCompDesc"), - categories: ["container", "common"], - keywords: trans("uiComp.modalCompKeywords"), - comp: ModalComp, - withoutLoading: true, + jsonSchemaForm: { + name: trans("uiComp.jsonSchemaFormCompName"), + enName: "JSON Schema Form", + description: trans("uiComp.jsonSchemaFormCompDesc"), + categories: ["forms"], + icon: JsonFormCompIcon, + keywords: trans("uiComp.jsonSchemaFormCompKeywords"), + comp: JsonSchemaFormComp, + layoutInfo: { + w: 12, + h: 50, + }, }, - listView: { - name: trans("uiComp.listViewCompName"), - enName: "List View", - icon: ListViewIcon, - description: trans("uiComp.listViewCompDesc"), - categories: ["container", "common"], - keywords: trans("uiComp.listViewCompKeywords"), - comp: ListViewComp, + jsonEditor: { + name: trans("uiComp.jsonEditorCompName"), + enName: "JSON Editor", + description: trans("uiComp.jsonEditorCompDesc"), + categories: ["forms"], + icon: JsonEditorCompIcon, + keywords: trans("uiComp.jsonEditorCompKeywords"), + comp: JsonEditorComp, layoutInfo: { - h: 47, - w: 10, - delayCollision: true, + w: 12, + h: 50, }, - defaultDataFn: defaultListViewData, }, - grid: { - name: trans("uiComp.gridCompName"), - enName: "Grid", - icon: GridCompIcon, - description: trans("uiComp.gridCompDesc"), - categories: ["container"], - keywords: trans("uiComp.gridCompKeywords"), - comp: GridComp, + jsonExplorer: { + name: trans("uiComp.jsonExplorerCompName"), + enName: "JSON Explorer", + description: trans("uiComp.jsonExplorerCompDesc"), + categories: ["forms"], + icon: JsonExplorerCompIcon, + keywords: trans("uiComp.jsonExplorerCompKeywords"), + comp: JsonExplorerComp, layoutInfo: { - h: 32, - w: 15, - delayCollision: true, + w: 12, + h: 50, }, - defaultDataFn: defaultGridData, }, - navigation: { - name: trans("uiComp.navigationCompName"), - enName: "Navigation", - description: trans("uiComp.navigationCompDesc"), - icon: NavComIcon, - categories: ["other"], - keywords: trans("uiComp.navigationCompKeywords"), - comp: NavComp, + richTextEditor: { + name: trans("uiComp.richTextEditorCompName"), + enName: "Rich Text Editor", + categories: ["forms"], + description: trans("uiComp.richTextEditorCompDesc"), + icon: RichTextEditorCompIcon, + keywords: trans("uiComp.richTextEditorCompKeywords"), + comp: RichTextEditorComp, layoutInfo: { - w: 13, - h: 5, + w: 12, + h: 50, }, }, - iframe: { - name: trans("uiComp.iframeCompName"), - enName: "IFrame", - description: trans("uiComp.iframeCompDesc"), - icon: IFrameCompIcon, - categories: ["other"], - keywords: trans("uiComp.iframeCompKeywords"), - comp: IFrameComp, + input: { + name: trans("uiComp.inputCompName"), + enName: "Input", + description: trans("uiComp.inputCompDesc"), + categories: ["forms"], + icon: InputCompIcon, + keywords: trans("uiComp.inputCompKeywords"), + comp: InputComp, layoutInfo: { - w: 13, - h: 52, + w: 6, + h: 6, + } + }, + password: { + name: trans("uiComp.passwordCompName"), + enName: "Password", + description: trans("uiComp.passwordCompDesc"), + categories: ["forms"], + icon: PasswordCompIcon, + keywords: trans("uiComp.passwordCompKeywords"), + comp: PasswordComp, + layoutInfo: { + w: 6, + h: 6, + } + }, + numberInput: { + name: trans("uiComp.numberInputCompName"), + enName: "Number Input", + description: trans("uiComp.numberInputCompDesc"), + categories: ["forms"], + icon: NumberInputCompIcon, + keywords: trans("uiComp.numberInputCompKeywords"), + comp: NumberInputComp, + layoutInfo: { + w: 6, + h: 6, + } + }, + textArea: { + name: trans("uiComp.textAreaCompName"), + enName: "Text Area", + description: trans("uiComp.textAreaCompDesc"), + categories: ["forms"], + icon: TextAreaCompIcon, + keywords: trans("uiComp.textAreaCompKeywords"), + comp: TextAreaComp, + layoutInfo: { + w: 6, + h: 12, + } + }, + switch: { + name: trans("uiComp.switchCompName"), + enName: "Switch", + description: trans("uiComp.switchCompDesc"), + categories: ["forms"], + icon: SwitchCompIcon, + keywords: trans("uiComp.switchCompKeywords"), + comp: SwitchComp, + layoutInfo: { + w: 6, + h: 6, + } + }, + checkbox: { + name: trans("uiComp.checkboxCompName"), + enName: "Checkbox", + description: trans("uiComp.checkboxCompDesc"), + categories: ["forms"], + icon: CheckboxCompIcon, + keywords: trans("uiComp.checkboxCompKeywords"), + comp: CheckboxComp, + layoutInfo: { + w: 6, + h: 6, }, }, - custom: { - name: trans("uiComp.customCompName"), - enName: "Custom Component", - description: trans("uiComp.customCompDesc"), - icon: CustomCompIcon, - categories: ["other"], - keywords: trans("uiComp.customCompKeywords"), - comp: CustomComp, + radio: { + name: trans("uiComp.radioCompName"), + enName: "Radio", + description: trans("uiComp.radioCompDesc"), + categories: ["forms"], + icon: RadioCompIcon, + keywords: trans("uiComp.radioCompKeywords"), + comp: RadioComp, layoutInfo: { - w: 9, - h: 26, + w: 6, + h: 6, }, }, - module: { - name: trans("uiComp.moduleCompName"), - enName: "Module", - icon: CustomCompIcon, - description: trans("uiComp.moduleCompDesc"), - categories: [], - keywords: trans("uiComp.moduleCompKeywords"), - comp: ModuleComp, + date: { + name: trans("uiComp.dateCompName"), + enName: "Date", + description: trans("uiComp.dateCompDesc"), + categories: ["forms", "scheduling"], + icon: DateCompIcon, + keywords: trans("uiComp.dateCompKeywords"), + comp: DatePickerComp, layoutInfo: { - w: 9, - h: 26, + w: 6, + h: 6, }, }, - jsonExplorer: { - name: trans("uiComp.jsonExplorerCompName"), - enName: "JSON Explorer", - description: trans("uiComp.jsonExplorerCompDesc"), - categories: ["dataDisplay"], - icon: JsonExplorerCompIcon, - keywords: trans("uiComp.jsonExplorerCompKeywords"), - comp: JsonExplorerComp, + dateRange: { + name: trans("uiComp.dateRangeCompName"), + enName: "Date Range", + description: trans("uiComp.dateRangeCompDesc"), + categories: ["forms", "scheduling"], + icon: DateRangeCompIcon, + keywords: trans("uiComp.dateRangeCompKeywords"), + comp: DateRangeComp, layoutInfo: { - w: 10, - h: 47, + w: 12, + h: 6, }, }, - jsonEditor: { - name: trans("uiComp.jsonEditorCompName"), - enName: "JSON Editor", - description: trans("uiComp.jsonEditorCompDesc"), - categories: ["dataInputText"], - icon: JsonEditorCompIcon, - keywords: trans("uiComp.jsonEditorCompKeywords"), - comp: JsonEditorComp, + time: { + name: trans("uiComp.timeCompName"), + enName: "Time", + description: trans("uiComp.timeCompDesc"), + categories: ["forms", "scheduling"], + icon: TimeCompIcon, + keywords: trans("uiComp.timeCompKeywords"), + comp: TimePickerComp, layoutInfo: { - w: 10, - h: 42, + w: 6, + h: 6, }, }, - tree: { - name: trans("uiComp.treeCompName"), - enName: "Tree", - description: trans("uiComp.treeCompDesc"), - categories: ["dataDisplay"], - icon: TreeIcon, - keywords: trans("uiComp.treeCompKeywords"), - comp: TreeComp, + timeRange: { + name: trans("uiComp.timeRangeCompName"), + enName: "Time Range", + categories: ["forms", "scheduling"], + description: trans("uiComp.timeRangeCompDesc"), + icon: TimeRangeCompIcon, + keywords: trans("uiComp.timeRangeCompKeywords"), + comp: TimeRangeComp, + layoutInfo: { + w: 12, + h: 6, + }, + }, + button: { + name: trans("uiComp.buttonCompName"), + enName: "Button", + description: trans("uiComp.buttonCompDesc"), + categories: ["forms"], + icon: ButtonCompIcon, + keywords: trans("uiComp.buttonCompKeywords"), + comp: ButtonComp, + layoutInfo: { + w: 6, + h: 6, + }, + withoutLoading: true, + }, + controlButton: { + name: trans("meeting.meetingControlCompName"), + enName: "Controls", + description: trans("meeting.meetingCompDesc"), + categories: ["forms", "collaboration"], + icon: ButtonCompIcon, + keywords: trans("meeting.meetingCompKeywords"), + comp: ControlButton, + withoutLoading: true, + layoutInfo: { + w: 3, + h: 6, + }, + }, + dropdown: { + name: trans("uiComp.dropdownCompName"), + enName: "Dropdown", + description: trans("uiComp.dropdownCompDesc"), + categories: ["forms"], + icon: DropdownCompIcon, + keywords: trans("uiComp.dropdownCompKeywords"), + comp: DropdownComp, + layoutInfo: { + w: 6, + h: 6, + }, + }, + toggleButton: { + name: trans("uiComp.toggleButtonCompName"), + enName: "Toggle Button", + description: trans("uiComp.toggleButtonCompDesc"), + categories: ["forms"], + icon: ToggleButtonCompIcon, + keywords: trans("uiComp.toggleButtonCompKeywords"), + comp: ToggleButtonComp, + layoutInfo: { + w: 3, + h: 6, + }, + }, + segmentedControl: { + name: trans("uiComp.segmentedControlCompName"), + enName: "Segmented Control", + description: trans("uiComp.segmentedControlCompDesc"), + categories: ["forms"], + icon: SegmentedCompIcon, + keywords: trans("uiComp.segmentedControlCompKeywords"), + comp: SegmentedControlComp, + layoutInfo: { + w: 6, + h: 6, + }, + }, + rating: { + name: trans("uiComp.ratingCompName"), + enName: "Rating", + description: trans("uiComp.ratingCompDesc"), + categories: ["forms"], + icon: RatingCompIcon, + keywords: trans("uiComp.ratingCompKeywords"), + comp: RatingComp, + layoutInfo: { + w: 6, + h: 6, + } + }, + autocomplete: { + name: trans("uiComp.autoCompleteCompName"), + enName: "autoComplete", + description: trans("uiComp.autoCompleteCompDesc"), + categories: ["forms","collaboration"], + icon: AutoCompleteCompIcon, + keywords: cnchar + .spell(trans("uiComp.autoCompleteCompName"), "first", "low") + .toString(), + comp: AutoCompleteComp, + layoutInfo: { + w: 7, + h: 5, + }, + }, + + // Project Management + + progress: { + name: trans("uiComp.progressCompName"), + enName: "Progress", + description: trans("uiComp.progressCompDesc"), + categories: ["dashboards", "projectmanagement"], + icon: ProgressCompIcon, + keywords: trans("uiComp.progressCompKeywords"), + comp: ProgressComp, + }, + progressCircle: { + name: trans("uiComp.progressCircleCompName"), + enName: "Process Circle", + description: trans("uiComp.progressCircleCompDesc"), + categories: ["dashboards", "projectmanagement"], + icon: ProcessCircleCompIcon, + keywords: trans("uiComp.progressCircleCompKeywords"), + comp: ProgressCircleComp, + layoutInfo: { + w: 4, + h: 19, + }, + }, + + + // Document handling + + file: { + name: trans("uiComp.fileUploadCompName"), + enName: "File Upload", + description: trans("uiComp.fileUploadCompDesc"), + categories: ["documents"], + icon: UploadCompIcon, + keywords: trans("uiComp.fileUploadCompKeywords"), + comp: FileComp, + }, + fileViewer: { + name: trans("uiComp.fileViewerCompName"), + enName: "File Viewer", + description: trans("uiComp.fileViewerCompDesc"), + categories: ["documents"], + icon: FileViewerCompIcon, + keywords: trans("uiComp.fileViewerCompKeywords"), + comp: FileViewerComp, + }, + + // Multimedia + + image: { + name: trans("uiComp.imageCompName"), + enName: "Image", + description: trans("uiComp.imageCompDesc"), + categories: ["multimedia"], + icon: ImageCompIcon, + keywords: trans("uiComp.imageCompKeywords"), + comp: ImageComp, layoutInfo: { - w: 11, - h: 35, + w: 5, + h: 24, }, }, - treeSelect: { - name: trans("uiComp.treeSelectCompName"), - enName: "Tree Select", - description: trans("uiComp.treeSelectCompDesc"), - categories: ["dataInputSelect"], - icon: TreeSelectIcon, - keywords: trans("uiComp.treeSelectCompKeywords"), - comp: TreeSelectComp, + carousel: { + name: trans("uiComp.carouselCompName"), + enName: "Carousel", + description: trans("uiComp.carouselCompDesc"), + categories: ["multimedia"], + icon: CarouselCompIcon, + keywords: trans("uiComp.drawerCompKeywords"), + comp: CarouselComp, + withoutLoading: true, layoutInfo: { - w: 9, - h: 5, + w: 12, + h: 25, }, }, audio: { name: trans("uiComp.audioCompName"), enName: "Audio", description: trans("uiComp.audioCompDesc"), - categories: ["dataDisplay"], + categories: ["multimedia"], icon: AudioCompIcon, keywords: trans("uiComp.audioCompKeywords"), comp: AudioComp, @@ -770,7 +877,7 @@ const uiCompMap: Registry = { name: trans("uiComp.videoCompName"), enName: "Video", description: trans("uiComp.videoCompDesc"), - categories: ["dataDisplay"], + categories: ["multimedia"], icon: VideoCompIcon, keywords: trans("uiComp.videoCompKeywords"), comp: VideoComp, @@ -779,68 +886,17 @@ const uiCompMap: Registry = { h: 40, }, }, - drawer: { - name: trans("uiComp.drawerCompName"), - enName: "Drawer", - description: trans("uiComp.drawerCompDesc"), - categories: ["container"], - icon: DrawerCompIcon, - keywords: trans("uiComp.drawerCompKeywords"), - comp: DrawerComp, - withoutLoading: true, - }, - meeting: { - name: trans("meeting.meetingCompName"), - enName: "Drawer", - description: trans("meeting.meetingCompDesc"), - categories: ["meeting"], - icon: DrawerCompIcon, - keywords: trans("meeting.meetingCompKeywords"), - comp: VideoMeetingControllerComp, - withoutLoading: true, - }, - carousel: { - name: trans("uiComp.carouselCompName"), - enName: "Carousel", - description: trans("uiComp.carouselCompDesc"), - categories: ["dataDisplay"], - icon: CarouselCompIcon, - keywords: trans("uiComp.drawerCompKeywords"), - comp: CarouselComp, - withoutLoading: true, - layoutInfo: { - w: 11, - h: 25, - }, - }, - collapsibleContainer: { - name: trans("uiComp.collapsibleContainerCompName"), - enName: "Collapsible Container", - description: trans("uiComp.collapsibleContainerCompDesc"), - categories: ["container"], - icon: CollapsibleContainerCompIcon, - keywords: trans("uiComp.collapsibleContainerCompKeywords"), - comp: ContainerComp, - withoutLoading: true, - layoutInfo: { - w: 9, - h: 25, - // static: true, - delayCollision: true, - }, - defaultDataFn: defaultCollapsibleContainerData, - }, - chart: { - name: trans("uiComp.chartCompName"), - enName: "Chart", - description: trans("uiComp.chartCompDesc"), - categories: ["dataDisplay", "common"], - icon: ChartCompIcon, - comp: remoteComp({ ...builtInRemoteComps, compName: "chart" }), - keywords: trans("uiComp.chartCompKeywords"), + jsonLottie: { + name: trans("uiComp.jsonLottieCompName"), + enName: "Lottie Animation", + description: trans("uiComp.jsonLottieCompDesc"), + categories: ["multimedia"], + icon: LottieIcon, + keywords: trans("uiComp.jsonLottieCompKeywords"), + comp: JsonLottieComp, layoutInfo: { - w: 11, - h: 35, + w: 10, + h: 47, }, }, imageEditor: { @@ -848,7 +904,7 @@ const uiCompMap: Registry = { enName: "Image Editor", comp: remoteComp({ ...builtInRemoteComps, compName: "imageEditor" }), description: trans("uiComp.imageEditorCompDesc"), - categories: ["dataDisplay"], + categories: ["multimedia"], icon: imageEditorIcon, keywords: trans("uiComp.imageEditorCompKeywords"), layoutInfo: { @@ -856,46 +912,36 @@ const uiCompMap: Registry = { h: 60, }, }, - mermaid: { - name: trans("uiComp.mermaidCompName"), - enName: "Mermaid Charts", - comp: remoteComp({ ...builtInRemoteComps, compName: "mermaid" }), - description: trans("uiComp.mermaidCompDesc"), - categories: ["dataDisplay"], - icon: MermaidIcon, - keywords: trans("uiComp.mermaidCompKeywords"), + + // item Handling + + qrCode: { + name: trans("uiComp.qrCodeCompName"), + enName: "QR Code", + description: trans("uiComp.qrCodeCompDesc"), + categories: ["itemHandling", "documents"], + icon: QRCodeCompIcon, + keywords: trans("uiComp.qrCodeCompKeywords"), + comp: QRCodeComp, layoutInfo: { - w: 15, - h: 60, + w: 4, + h: 19, }, }, scanner: { name: trans("uiComp.scannerCompName"), enName: "Scanner", description: trans("uiComp.scannerCompDesc"), - categories: ["dataInputSelect"], + categories: ["itemHandling"], icon: ScannerIcon, keywords: trans("uiComp.scannerCompKeywords"), comp: ScannerComp, }, - calendar: { - name: trans("uiComp.calendarCompName"), - enName: "Calendar", - description: trans("uiComp.calendarCompDesc"), - categories: ["dataInputDate"], - icon: CalendarCompIcon, - keywords: trans("uiComp.calendarCompKeywords"), - comp: remoteComp({ ...builtInRemoteComps, compName: "calendar" }), - layoutInfo: { - w: 24, - h: 60, - }, - }, signature: { name: trans("uiComp.signatureCompName"), enName: "Signature", description: trans("uiComp.signatureCompDesc"), - categories: ["dataInputSelect"], + categories: ["itemHandling"], icon: SignatureIcon, keywords: trans("uiComp.signatureCompKeywords"), comp: SignatureComp, @@ -904,86 +950,109 @@ const uiCompMap: Registry = { h: 35, }, }, - //Added by Aqib Mirza - jsonLottie: { - name: trans("uiComp.jsonLottieCompName"), - enName: "Lottie Animation", - description: trans("uiComp.jsonLottieCompDesc"), - categories: ["dataDisplay"], - icon: LottieIcon, - keywords: trans("uiComp.jsonLottieCompKeywords"), - comp: JsonLottieComp, + select: { + name: trans("uiComp.selectCompName"), + enName: "Select", + description: trans("uiComp.selectCompDesc"), + categories: ["forms", "itemHandling"], + icon: SelectCompIcon, + keywords: trans("uiComp.selectCompKeywords"), + comp: SelectComp, + }, + multiSelect: { + name: trans("uiComp.multiSelectCompName"), + enName: "Multiselect", + description: trans("uiComp.multiSelectCompDesc"), + categories: ["forms", "itemHandling"], + icon: MultiSelectCompIcon, + keywords: trans("uiComp.multiSelectCompKeywords"), + comp: MultiSelectComp, layoutInfo: { - w: 10, - h: 47, + w: 6, + h: 5, }, }, - timeline: { - name: trans("uiComp.timelineCompName"), - enName: "timeline", - description: trans("uiComp.timelineCompDesc"), - categories: ["dataDisplay"], - icon: TimeLineIcon, - keywords: trans("uiComp.timelineCompKeywords"), - comp: TimeLineComp, + tree: { + name: trans("uiComp.treeCompName"), + enName: "Tree", + description: trans("uiComp.treeCompDesc"), + categories: ["layout", "itemHandling"], + icon: TreeIcon, + keywords: trans("uiComp.treeCompKeywords"), + comp: TreeComp, layoutInfo: { - w: 13, - h: 55, + w: 11, + h: 35, + }, + }, + treeSelect: { + name: trans("uiComp.treeSelectCompName"), + enName: "Tree Select", + description: trans("uiComp.treeSelectCompDesc"), + categories: ["layout", "itemHandling"], + icon: TreeSelectIcon, + keywords: trans("uiComp.treeSelectCompKeywords"), + comp: TreeSelectComp, + layoutInfo: { + w: 9, + h: 5, }, }, - comment: { - name: trans("uiComp.commentCompName"), - enName: "comment", - description: trans("uiComp.commentCompDesc"), - categories: ["dataDisplay"], - icon: CommentIcon, - keywords: trans("uiComp.commentCompKeywords"), - comp: CommentComp, + // Integration + + iframe: { + name: trans("uiComp.iframeCompName"), + enName: "IFrame", + description: trans("uiComp.iframeCompDesc"), + icon: IFrameCompIcon, + categories: ["integration"], + keywords: trans("uiComp.iframeCompKeywords"), + comp: IFrameComp, layoutInfo: { w: 13, - h: 55, + h: 52, }, }, - mention: { - name: trans("uiComp.mentionCompName"), - enName: "mention", - description: trans("uiComp.mentionCompDesc"), - categories: ["dataInputText"], - icon: MentionIcon, - keywords: trans("uiComp.mentionCompKeywords"), - comp: MentionComp, - }, - autocomplete: { - name: trans("uiComp.autoCompleteCompName"), - enName: "autoComplete", - description: trans("uiComp.autoCompleteCompDesc"), - categories: ["dataInputText"], - icon: AutoCompleteCompIcon, - keywords: cnchar - .spell(trans("uiComp.autoCompleteCompName"), "first", "low") - .toString(), - comp: AutoCompleteComp, + custom: { + name: trans("uiComp.customCompName"), + enName: "Custom Component", + description: trans("uiComp.customCompDesc"), + icon: CustomCompIcon, + categories: ["integration"], + keywords: trans("uiComp.customCompKeywords"), + comp: CustomComp, layoutInfo: { - w: 7, - h: 5, + w: 9, + h: 26, }, }, - responsiveLayout: { - name: trans("uiComp.responsiveLayoutCompName"), - enName: "Responsive Layout", - description: trans("uiComp.responsiveLayoutCompDesc"), - categories: ["container", "common"], - icon: ResponsiveLayoutCompIcon, - keywords: trans("uiComp.responsiveLayoutCompKeywords"), - comp: ResponsiveLayoutComp, - withoutLoading: true, + module: { + name: trans("uiComp.moduleCompName"), + enName: "Module", + icon: CustomCompIcon, + description: trans("uiComp.moduleCompDesc"), + categories: [], + keywords: trans("uiComp.moduleCompKeywords"), + comp: ModuleComp, layoutInfo: { - w: 15, - h: 27, - delayCollision: true, + w: 9, + h: 26, }, }, + + // mixed + + text: { + name: trans("uiComp.textCompName"), + enName: "Text", + description: trans("uiComp.textCompDesc"), + categories: ["dashboards", "layout", "multimedia"], + icon: TextCompIcon, + keywords: trans("uiComp.textCompKeywords"), + comp: TextComp, + }, + }; export function loadComps() { diff --git a/client/packages/lowcoder/src/comps/uiCompRegistry.ts b/client/packages/lowcoder/src/comps/uiCompRegistry.ts index 54d0f5d2c..f015a46db 100644 --- a/client/packages/lowcoder/src/comps/uiCompRegistry.ts +++ b/client/packages/lowcoder/src/comps/uiCompRegistry.ts @@ -23,16 +23,16 @@ export interface UICompLayoutInfo { } export const uiCompCategoryNames = { - common: trans("uiCompCategory.common"), - meeting: trans("meeting.meeting"), - dataInputText: trans("uiCompCategory.dataInputText"), - dataInputNumber: trans("uiCompCategory.dataInputNumber"), - dataInputSelect: trans("uiCompCategory.dataInputSelect"), - dataInputDate: trans("uiCompCategory.dataInputDate"), - button: trans("uiCompCategory.button"), - dataDisplay: trans("uiCompCategory.dataDisplay"), - container: trans("uiCompCategory.container"), - other: trans("uiCompCategory.other"), + dashboards: trans("uiCompCategory.dashboards"), + layout: trans("uiCompCategory.layout"), + forms: trans("uiCompCategory.forms"), + collaboration: trans("uiCompCategory.collaboration"), + projectmanagement: trans("uiCompCategory.projectmanagement"), + scheduling: trans("uiCompCategory.scheduling"), + documents: trans("uiCompCategory.documents"), + itemHandling: trans("uiCompCategory.itemHandling"), + multimedia: trans("uiCompCategory.multimedia"), + integration: trans("uiCompCategory.integration"), }; export type UICompCategory = keyof typeof uiCompCategoryNames; @@ -119,10 +119,10 @@ export type UICompType = | "calendar" | "signature" | "jsonLottie" //Added By Aqib Mirza - | "timeline" - | "comment" - | "mention" - | "autocomplete" + | "timeline" //Added By Mousheng + | "comment" //Added By Mousheng + | "mention" //Added By Mousheng + | "autocomplete" //Added By Mousheng | "responsiveLayout"; export const uiCompRegistry = {} as Record; diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index b7d9fda9f..a06f7cdf0 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -703,43 +703,46 @@ export const en = { contentTooltip: "Support for input text or HTML", }, uiCompCategory: { - common: "Commonly used", - dataInputText: "Text inputs", - dataInputNumber: "Number inputs", - dataInputSelect: "Select inputs", - dataInputDate: "Date and time inputs", - button: "Buttons", - dataDisplay: "Data", - container: "Containers and forms", - other: "Other", + dashboards: "Dashboards & Reporting", + layout: "Layout & Navigation", + forms: "Data Collection and Forms", + collaboration: "Meeting & Collaboration", + projectmanagement: "Project Management", + scheduling: "Calendar and Scheduling", + documents: "Document and File Management", + itemHandling: "Item & Signature handling", + multimedia: "Multimedia & Animation", + integration: "Integration & Extension", }, uiComp: { + autoCompleteCompName: "Auto Complete", + autoCompleteCompDesc: "Auto Complete input field", inputCompName: "Input", - inputCompDesc: "Input component", - inputCompKeywords: "text", + inputCompDesc: "Text Input field", + inputCompKeywords: "text, textinput, input", textAreaCompName: "Text Area", - textAreaCompDesc: "Text Area component", + textAreaCompDesc: "Text Area", textAreaCompKeywords: "", passwordCompName: "Password", - passwordCompDesc: "Password component", + passwordCompDesc: "Password field", passwordCompKeywords: "", richTextEditorCompName: "Rich Text Editor", - richTextEditorCompDesc: "Rich Text Editor component", - richTextEditorCompKeywords: "", + richTextEditorCompDesc: "Embeded Rich Text Editor", + richTextEditorCompKeywords: "Text editing, rich text, editor", numberInputCompName: "Number Input", - numberInputCompDesc: "Number Input component", + numberInputCompDesc: "Number Input field", numberInputCompKeywords: "", sliderCompName: "Slider", sliderCompDesc: "Slider component", sliderCompKeywords: "", rangeSliderCompName: "Range Slider", - rangeSliderCompDesc: "Range Slider component", + rangeSliderCompDesc: "Range Slider input", rangeSliderCompKeywords: "", ratingCompName: "Rating", - ratingCompDesc: "Rating component", + ratingCompDesc: "Rating display and input", ratingCompKeywords: "", switchCompName: "Switch", - switchCompDesc: "Switch component", + switchCompDesc: "Switch display and input", switchCompKeywords: "", selectCompName: "Select", selectCompDesc: "Select component", @@ -774,7 +777,7 @@ export const en = { timeRangeCompName: "Time Range", timeRangeCompDesc: "Time Range component", timeRangeCompKeywords: "", - buttonCompName: "Button", + buttonCompName: "Form Button", buttonCompDesc: "Button component", buttonCompKeywords: "", linkCompName: "Link", @@ -903,8 +906,6 @@ export const en = { mentionCompName: "mention", mentionCompDesc: "mention", mentionCompKeywords: "", - autoCompleteCompName: "autoComplete", - autoCompleteCompDesc: "autoComplete", autoCompleteCompKeywords: "", responsiveLayoutCompName: "Responsive Layout", responsiveLayoutCompDesc: "Responsive Layout", @@ -1130,7 +1131,7 @@ export const en = { suffixIcon: "Suffix icon", icon: "Icon", iconSize: "Icon size", - button: "Button", + button: "Form Button", formToSubmit: "Form to submit", default: "Default", submit: "Submit", @@ -1617,7 +1618,7 @@ export const en = { }, formComp: { containerPlaceholder: "Drag components from the right pane or", - openDialogButton: "generate form from data", + openDialogButton: "Generate a Form from your data source", resetAfterSubmit: "Reset after successful submit", initialData: "Initial data", disableSubmit: "Disable submit", @@ -1815,7 +1816,7 @@ export const en = { sliderLabel: "Slider", radioLabel: "Radio", checkboxLabel: "Checkbox", - buttonLabel: "Button", + buttonLabel: "Form Button", switch: "Switch", previewDate: "16/10/2022", previewEmail1: "ted.com", diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/index.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/index.tsx index acb399e67..b8c23ef7f 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/index.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/index.tsx @@ -18,7 +18,7 @@ type CompInfo = UICompManifest & { key: string }; const groups: Partial> = {}; Object.entries(uiCompRegistry).forEach(([key, comp]) => { - const cat = comp.categories.find((c) => c !== "common"); + const cat = comp.categories.find((c) => c !== "dashboards"); if (cat === undefined) { return; } diff --git a/client/packages/lowcoder/src/pages/ComponentPlayground/index.tsx b/client/packages/lowcoder/src/pages/ComponentPlayground/index.tsx index fe0ca19a3..348fa63c0 100644 --- a/client/packages/lowcoder/src/pages/ComponentPlayground/index.tsx +++ b/client/packages/lowcoder/src/pages/ComponentPlayground/index.tsx @@ -11,7 +11,7 @@ type CompInfo = UICompManifest & { key: string }; const groups: Partial> = {}; Object.entries(uiCompRegistry).forEach(([key, comp]) => { - const cat = comp.categories.find((c) => c !== "common"); + const cat = comp.categories.find((c) => c !== "dashboards"); if (cat === undefined) { return; } diff --git a/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx b/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx index a63b04af0..6bb6dd8da 100644 --- a/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx +++ b/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx @@ -93,7 +93,7 @@ const stateCompName = 'UICompSections'; const initialState: PropertySectionState = { [stateCompName]: {}}; Object.keys(uiCompCategoryNames).forEach((cat) => { const key = uiCompCategoryNames[cat as UICompCategory]; - initialState[stateCompName][key] = key === uiCompCategoryNames.common + initialState[stateCompName][key] = key === uiCompCategoryNames.dashboards }) export const UICompPanel = () => { @@ -145,7 +145,7 @@ export const UICompPanel = () => { const compList = useMemo( () => Object.entries(categories) - .filter(([key]) => !(!isEmpty(searchValue) && (key as UICompCategory) === "common")) + .filter(([key]) => !(!isEmpty(searchValue) && (key as UICompCategory) === "dashboards")) .map(([key, value], index) => { let infos = value; if (!isEmpty(searchValue)) {