Lowcoder
-This is the only Platform, which closes the gap between App Development, Website Development and Slide-Presentations.
+This is the only Platform, which closes the gap between App Development, Website Development, interactive Slides/Presentations and Collaboration Tools!
Create software applications (internal and customer-facing!) and Meeting/Collaboration tools for your Company and your Customers with minimal coding experience.
@@ -12,40 +12,42 @@
+
## 📢 Use Lowcoder in 3 steps
1. Connect to any data sources or APIs.
-2. Build UI with 60+ components.
+2. Build flexible and responsive UI with 100+ components and free layout / design possibilities.
3. Share with colleagues and customers.
## 💡 Why Lowcoder
-It's cumbersome to create a single app. You had to design user interfaces, write code in multiple languages and frameworks, and understand how all of that code works together.
+One platform for everything instead so many different softwares. (like Website Builders, CMS, CRM, POS, ERP, Dashboards & Data Story Visualization, Collaboration Tools).
-Low-code/No-code platforms are fast to get started with but quickly become unmaintainable and inflexible. This creates more problems than it solves.
+It's cumbersome to create a single app. You had to design user interfaces, write code in multiple languages and frameworks, and understand how all of that code works together.
NewGen Lowcode Platforms like Retool and others are great for their simplicity and flexibility - like Lowcoder too, but they can also be limited in different ways, especially when it comes to "external" applications for everyone.
Lowcoder wants to take a step forward. More specifically, Lowcoder is:
- An all-in-one IDE to create internal or customer-facing (external) apps.
-- A place to create, build and share building blocks of web applications.
+- A place to create, build and share building blocks of web applications and whole websites.
- The tool and community to support your business, and lower the cost and time to develop interactive applications.
- The only platform to embed Lowcode Apps natively in Websites (no iFrame!)
- The only platform where you can build your own Meeting Tool - like Teams, Zoom or Google Meets, - just in the Lowcode way.
+- The only platform which has extensibility plugin architecture [Check Community Contributions](https://www.npmjs.com/search?q=lowcoder-comp)
## 🪄 Features
-- **Visual UI builder** with 50+ built-in components. Save 90% of time to build apps.
-- **Modules** for reusable (!) component sets in the UI builder.
-- **Embed Lowcoder Apps as native parts of any Website** instead of iFrame (!). [Demo](https://github.com/lowcoder-org/lowcoder-sdk-demo)
+- **Visual UI builder** with 100+ built-in components. Save 90% of time to build apps.
+- **Modules** for reusable (!) embedable component sets in the UI builder.
+- **Embed Lowcoder Apps as native parts of any Website** instead of iFrame (!). [Demo](https://lowcoder.cloud/about), [Docu](https://docs.lowcoder.cloud/lowcoder-documentation/lowcoder-extension/native-embed-sdk)
- **Video Meeting Components** to create your own individual Web-Meeting tool.
- **Query Library** for reusable data queries of your data sources.
- **Custom components** to develop own components and use them in the UI builder.
- **Native Data connections** to PostgreSQL, MongoDB, MySQL, Redis, Elasticsearch, REST API, SMTP, etc.
-- **Stream Data connections** to Websockets for realtime data updates & collaboration
+- **Stream Data connections** to Websockets for realtime data updates & collaboration! [Docu](https://docs.lowcoder.cloud/lowcoder-documentation/connect-your-data/data-sources-in-lowcoder/websocket-datasource)
- **JavaScript supported everywhere** to transform data, control components, etc.
-- **Role-based access control (RBAC)** for granular permission management.
+- **Role-based access control (RBAC)** for granular permission management. [Docu](https://docs.lowcoder.cloud/lowcoder-documentation/workspaces-and-teamwork/members-and-groups)
- **Auto-saved and restorable history** for release and version control.
- **App Themes and Theme Editor** to precisely align with your company's brand guidelines.
-- **Self Hosting** to use Lowcoder in your internal company network, even behind the firewall.
+- **Self Hosting** to use Lowcoder in your internal company network, even behind the firewall. [Docu](https://docs.lowcoder.cloud/lowcoder-documentation/setup-and-run/self-hosting)
- **Free Community Cloud** to start within a minute and build your first Apps. [Start here](https://app.lowcoder.cloud)
## 🏆 Comparisons
@@ -59,6 +61,7 @@ Lowcoder wants to take a step forward. More specifically, Lowcoder is:
- Lowcoder is open-source. You don't need to worry about vendor lock-in or being stuck with an outdated version of the software.
- In Lowcoder, developers can build truly responsive apps - not as cumbersome as the "Desktop / Mobile switch" in Retool
- Lowcoder is free and you can contribute!
+- With Lowcoder you can design better Apps. More Layout & Design Components as also better support for powerful Data & Admin Dashboards.
- The EE Version of Lowcoder comes with a much better pricing model, so you have no "per-user costs".
### Lowcoder vs Appsmith, Tooljet
- Lowcoder has more components and richer configuration than Appsmith and Tooljet.
@@ -87,16 +90,24 @@ And we mean it... Day by day!
## 💻 Deployment Options
[](https://deploy.stitch.tech/lowcoder/lowcoder)
+[](https://elest.io/open-source/lowcoder)
+
You can access Lowcoder from [cloud-hosted version](https://app.lowcoder.cloud/) at any time, or use the following resources for self-host Lowcoder on different platforms:
- [Docker](https://docs.lowcoder.cloud/lowcoder-documentation/setup-and-run/self-hosting)
## 💪 Contributing
- Language support: If you have experience with a language that isn't currently supported by our product, send us a pull request.
- Create and share components or demos: If you've created something that might be useful to others, add the link here.
-- [Frontend contributing guide](https://github.com/lowcoder-org/lowcoder/tree/main/client)
+- [Contributing guide](https://docs.lowcoder.cloud/lowcoder-documentation/lowcoder-extension/opensource-contribution)
+
+Special tanks goes to [@sjhoeksma](https://github.com/sjhoeksma), [@mousheng](https://github.com/mousheng), [@mat02](https://github.com/mat02), [@jomedya](https://github.com/jomedya) and many other contributors!
## 🥇 Sponsors
Accelerate the growth of Lowcoder and unleash its potential with your Sponsorship – together, we're shaping the future of Lowcode for everyone!
[Be a Sponsor](https://github.com/sponsors/lowcoder-org)
-Like ... [@spacegoats-io](https://github.com/spacegoats-io), [@Jomedya](https://github.com/Jomedya), [@CHSchuepfer](https://github.com/CHSchuepfer), Thank you very much!!
\ No newline at end of file
+Like ... [@Darkjamin](https://github.com/Darkjamin), [@spacegoats-io](https://github.com/spacegoats-io), [@Jomedya](https://github.com/Jomedya), [@CHSchuepfer](https://github.com/CHSchuepfer), Thank you very much!!
+
+## Intro Video
+
+[](https://youtu.be/s4ltAqS0hzM?feature=shared)
\ No newline at end of file
diff --git a/client/VERSION b/client/VERSION
index a6254504e..9183195ac 100644
--- a/client/VERSION
+++ b/client/VERSION
@@ -1 +1 @@
-2.3.1
\ No newline at end of file
+2.4.0
\ No newline at end of file
diff --git a/client/config/test/jest.config.js b/client/config/test/jest.config.js
index 90fb74572..53aa19f78 100644
--- a/client/config/test/jest.config.js
+++ b/client/config/test/jest.config.js
@@ -6,14 +6,10 @@ export function currentDirName(importMetaUrl) {
return dirname(fileURLToPath(importMetaUrl));
}
-
const globals = {};
buildVars.forEach(({ name, defaultValue }) => {
globals[name] = process.env[name] || defaultValue;
});
-const edition = process.env.REACT_APP_EDITION;
-const isEEGlobal = edition === "enterprise-global";
-const isEE = edition === "enterprise" || isEEGlobal;
const currentDir = currentDirName(import.meta.url);
export default {
@@ -22,8 +18,7 @@ export default {
"react-markdown": path.resolve(currentDir, "./mocks/react-markdown.js"),
"\\.md\\?url$": path.resolve(currentDir, "./mocks/markdown-url-module.js"),
"^@lowcoder-ee(.*)$": path.resolve(
- currentDir,
- isEE ? "../../packages/lowcoder/src/ee/$1" : "../../packages/lowcoder/src/$1"
+ currentDir, "../../packages/lowcoder/src/$1"
),
"lowcoder-sdk": path.resolve(currentDir, "../../packages/lowcoder/src/index.sdk"),
},
diff --git a/client/package.json b/client/package.json
index 0034bb1d7..44087ce6a 100644
--- a/client/package.json
+++ b/client/package.json
@@ -13,7 +13,7 @@
"start": "yarn workspace lowcoder start",
"start-win": "LOWCODER_API_SERVICE_URL=http://localhost:3000 yarn start",
"start:ee": "REACT_APP_EDITION=enterprise yarn workspace lowcoder start",
- "start:ee-global": "REACT_APP_EDITION=enterprise-global yarn workspace lowcoder start",
+ "translate": "node --loader ts-node/esm ./scripts/translate.js",
"build": "yarn node ./scripts/build.js",
"test": "jest && yarn workspace lowcoder-comps test",
"prepare": "yarn workspace lowcoder prepare",
@@ -52,9 +52,9 @@
"mq-polyfill": "^1.1.8",
"prettier": "^3.1.0",
"rimraf": "^3.0.2",
- "rollup": "^2.79.0",
"shelljs": "^0.8.5",
"svgo": "^3.0.0",
+ "ts-node": "^10.4.0",
"typescript": "^4.8.4",
"whatwg-fetch": "^3.6.2"
},
@@ -76,11 +76,14 @@
"@testing-library/react": "^14.1.2",
"@testing-library/user-event": "^14.5.1",
"@types/styled-components": "^5.1.34",
- "antd-mobile": "^5.28.0",
+ "antd-mobile": "^5.34.0",
"chalk": "4",
+ "flag-icons": "^7.2.1",
"number-precision": "^1.6.0",
+ "react-countup": "^6.5.3",
"react-player": "^2.11.0",
"resize-observer-polyfill": "^1.5.1",
+ "rollup": "^4.13.0",
"simplebar": "^6.2.5",
"tui-image-editor": "^3.15.3"
}
diff --git a/client/packages/lowcoder-comps/.gitignore b/client/packages/lowcoder-comps/.gitignore
index 4df552dfa..c3bb773d5 100644
--- a/client/packages/lowcoder-comps/.gitignore
+++ b/client/packages/lowcoder-comps/.gitignore
@@ -1,3 +1,4 @@
/lib
/node_modules
+/package
*.tgz
\ No newline at end of file
diff --git a/client/packages/lowcoder-comps/package.json b/client/packages/lowcoder-comps/package.json
index 029be11e2..1c417f1d4 100644
--- a/client/packages/lowcoder-comps/package.json
+++ b/client/packages/lowcoder-comps/package.json
@@ -1,6 +1,6 @@
{
"name": "lowcoder-comps",
- "version": "0.0.27",
+ "version": "2.4.5",
"type": "module",
"license": "MIT",
"dependencies": {
@@ -10,13 +10,17 @@
"@fullcalendar/interaction": "^6.1.6",
"@fullcalendar/list": "^6.1.9",
"@fullcalendar/moment": "^6.1.6",
+ "@fullcalendar/multimonth": "^6.1.6",
"@fullcalendar/react": "^6.1.6",
"@fullcalendar/resource": "^6.1.11",
"@fullcalendar/resource-timegrid": "^6.1.11",
"@fullcalendar/resource-timeline": "^6.1.11",
"@fullcalendar/timegrid": "^6.1.6",
+ "@fullcalendar/timeline": "^6.1.6",
"@types/react": "^18.2.45",
"@types/react-dom": "^18.2.18",
+ "agora-rtc-sdk-ng": "^4.20.2",
+ "agora-rtm-sdk": "^1.5.1",
"big.js": "^6.2.1",
"echarts-extension-gmap": "^1.6.0",
"echarts-wordcloud": "^2.1.0",
@@ -30,19 +34,27 @@
"lowcoder": {
"description": "",
"comps": {
- "chart": {
- "name": "Chart",
- "icon": "./icons/icon-chart.svg",
+ "meetingController": {
+ "name": "Agora Meeting Controller",
+ "icon": "./icons/icon-comp-calendar.svg",
+ "layoutInfo": {
+ "w": 1,
+ "h": 1
+ }
+ },
+ "meetingSharing": {
+ "name": "Agora Meeting Sharing",
+ "icon": "./icons/icon-comp-calendar.svg",
"layoutInfo": {
- "w": 15,
+ "w": 6,
"h": 40
}
},
- "imageEditor": {
- "name": "Image Editor",
- "icon": "./icons/icon-chart.svg",
+ "meetingStream": {
+ "name": "Video Stream",
+ "icon": "./icons/icon-comp-calendar.svg",
"layoutInfo": {
- "w": 15,
+ "w": 6,
"h": 40
}
},
@@ -50,17 +62,137 @@
"name": "Calendar",
"icon": "./icons/icon-comp-calendar.svg",
"layoutInfo": {
- "w": 15,
+ "w": 19,
"h": 60
}
},
+ "chart": {
+ "name": "Chart",
+ "icon": "./icons/icon-chart.svg",
+ "layoutInfo": {
+ "w": 12,
+ "h": 40
+ }
+ },
+ "basicChart": {
+ "name": "Basic Chart",
+ "icon": "./icons/icon-chart.svg",
+ "layoutInfo": {
+ "w": 12,
+ "h": 40
+ }
+ },
+ "imageEditor": {
+ "name": "Image Editor",
+ "icon": "./icons/icon-chart.svg",
+ "layoutInfo": {
+ "w": 12,
+ "h": 40
+ }
+ },
"mermaid": {
"name": "Mermaid",
"icon": "./icons/mermaidchart.svg",
"layoutInfo": {
- "w": 15,
+ "w": 12,
+ "h": 40
+ }
+ },
+ "funnelChart": {
+ "name": "Funnel Chart",
+ "icon": "./icons/icon-chart.svg",
+ "layoutInfo": {
+ "w": 12,
+ "h": 40
+ }
+ },
+ "gaugeChart": {
+ "name": "Gauge Chart",
+ "icon": "./icons/icon-chart.svg",
+ "layoutInfo": {
+ "w": 12,
+ "h": 40
+ }
+ },
+ "sankeyChart": {
+ "name": "Sankey Chart",
+ "icon": "./icons/icon-chart.svg",
+ "layoutInfo": {
+ "w": 12,
"h": 40
}
+ },
+ "candleStickChart": {
+ "name": "CandleStick Chart",
+ "icon": "./icons/icon-chart.svg",
+ "layoutInfo": {
+ "w": 12,
+ "h": 40
+ }
+ },
+ "radarChart": {
+ "name": "Radar Chart",
+ "icon": "./icons/icon-chart.svg",
+ "layoutInfo": {
+ "w": 12,
+ "h": 40
+ }
+ },
+ "heatmapChart": {
+ "name": "Heatmap Chart",
+ "icon": "./icons/icon-chart.svg",
+ "layoutInfo": {
+ "w": 12,
+ "h": 40
+ }
+ },
+ "graphChart": {
+ "name": "Graph Chart",
+ "icon": "./icons/icon-chart.svg",
+ "layoutInfo": {
+ "w": 12,
+ "h": 40
+ }
+ },
+ "treeChart": {
+ "name": "Tree Chart",
+ "icon": "./icons/icon-chart.svg",
+ "layoutInfo": {
+ "w": 12,
+ "h": 40
+ }
+ },
+ "treemapChart": {
+ "name": "Treemap Chart",
+ "icon": "./icons/icon-chart.svg",
+ "layoutInfo": {
+ "w": 12,
+ "h": 40
+ }
+ },
+ "sunburstChart": {
+ "name": "Sunburst Chart",
+ "icon": "./icons/icon-chart.svg",
+ "layoutInfo": {
+ "w": 12,
+ "h": 40
+ }
+ },
+ "themeriverChart": {
+ "name": "Themeriver Chart",
+ "icon": "./icons/icon-chart.svg",
+ "layoutInfo": {
+ "w": 12,
+ "h": 40
+ }
+ },
+ "chartsGeoMap": {
+ "name": "chartsGeoMap",
+ "icon": "./icons/icon-chart.svg",
+ "layoutInfo": {
+ "w": 19,
+ "h": 60
+ }
}
}
},
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/meetingControlerUtils.tsx b/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/meetingControlerUtils.tsx
similarity index 89%
rename from client/packages/lowcoder/src/comps/comps/meetingComp/meetingControlerUtils.tsx
rename to client/packages/lowcoder-comps/src/comps/agoraMeetingComp/meetingControlerUtils.tsx
index 81b11f622..10e685faf 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/meetingControlerUtils.tsx
+++ b/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/meetingControlerUtils.tsx
@@ -1,6 +1,7 @@
import { CheckBox, controlItem, Switch, SwitchWrapper } from "lowcoder-design";
import { ReactNode } from "react";
-import { ControlParams, SimpleComp } from "@lowcoder-ee/index.sdk";
+import { ControlParams } from "comps/controls/controlParams";
+import { SimpleComp } from "lowcoder-core";
export class BoolShareVideoControl extends SimpleCompMeeting Component is not available. It needs Lowcoder from Version v2.4
;
+
+if (typeof ContainerCompBuilder === 'function') {
+
+let MTComp = (function () {
+ return new ContainerCompBuilder(
+ meetingControllerChildren, (props: any, dispatch: any) => {
+
+ const isTopBom = ["top", "bottom"].includes(props.placement);
+ const { items, ...otherContainerProps } = props.container;
+ // const userViewMode = useUserViewMode();
+ // const resizable = !userViewMode && (!isTopBom || !props.autoHeight);
+ const onResizeStop = useCallback(
+ (
+ e: React.SyntheticEvent,
+ node: HTMLElement,
+ size: { width: number; height: number },
+ handle: ResizeHandle
+ ) => {
+ isTopBom
+ ? dispatch(changeChildAction("height", size.height, true))
+ : dispatch(changeChildAction("width", size.width, true));
+ },
+ [dispatch, isTopBom]
+ );
+ const [userIds, setUserIds] = useState
);
})
- .setPropertyViewFn((children) => (
+ .setPropertyViewFn((children: any) => (
<>
{children.userId.propertyView({ label: trans("meeting.videoId") })}
-
+
{children.profileImageUrl.propertyView({
label: trans("meeting.profileImageUrl"),
- placeholder: "https://api.dicebear.com/7.x/fun-emoji/svg?seed=Peanut&radius=50&backgroundColor=transparent&randomizeIds=true&eyes=wink,sleepClose",
+ placeholder:
+ "https://api.dicebear.com/7.x/fun-emoji/svg?seed=Peanut&radius=50&backgroundColor=transparent&randomizeIds=true&eyes=wink,sleepClose",
})}
- {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+ {/* {(useContext(EditorContext).editorModeStatus === "logic" ||
+ useContext(EditorContext).editorModeStatus === "both") && (
{children.onEvent.getPropertyView()}
{hiddenPropertyView(children)}
)}
- {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
- <>
- {children.autoHeight.getPropertyView()}
-
-
- {children.profilePadding.propertyView({
- label: "Profile Image Padding",
- })}
- {children.profileBorderRadius.propertyView({
- label: "Profile Image Border Radius",
- })}
- {children.videoAspectRatio.propertyView({
- label: "Video Aspect Ratio",
- })}
- {children.style.getPropertyView()}
-
-
- )}
+ {(useContext(EditorContext).editorModeStatus === "layout" ||
+ useContext(EditorContext).editorModeStatus === "both") && (
+ <> */}
+
+ {children.autoHeight.getPropertyView()}
+
+
+ {children.profilePadding.propertyView({
+ label: "Profile Image Padding",
+ })}
+ {children.profileBorderRadius.propertyView({
+ label: "Profile Image Border Radius",
+ })}
+ {children.videoAspectRatio.propertyView({
+ label: "Video Aspect Ratio",
+ })}
+ {children.style.getPropertyView()}
+
+ {/* */}
+ {/* )} */}
))
.build();
})();
VideoCompBuilder = class extends VideoCompBuilder {
- override autoHeight(): boolean {
+ autoHeight(): boolean {
return this.children.autoHeight.getView();
}
};
export const VideoMeetingStreamComp = withExposingConfigs(VideoCompBuilder, [
- new NameConfig("loading", trans("button.loadingDesc")),
+ new NameConfig("loading", trans("meeting.loadingDesc")),
new NameConfig("profileImageUrl", trans("meeting.profileImageUrl")),
- ...CommonNameConfig,
+ ...CommonNameConfig,
]);
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoSharingStreamComp.tsx b/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoSharingStreamComp.tsx
similarity index 69%
rename from client/packages/lowcoder/src/comps/comps/meetingComp/videoSharingStreamComp.tsx
rename to client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoSharingStreamComp.tsx
index 192a09ed4..35b94ebdf 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoSharingStreamComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoSharingStreamComp.tsx
@@ -1,29 +1,26 @@
-import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
-import { EditorContext } from "comps/editorState";
-import { withDefault } from "comps/generators";
-import { UICompBuilder } from "comps/generators/uiCompBuilder";
-import ReactResizeDetector from "react-resize-detector";
import {
+ NameConfig,
+ withDefault,
+ withExposingConfigs,
+ StringControl,
Section,
sectionNames,
-} from "lowcoder-design";
-import { trans } from "i18n";
-import styled from "styled-components";
-import {
+ AutoHeightControl,
+ EditorContext,
+ styled,
+ MeetingEventHandlerControl,
+ BoolCodeControl,
+ RefControl,
+ stringExposingStateControl,
+ UICompBuilder,
CommonNameConfig,
- NameConfig,
- withExposingConfigs,
-} from "../../generators/withExposing";
-import { ButtonStyleControl } from "./videobuttonCompConstants";
-import { RefControl } from "comps/controls/refControl";
+} from "lowcoder-sdk";
import { useEffect, useRef, useState } from "react";
-import { AutoHeightControl } from "comps/controls/autoHeightControl";
-import { client } from "./videoMeetingControllerComp";
-import { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
-import { useContext } from "react";
-import { MeetingEventHandlerControl } from "comps/controls/eventHandlerControl";
-import { stringExposingStateControl } from "comps/controls/codeStateControl";
-import { hiddenPropertyView } from "comps/utils/propertyUtils";
+import { client } from "./meetingControllerComp";
+import type { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
+import { trans } from "../../i18n/comps";
+import ReactResizeDetector from "react-resize-detector";
+import { ButtonStyleControl } from "./videobuttonCompConstants";
const VideoContainer = styled.video`
height: 100%;
@@ -42,13 +39,13 @@ const sharingStreamChildren = {
disabled: BoolCodeControl,
loading: BoolCodeControl,
style: ButtonStyleControl,
- viewRef: RefControl,
+ viewRef: RefControl,
userId: withDefault(stringExposingStateControl(""), "{{meeting1.localUser}}"),
noVideoText: stringExposingStateControl(trans("meeting.noVideo")),
};
let SharingCompBuilder = (function () {
- return new UICompBuilder(sharingStreamChildren, (props) => {
+ return new UICompBuilder(sharingStreamChildren, (props: any) => {
const videoRef = useRef(null);
const conRef = useRef(null);
const [userId, setUserId] = useState();
@@ -95,8 +92,6 @@ let SharingCompBuilder = (function () {
client.on(
"user-unpublished",
(user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
- // console.log("user-unpublished");
-
if (mediaType === "audio") {
if (
!user.hasAudio &&
@@ -130,7 +125,7 @@ let SharingCompBuilder = (function () {
return (
- {(editorState) => (
+ {(editorState: any) => (
{userId ? (
@@ -161,7 +156,7 @@ let SharingCompBuilder = (function () {
) : (
<>
)}
- {/*
*/}
+ {userName ?? ""}
-