diff --git a/client/packages/lowcoder/src/comps/comps/iconComp.tsx b/client/packages/lowcoder/src/comps/comps/iconComp.tsx index 990f8531c..35d638f32 100644 --- a/client/packages/lowcoder/src/comps/comps/iconComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/iconComp.tsx @@ -41,9 +41,9 @@ const Container = styled.div<{ ${(props) => props.$style && css` - height: calc(100% - ${props.$style.margin}); - width: calc(100% - ${props.$style.margin}); - padding: ${props.$style.padding}; + height: calc(100% - ${props.$style.margin ?? '0px'}); + width: calc(100% - ${props.$style.margin ?? '0px'}); + padding: ${props.$style.padding ?? '0px'}; margin: ${props.$style.margin}; border: ${props.$style.borderWidth} solid ${props.$style.border}; border-radius: ${props.$style.radius}; diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx index 6bdf5c242..9a7a0d43b 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx @@ -1,22 +1,16 @@ +import { styleControl } from "@lowcoder-ee/comps/controls/styleControl"; +import { ButtonStyle } from "@lowcoder-ee/comps/controls/styleControlConstants"; +import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators"; +import { refMethods } from "@lowcoder-ee/comps/generators/withMethodExposing"; +import { blurMethod, clickMethod, focusWithOptions } from "@lowcoder-ee/comps/utils/methodUtils"; import { default as Button } from "antd/es/button"; -import { - styleControl, - ButtonStyleType, - ButtonStyle, - migrateOldData, - refMethods, - blurMethod, - clickMethod, - focusWithOptions, - genActiveColor, - genHoverColor, -} from "lowcoder-sdk"; +import { genActiveColor, genHoverColor } from "components/colorSelect/colorUtils"; import styled, { css } from "styled-components"; // import { genActiveColor, genHoverColor } from "lowcoder-design"; export function getButtonStyle(buttonStyle: any) { - const hoverColor = genHoverColor(buttonStyle.background); - const activeColor = genActiveColor(buttonStyle.background); + const hoverColor = buttonStyle.background && genHoverColor(buttonStyle.background); + const activeColor = buttonStyle.background && genActiveColor(buttonStyle.background); return css` &&& { border-radius: ${buttonStyle.radius}; diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/FloatButton.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/FloatButton.tsx index 3e94f40db..252e3d782 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/FloatButton.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/FloatButton.tsx @@ -3,54 +3,72 @@ import { trans } from "i18n"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; +const buttons = { + "manual": [ + { + "id": 0, + "label": "Option 1", + "badge": "1", + "description": "", + "icon": "/icon:antd/filetextoutlined" + }, + { + "id": 1, + "label": "Option 2", + "badge": "0", + "description": "", + "icon": "/icon:antd/filetextoutlined" + } + ] +}; + export default function FloatButtonExample() { return ( <> + + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/IconButton.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/IconButton.tsx index 666e1ab68..67a3fad0d 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/IconButton.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/IconButton.tsx @@ -1,4 +1,4 @@ -import { IconComp } from "comps/comps/iconComp"; +import { ControlButton } from "comps/comps/meetingComp/controlButton"; import { trans } from "i18n"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; @@ -8,59 +8,110 @@ export default function IconButtonExample() { <> + - + + + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx new file mode 100644 index 000000000..6370df675 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx @@ -0,0 +1,25 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["calendar"].comp; + +export default function CalendarExample() { + return ( + <> + + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChart.tsx new file mode 100644 index 000000000..75a9e7de9 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChart.tsx @@ -0,0 +1,360 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["basicChart"].comp; + +const defaultDataSource = [ + { + date: "2021-09", + department: "Administration", + spending: 9003, + budget: 8000, + }, + { + date: "2021-09", + department: "Finance", + spending: 3033, + budget: 4000, + }, + { + date: "2021-09", + department: "Sales", + spending: 9230, + budget: 8000, + }, + { + date: "2021-10", + department: "Administration", + spending: 13032, + budget: 15000, + }, + { + date: "2021-10", + department: "Finance", + spending: 2300, + budget: 5000, + }, + { + date: "2021-10", + department: "Sales", + spending: 7323.5, + budget: 8000, + }, + { + date: "2021-11", + department: "Administration", + spending: 13000, + budget: 16023, + }, + { + date: "2021-11", + department: "Finance", + spending: 3569.5, + budget: 3000, + }, + { + date: "2021-11", + department: "Sales", + spending: 10000, + budget: 9932, + }, + { + date: "2021-12", + department: "Administration", + spending: 18033, + budget: 20000, + }, + { + date: "2021-12", + department: "Finance", + spending: 4890, + budget: 4500, + }, + { + date: "2021-12", + department: "Sales", + spending: 9322, + budget: 8000, + }, +]; + +const defaultEchartsJsonOption = { + title: { + text: "Funnel Chart", + left: "center", + }, + backgroundColor: "#ffffff", + color: chartColorPalette, + tooltip: { + trigger: "item", + formatter: "{a}
{b} : {c}%", + }, + legend: { + data: ["Show", "Click", "Visit", "Query", "Buy"], + top: "bottom", + }, + series: [ + { + name: "Funnel", + type: "funnel", + left: "10%", + top: 60, + bottom: 60, + width: "80%", + min: 0, + max: 100, + gap: 2, + label: { + show: true, + position: "inside", + }, + data: [ + { value: 100, name: "Show" }, + { value: 80, name: "Click" }, + { value: 60, name: "Visit" }, + { value: 40, name: "Query" }, + { value: 20, name: "Buy" }, + ], + }, + ], +}; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function ChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + columnName: "spending", + seriesName: "Spending", + hide: false, + dataIndex: "b498129d", + }, + { + columnName: "budget", + seriesName: "Budget", + hide: false, + dataIndex: "663942bf", + }, + ]; + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChartLegacy.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChartLegacy.tsx new file mode 100644 index 000000000..1e771dc5e --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChartLegacy.tsx @@ -0,0 +1,380 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["basicChart"].comp; + +const defaultDataSource = [ + { + date: "2021-09", + department: "Administration", + spending: 9003, + budget: 8000, + }, + { + date: "2021-09", + department: "Finance", + spending: 3033, + budget: 4000, + }, + { + date: "2021-09", + department: "Sales", + spending: 9230, + budget: 8000, + }, + { + date: "2021-10", + department: "Administration", + spending: 13032, + budget: 15000, + }, + { + date: "2021-10", + department: "Finance", + spending: 2300, + budget: 5000, + }, + { + date: "2021-10", + department: "Sales", + spending: 7323.5, + budget: 8000, + }, + { + date: "2021-11", + department: "Administration", + spending: 13000, + budget: 16023, + }, + { + date: "2021-11", + department: "Finance", + spending: 3569.5, + budget: 3000, + }, + { + date: "2021-11", + department: "Sales", + spending: 10000, + budget: 9932, + }, + { + date: "2021-12", + department: "Administration", + spending: 18033, + budget: 20000, + }, + { + date: "2021-12", + department: "Finance", + spending: 4890, + budget: 4500, + }, + { + date: "2021-12", + department: "Sales", + spending: 9322, + budget: 8000, + }, +]; + +const defaultEchartsJsonOption = { + title: { + text: "Funnel Chart", + left: "center", + }, + backgroundColor: "#ffffff", + color: chartColorPalette, + tooltip: { + trigger: "item", + formatter: "{a}
{b} : {c}%", + }, + legend: { + data: ["Show", "Click", "Visit", "Query", "Buy"], + top: "bottom", + }, + series: [ + { + name: "Funnel", + type: "funnel", + left: "10%", + top: 60, + bottom: 60, + width: "80%", + min: 0, + max: 100, + gap: 2, + label: { + show: true, + position: "inside", + }, + data: [ + { value: 100, name: "Show" }, + { value: 80, name: "Click" }, + { value: 60, name: "Visit" }, + { value: 40, name: "Query" }, + { value: 20, name: "Buy" }, + ], + }, + ], +}; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function ChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + columnName: "spending", + seriesName: "Spending", + hide: false, + dataIndex: "b498129d", + }, + { + columnName: "budget", + seriesName: "Budget", + hide: false, + dataIndex: "663942bf", + }, + ]; + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/CandleStickChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/CandleStickChart.tsx new file mode 100644 index 000000000..544055abe --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/CandleStickChart.tsx @@ -0,0 +1,170 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["candleStickChart"].comp; + +const defaultEchartsJsonOption = { + "xAxis": { + "data": [ + "Day 1", + "Day 2", + "Day 3", + "Day 4", + "Day 5" + ] + }, + "data": [ + [ + 150, + 100, + 50, + 200 + ], + [ + 120, + 220, + 80, + 180 + ], + [ + 80, + 150, + 60, + 130 + ], + [ + 230, + 130, + 110, + 190 + ], + [ + 90, + 180, + 70, + 160 + ] + ] +}; + +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function CandleStickChartExample() { + const blackListConfig: string[] = ["echartsOption"]; + return ( + <> + + + + + + + + + + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/Drawer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/Drawer.tsx new file mode 100644 index 000000000..e6d9806ef --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/Drawer.tsx @@ -0,0 +1,116 @@ +import { DrawerComp } from "comps/hooks/drawerComp"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const container= { + "layout": { + "66becc94": { + "i": "66becc94", + "h": 6, + "w": 19, + "x": 2, + "y": 0, + "pos": 0 + }, + "735d7cd0": { + "i": "735d7cd0", + "h": 6, + "w": 4, + "x": 12, + "y": 6, + "pos": 1 + }, + "97e5bad5": { + "i": "97e5bad5", + "h": 6, + "w": 4, + "x": 16, + "y": 6, + "pos": 1 + } + }, + "items": { + "66becc94": { + "compType": "text", + "comp": { + "text": "### Would you like to save the changes?", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "left", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "text1" + }, + "97e5bad5": { + "compType": "button", + "comp": { + "text": "No", + "type": "", + "form": "", + "style": { + "background": "#E60202" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "button1" + }, + "735d7cd0": { + "compType": "button", + "comp": { + "text": "Yes", + "type": "", + "form": "", + "style": { + "background": "#1C8701" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "button2" + } + } +}; + +export default function DrawerExample() { + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/FunnelChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/FunnelChart.tsx new file mode 100644 index 000000000..424b8a102 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/FunnelChart.tsx @@ -0,0 +1,306 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["funnelChart"].comp; + +export default function FunnelChartExample() { + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx new file mode 100644 index 000000000..5107be785 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx @@ -0,0 +1,25 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["ganttChart"].comp; + +export default function GanttChartExample() { + return ( + <> + + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx new file mode 100644 index 000000000..7a57ee549 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx @@ -0,0 +1,72 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["gaugeChart"].comp; + +export default function GaugeChartExample() { + return ( + <> + + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GeoMapChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GeoMapChart.tsx new file mode 100644 index 000000000..dd6bf3fb5 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GeoMapChart.tsx @@ -0,0 +1,51 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["chartsGeoMap"].comp; + +const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; + +const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function GeoMapChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + "columnName": "spending", + "seriesName": "Spending", + "dataIndex": "f011b34c" + }, + { + "columnName": "budget", + "seriesName": "Budget", + "dataIndex": "30e02269" + } +]; + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GraphChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GraphChart.tsx new file mode 100644 index 000000000..3024a613b --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GraphChart.tsx @@ -0,0 +1,51 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["graphChart"].comp; + +const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; + +const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function GraphChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + "columnName": "spending", + "seriesName": "Spending", + "dataIndex": "f011b34c" + }, + { + "columnName": "budget", + "seriesName": "Budget", + "dataIndex": "30e02269" + } +]; + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HeatmapChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HeatmapChart.tsx new file mode 100644 index 000000000..c2a60b7eb --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HeatmapChart.tsx @@ -0,0 +1,51 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["heatmapChart"].comp; + +const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; + +const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function HeatmapChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + "columnName": "spending", + "seriesName": "Spending", + "dataIndex": "f011b34c" + }, + { + "columnName": "budget", + "seriesName": "Budget", + "dataIndex": "30e02269" + } +]; + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HillChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HillChart.tsx new file mode 100644 index 000000000..09d371666 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HillChart.tsx @@ -0,0 +1,25 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["hillchart"].comp; + +export default function HillChartExample() { + return ( + <> + + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/MermaidChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/MermaidChart.tsx new file mode 100644 index 000000000..e27c85d4d --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/MermaidChart.tsx @@ -0,0 +1,51 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["mermaid"].comp; + +const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; + +const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function MermaidChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + "columnName": "spending", + "seriesName": "Spending", + "dataIndex": "f011b34c" + }, + { + "columnName": "budget", + "seriesName": "Budget", + "dataIndex": "30e02269" + } +]; + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/Modal.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/Modal.tsx new file mode 100644 index 000000000..dfc05897e --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/Modal.tsx @@ -0,0 +1,116 @@ +import { ModalComp } from "comps/hooks/modalComp"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const container= { + "layout": { + "66becc94": { + "i": "66becc94", + "h": 6, + "w": 19, + "x": 2, + "y": 0, + "pos": 0 + }, + "735d7cd0": { + "i": "735d7cd0", + "h": 6, + "w": 4, + "x": 12, + "y": 6, + "pos": 1 + }, + "97e5bad5": { + "i": "97e5bad5", + "h": 6, + "w": 4, + "x": 16, + "y": 6, + "pos": 1 + } + }, + "items": { + "66becc94": { + "compType": "text", + "comp": { + "text": "### Would you like to save the changes?", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "left", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "text1" + }, + "97e5bad5": { + "compType": "button", + "comp": { + "text": "No", + "type": "", + "form": "", + "style": { + "background": "#E60202" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "button1" + }, + "735d7cd0": { + "compType": "button", + "comp": { + "text": "Yes", + "type": "", + "form": "", + "style": { + "background": "#1C8701" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "button2" + } + } +}; + +export default function ModalExample() { + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/OpenLayersGeoMap.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/OpenLayersGeoMap.tsx new file mode 100644 index 000000000..306871822 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/OpenLayersGeoMap.tsx @@ -0,0 +1,51 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["openLayersGeoMap"].comp; + +const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; + +const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function OpenLayersGeoMapChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + "columnName": "spending", + "seriesName": "Spending", + "dataIndex": "f011b34c" + }, + { + "columnName": "budget", + "seriesName": "Budget", + "dataIndex": "30e02269" + } +]; + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/RadarChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/RadarChart.tsx new file mode 100644 index 000000000..662ece815 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/RadarChart.tsx @@ -0,0 +1,51 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["radarChart"].comp; + +const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; + +const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function RadarChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + "columnName": "spending", + "seriesName": "Spending", + "dataIndex": "f011b34c" + }, + { + "columnName": "budget", + "seriesName": "Budget", + "dataIndex": "30e02269" + } +]; + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SankeyChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SankeyChart.tsx new file mode 100644 index 000000000..c169e7b37 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SankeyChart.tsx @@ -0,0 +1,51 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["sankeyChart"].comp; + +const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; + +const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function SankeyChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + "columnName": "spending", + "seriesName": "Spending", + "dataIndex": "f011b34c" + }, + { + "columnName": "budget", + "seriesName": "Budget", + "dataIndex": "30e02269" + } +]; + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SunburstChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SunburstChart.tsx new file mode 100644 index 000000000..c04aec9d4 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SunburstChart.tsx @@ -0,0 +1,51 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["sunburstChart"].comp; + +const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; + +const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function SunburstChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + "columnName": "spending", + "seriesName": "Spending", + "dataIndex": "f011b34c" + }, + { + "columnName": "budget", + "seriesName": "Budget", + "dataIndex": "30e02269" + } +]; + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/ThemeRiverChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/ThemeRiverChart.tsx new file mode 100644 index 000000000..b8dbe29d8 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/ThemeRiverChart.tsx @@ -0,0 +1,51 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["themeriverChart"].comp; + +const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; + +const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function ThemeRiverChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + "columnName": "spending", + "seriesName": "Spending", + "dataIndex": "f011b34c" + }, + { + "columnName": "budget", + "seriesName": "Budget", + "dataIndex": "30e02269" + } +]; + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreeChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreeChart.tsx new file mode 100644 index 000000000..b0d10650f --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreeChart.tsx @@ -0,0 +1,51 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["treeChart"].comp; + +const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; + +const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function TreeChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + "columnName": "spending", + "seriesName": "Spending", + "dataIndex": "f011b34c" + }, + { + "columnName": "budget", + "seriesName": "Budget", + "dataIndex": "30e02269" + } +]; + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreemapChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreemapChart.tsx new file mode 100644 index 000000000..35fdc1804 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreemapChart.tsx @@ -0,0 +1,51 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["treemapChart"].comp; + +const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; + +const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function TreemapChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + "columnName": "spending", + "seriesName": "Spending", + "dataIndex": "f011b34c" + }, + { + "columnName": "budget", + "seriesName": "Budget", + "dataIndex": "30e02269" + } +]; + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx index 7aaec0c2e..e6a59383c 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx @@ -2,6 +2,269 @@ import { ColumnLayoutComp } from "comps/comps/columnLayout/columnLayout"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; +const columns={ + "manual": [ + { + "id": 0, + "label": "Column1", + "key": "Column1", + "minWidth": "", + "background": "", + "backgroundImage": "", + "border": "", + "radius": "", + "margin": "", + "padding": "" + }, + { + "id": 1, + "label": "Column2", + "key": "Column2", + "minWidth": "", + "background": "", + "backgroundImage": "", + "border": "", + "radius": "", + "margin": "", + "padding": "" + }, + { + "id": 2, + "label": "Add Column1", + "key": "Add Column1", + "minWidth": "", + "background": "", + "backgroundImage": "", + "border": "", + "radius": "", + "margin": "", + "padding": "" + }, + { + "id": 3, + "label": "Add Column2", + "key": "Add Column2", + "minWidth": "", + "background": "", + "backgroundImage": "", + "border": "", + "radius": "", + "margin": "", + "padding": "" + }, + { + "id": 4, + "label": "Add Column3", + "key": "Add Column3", + "minWidth": "", + "background": "", + "backgroundImage": "", + "border": "", + "radius": "", + "margin": "", + "padding": "" + }, + { + "id": 5, + "label": "Add Column4", + "key": "Add Column4", + "minWidth": "", + "background": "", + "backgroundImage": "", + "border": "", + "radius": "", + "margin": "", + "padding": "" + } + ] +}; + +const container={ + "0": { + "layout": { + "d131aa12": { + "i": "d131aa12", + "h": 6, + "w": 17, + "x": 4, + "y": 5, + "pos": 1 + } + }, + "items": { + "d131aa12": { + "compType": "progress", + "comp": { + "value": "60", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "progress1" + } + } + }, + "1": { + "layout": { + "e193cd76": { + "i": "e193cd76", + "h": 6, + "w": 24, + "x": 0, + "y": 5, + "pos": 0 + } + }, + "items": { + "e193cd76": { + "compType": "button", + "comp": { + "text": "Button", + "type": "", + "form": "", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "button1" + } + } + }, + "2": { + "layout": { + "1d3eac41": { + "i": "1d3eac41", + "h": 7, + "w": 21, + "x": 1, + "y": 5, + "pos": 0 + } + }, + "items": { + "1d3eac41": { + "compType": "switch", + "comp": { + "defaultValue": "", + "value": "", + "label": { + "text": "Switch", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "left" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "switch1" + } + } + }, + "3": { + "layout": { + "5853c1f5": { + "i": "5853c1f5", + "h": 20, + "w": 15, + "x": 5, + "y": 0, + "pos": 0 + } + }, + "items": { + "5853c1f5": { + "compType": "progressCircle", + "comp": { + "value": "60", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "progressCircle1" + } + } + }, + "4": { + "layout": { + "68b3d00f": { + "i": "68b3d00f", + "h": 6, + "w": 23, + "x": 1, + "y": 7, + "pos": 0 + } + }, + "items": { + "68b3d00f": { + "compType": "button", + "comp": { + "text": "Button", + "type": "", + "form": "", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "button2" + } + } + }, + "5": { + "layout": { + "307f8e6b": { + "i": "307f8e6b", + "h": 10, + "w": 24, + "x": 0, + "y": 6, + "pos": 0 + } + }, + "items": { + "307f8e6b": { + "compType": "checkbox", + "comp": { + "defaultValue": "", + "value": "", + "label": { + "text": "Check box", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "left" + }, + "options": { + "optionType": "manual", + "manual": { + "manual": [ + { + "value": "1", + "label": "Option 1" + }, + { + "value": "2", + "label": "Option 2" + } + ] + }, + "mapData": { + "data": "[]" + } + }, + "layout": "horizontal", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "checkbox1" + } + } + } +}; + export default function ColumnLayoutExample() { return ( <> @@ -11,37 +274,21 @@ export default function ColumnLayoutExample() { > - @@ -53,22 +300,47 @@ export default function ColumnLayoutExample() { > + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/Container.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/Container.tsx index 84e0dd6ab..cc90bdf6e 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/Container.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/Container.tsx @@ -2,6 +2,150 @@ import { ContainerComp } from "comps/comps/containerComp/containerComp"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; +const container={ + "header": { + "layout": { + "a6083c0a": { + "i": "a6083c0a", + "h": 5, + "w": 24, + "x": 0, + "y": 0 + } + }, + "items": { + "a6083c0a": { + "compType": "text", + "comp": { + "text": "### Welcome Back!", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "center", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "formTitle1" + } + } + }, + "body": { + "0": { + "view": { + "layout": { + "a6f7c0e4": { + "i": "a6f7c0e4", + "h": 7, + "w": 14, + "x": 0, + "y": 0, + "pos": 0 + }, + "c5b32ee6": { + "i": "c5b32ee6", + "h": 7, + "w": 14, + "x": 0, + "y": 7, + "pos": 1 + } + }, + "items": { + "a6f7c0e4": { + "compType": "input", + "comp": { + "defaultValue": "", + "value": "", + "label": { + "text": "Email", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "left" + }, + "validationType": "Email", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "input1" + }, + "c5b32ee6": { + "compType": "password", + "comp": { + "defaultValue": "", + "value": "", + "label": { + "text": "Password", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "left" + }, + "validationType": "Regex", + "visibilityToggle": true, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "password1" + } + } + } + } + }, + "footer": { + "layout": { + "95ccf34e": { + "i": "95ccf34e", + "h": 5, + "w": 10, + "x": 14, + "y": 0 + } + }, + "items": { + "95ccf34e": { + "compType": "button", + "comp": { + "text": "Login", + "type": "submit", + "form": "form1", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "formButton1" + } + } + }, + "showHeader": true, + "showBody": true, + "showFooter": true, + "autoHeight": "auto", + "showVerticalScrollbar": false, + "horizontalGridCells": 24, + "scrollbars": false, + "style": { + "borderWidth": "1px" + }, + "appliedThemeId": "" +}; + export default function ContainerExample() { return ( <> @@ -10,37 +154,490 @@ export default function ContainerExample() { description="The Following Examples Show the Basic Usage of the Container Component." > - - - + + + + + + + + ); } \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/PageLayout.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/PageLayout.tsx index 7cc6a9113..a80ce5f57 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/PageLayout.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/PageLayout.tsx @@ -2,24 +2,656 @@ import { PageLayoutComp } from "comps/comps/containerComp/pageLayoutComp"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; +const container={ + "header": { + "layout": { + "f7820dbc": { + "i": "f7820dbc", + "h": 6, + "w": 24, + "x": 0, + "y": 0, + "pos": 0 + } + }, + "items": { + "f7820dbc": { + "compType": "text", + "comp": { + "text": "### Page Layout Header", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "center", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "text1" + } + } + }, + "sider": { + "layout": { + "a9d16086": { + "i": "a9d16086", + "h": 6, + "w": 22, + "x": 0, + "y": 0, + "pos": 0 + } + }, + "items": { + "a9d16086": { + "compType": "dropdown", + "comp": { + "text": "Menu", + "options": { + "optionType": "manual", + "manual": { + "manual": [ + { + "label": "Option 1" + }, + { + "label": "Option 2" + } + ] + }, + "mapData": { + "data": "[]" + } + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "dropdown1" + } + } + }, + "body": { + "0": { + "view": { + "layout": { + "163bc2f3": { + "i": "163bc2f3", + "h": 45, + "w": 21, + "x": 3, + "y": 0, + "pos": 0 + } + }, + "items": { + "163bc2f3": { + "compType": "table", + "comp": { + "showRowGridBorder": true, + "showHRowGridBorder": true, + "autoHeight": "auto", + "data": "[\n {\n \"id\": 1,\n \"name\": \"Reagen Gilberthorpe\",\n \"date\": \"7/5/2022\",\n \"department\": \"Marketing\"\n },\n {\n \"id\": 2,\n \"name\": \"Haroun Lortzing\",\n \"date\": \"11/6/2022\",\n \"department\": \"Human Resources\"\n },\n {\n \"id\": 3,\n \"name\": \"Garret Kilmaster\",\n \"date\": \"11/14/2021\",\n \"department\": \"Research and Development\"\n },\n {\n \"id\": 4,\n \"name\": \"Israel Harrowsmith\",\n \"date\": \"4/3/2022\",\n \"department\": \"Training\"\n },\n {\n \"id\": 5,\n \"name\": \"Loren O'Lagen\",\n \"date\": \"9/10/2022\",\n \"department\": \"Services\"\n },\n {\n \"id\": 6,\n \"name\": \"Wallis Hothersall\",\n \"date\": \"4/18/2022\",\n \"department\": \"Accounting\"\n },\n {\n \"id\": 7,\n \"name\": \"Kaia Biskup\",\n \"date\": \"3/4/2022\",\n \"department\": \"Sales\"\n },\n {\n \"id\": 8,\n \"name\": \"Travers Saterweyte\",\n \"date\": \"1/9/2022\",\n \"department\": \"Human Resources\"\n },\n {\n \"id\": 9,\n \"name\": \"Mikey Niemetz\",\n \"date\": \"1/4/2022\",\n \"department\": \"Marketing\"\n },\n {\n \"id\": 10,\n \"name\": \"Mano Meckiff\",\n \"date\": \"2/19/2022\",\n \"department\": \"Research and Development\"\n }\n]", + "showDataLoadSpinner": true, + "columns": [ + { + "title": "ID", + "showTitle": true, + "isCustom": false, + "dataIndex": "id", + "width": "55", + "autoWidth": "fixed", + "render": { + "compType": "text", + "comp": { + "text": "{{currentCell}}" + } + }, + "align": "left", + "fixed": "close", + "background": "", + "margin": "", + "text": "", + "border": "", + "borderWidth": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "", + "summaryColumns": [ + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + }, + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + }, + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + } + ] + }, + { + "title": "Name", + "showTitle": true, + "isCustom": false, + "dataIndex": "name", + "width": "200", + "autoWidth": "fixed", + "render": { + "compType": "text", + "comp": { + "text": "{{currentCell}}" + } + }, + "align": "left", + "fixed": "close", + "background": "", + "margin": "", + "text": "", + "border": "", + "borderWidth": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "", + "summaryColumns": [ + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + }, + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + }, + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + } + ] + }, + { + "title": "Date", + "showTitle": true, + "isCustom": false, + "dataIndex": "date", + "width": "110", + "autoWidth": "fixed", + "render": { + "compType": "text", + "comp": { + "text": "{{currentCell}}" + } + }, + "align": "left", + "fixed": "close", + "background": "", + "margin": "", + "text": "", + "border": "", + "borderWidth": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "", + "summaryColumns": [ + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + }, + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + }, + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + } + ] + }, + { + "title": "Department", + "showTitle": true, + "isCustom": false, + "dataIndex": "department", + "width": "250", + "autoWidth": "fixed", + "render": { + "compType": "tag", + "comp": { + "text": "{{currentCell}}", + "tagColors": { + "optionType": "manual", + "manual": { + "manual": [ + { + "label": "Tag1", + "icon": "/icon:solid/tag", + "color": "#f50" + }, + { + "label": "Tag2", + "icon": "/icon:solid/tag", + "color": "#2db7f5" + } + ] + }, + "mapData": { + "data": "[]", + "mapData": { + "color": "" + } + } + } + } + }, + "align": "left", + "fixed": "close", + "background": "", + "margin": "", + "text": "", + "border": "", + "borderWidth": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "", + "summaryColumns": [ + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + }, + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + }, + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + } + ] + } + ], + "size": "middle", + "selection": { + "mode": "single" + }, + "pagination": { + "changeablePageSize": null, + "pageSizeOptions": "[5, 10, 20, 50]" + }, + "sort": [], + "toolbar": { + "showRefresh": true, + "showDownload": true, + "showFilter": true, + "position": "below", + "columnSeparator": ",", + "showUpdateButtons": true + }, + "summaryRows": "1", + "rowAutoHeight": "auto", + "tableAutoHeight": "auto", + "expansion": { + "slot": { + "container": { + "layout": {} + } + } + }, + "editModeClicks": "single", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "table1" + } + } + } + } + }, + "footer": { + "layout": { + "3a74e36e": { + "i": "3a74e36e", + "h": 6, + "w": 24, + "x": 0, + "y": 2, + "pos": 0 + } + }, + "items": { + "3a74e36e": { + "compType": "text", + "comp": { + "text": "### Page Layout Footer", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "center", + "contentScrollBar": true, + "verticalAlignment": "center", + "style": { + "background": "#fff" + }, + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "text2" + } + } + }, + "showHeader": true, + "showSider": true, + "innerSider": true, + "siderCollapsible": true, + "siderCollapsed": true, + "siderRight": false, + "siderWidth": "20%", + "siderCollapsedWidth": "0", + "showFooter": true, + "horizontalGridCells": 24, + "autoHeight": "auto", + "siderScrollbars": false, + "contentScrollbars": false, + "mainScrollbars": false, + "appliedThemeId": "" +}; + export default function PageLayoutExample() { return ( <> + @@ -30,29 +662,4389 @@ export default function PageLayoutExample() { description="The Following Examples Show the Layout options on Component." > + + + + + + + + + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/TabbedContainer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/TabbedContainer.tsx index 4f51f953c..599157687 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/TabbedContainer.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/TabbedContainer.tsx @@ -2,24 +2,273 @@ import { TabbedContainerComp } from "comps/comps/tabs/tabbedContainerComp"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; +const container={ + "0": { + "layout": { + "acf186c7": { + "i": "acf186c7", + "h": 24, + "w": 7, + "x": 6, + "y": 0, + "pos": 0 + } + }, + "items": { + "acf186c7": { + "compType": "text", + "comp": { + "text": "### This is Tab # 1", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "left", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "text1" + } + } + }, + "1": { + "layout": { + "e7160f3d": { + "i": "e7160f3d", + "h": 6, + "w": 7, + "x": 7, + "y": 2, + "pos": 0 + } + }, + "items": { + "e7160f3d": { + "compType": "text", + "comp": { + "text": "### This is Tab # 2", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "left", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "text2" + } + } + }, + "2": { + "layout": { + "480e1038": { + "i": "480e1038", + "h": 6, + "w": 7, + "x": 7, + "y": 1, + "pos": 0 + } + }, + "items": { + "480e1038": { + "compType": "text", + "comp": { + "text": "### This is Tab # 3", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "left", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "text3" + } + } + }, + "3": { + "layout": { + "69edd323": { + "i": "69edd323", + "h": 6, + "w": 7, + "x": 7, + "y": 1, + "pos": 0 + } + }, + "items": { + "69edd323": { + "compType": "text", + "comp": { + "text": "### This is Tab # 4", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "left", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "text4" + } + } + }, + "4": { + "layout": { + "2038ea0e": { + "i": "2038ea0e", + "h": 6, + "w": 7, + "x": 8, + "y": 1, + "pos": 0 + } + }, + "items": { + "2038ea0e": { + "compType": "text", + "comp": { + "text": "### This is Tab # 5", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "left", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "text5" + } + } + } +}; + +const tab={ + "manual": [ + { + "id": 0, + "label": "Tab1", + "key": "Tab1", + "iconPosition": "left" + }, + { + "id": 1, + "label": "Tab2", + "key": "Tab2", + "iconPosition": "left" + }, + { + "id": 2, + "label": "Tab3", + "key": "Tab3", + "iconPosition": "left" + }, + { + "id": 3, + "label": "Tab4", + "key": "Tab4", + "iconPosition": "left" + }, + { + "id": 4, + "label": "Tab5", + "key": "Tab5", + "iconPosition": "left" + } + ] +}; + export default function TabbedContainerExample() { return ( <> @@ -31,45 +280,21 @@ export default function TabbedContainerExample() { > @@ -81,43 +306,61 @@ export default function TabbedContainerExample() { > diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/IFrame.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/IFrame.tsx index ba562b36d..49b1fd0db 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/IFrame.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/IFrame.tsx @@ -7,15 +7,22 @@ export default function IFrameExample() { return ( <> + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx new file mode 100644 index 000000000..a32d10c91 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx @@ -0,0 +1,25 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["bpmnEditor"].comp; + +export default function BPMNEditorExample() { + return ( + <> + + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Icons.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Icons.tsx new file mode 100644 index 000000000..3e6190a15 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Icons.tsx @@ -0,0 +1,65 @@ +import { IconComp } from "comps/comps/iconComp"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function IconExample() { + return ( + <> + + + + + + + + + ); + } \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/LottieAnimation.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/LottieAnimation.tsx new file mode 100644 index 000000000..1f0dfa614 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/LottieAnimation.tsx @@ -0,0 +1,88 @@ +import { JsonLottieComp } from "comps/comps/jsonComp/jsonLottieComp"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function JsonLottieAnimationExample() { + return ( + <> + + + + + + + + + + + + + + + + ); + } \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx new file mode 100644 index 000000000..9edbeb2ab --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx @@ -0,0 +1,22 @@ +import { MentionComp } from "comps/comps/textInputComp/mentionComp"; +import { trans } from "i18n"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function MentionCompExample() { + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/QRCode.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/QRCode.tsx new file mode 100644 index 000000000..e56cda509 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/QRCode.tsx @@ -0,0 +1,35 @@ +import { QRCodeComp } from "comps/comps/qrCodeComp"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function QRCodeExample() { + return ( + <> + + + + + + + ); + } \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Scanner.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Scanner.tsx new file mode 100644 index 000000000..6cd6ef8ef --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Scanner.tsx @@ -0,0 +1,52 @@ +import { ScannerComp } from "comps/comps/buttonComp/scannerComp"; +import { trans } from "i18n"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function ScannerExample() { + return ( + <> + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Shape.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Shape.tsx new file mode 100644 index 000000000..1b5259742 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Shape.tsx @@ -0,0 +1,36 @@ +import { ShapeComp } from "comps/comps/shapeComp/shapeComp"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function ShapeExample() { + return ( + <> + + + + + + + ); + } \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Tour.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Tour.tsx new file mode 100644 index 000000000..bc4875426 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Tour.tsx @@ -0,0 +1,20 @@ +import { TourComp } from "comps/comps/tourComp/tourComp"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function TourExample() { + return ( + <> + + + + + ); + } \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/TurnstileCaptcha.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/TurnstileCaptcha.tsx new file mode 100644 index 000000000..fecbc3281 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/TurnstileCaptcha.tsx @@ -0,0 +1,25 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["turnstileCaptcha"].comp; + +export default function TurnstileCaptchaExample() { + return ( + <> + + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/Form.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/Form.tsx new file mode 100644 index 000000000..eaa8ddada --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/Form.tsx @@ -0,0 +1,664 @@ +import { FormComp } from "comps/comps/formComp/formComp"; +import { trans } from "i18n"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const container={ + "header": { + "layout": { + "a6083c0a": { + "i": "a6083c0a", + "h": 5, + "w": 24, + "x": 0, + "y": 0 + } + }, + "items": { + "a6083c0a": { + "compType": "text", + "comp": { + "text": "### Welcome Back!", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "center", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "formTitle1" + } + } + }, + "body": { + "0": { + "view": { + "layout": { + "a6f7c0e4": { + "i": "a6f7c0e4", + "h": 7, + "w": 14, + "x": 0, + "y": 0, + "pos": 0 + }, + "c5b32ee6": { + "i": "c5b32ee6", + "h": 7, + "w": 14, + "x": 0, + "y": 7, + "pos": 1 + } + }, + "items": { + "a6f7c0e4": { + "compType": "input", + "comp": { + "defaultValue": "", + "value": "", + "label": { + "text": "Email", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "left" + }, + "validationType": "Email", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "input1" + }, + "c5b32ee6": { + "compType": "password", + "comp": { + "defaultValue": "", + "value": "", + "label": { + "text": "Password", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "left" + }, + "validationType": "Regex", + "visibilityToggle": true, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "password1" + } + } + } + } + }, + "footer": { + "layout": { + "95ccf34e": { + "i": "95ccf34e", + "h": 5, + "w": 10, + "x": 14, + "y": 0 + } + }, + "items": { + "95ccf34e": { + "compType": "button", + "comp": { + "text": "Login", + "type": "submit", + "form": "form1", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "formButton1" + } + } + }, + "showHeader": true, + "showBody": true, + "showFooter": true, + "autoHeight": "auto", + "showVerticalScrollbar": false, + "horizontalGridCells": 24, + "scrollbars": false, + "style": { + "borderWidth": "1px" + }, + "appliedThemeId": "" +}; + +export default function FormExample() { + return ( + <> + + + + + + + + + + + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONEditor.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONEditor.tsx new file mode 100644 index 000000000..dc1b3db1f --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONEditor.tsx @@ -0,0 +1,132 @@ +import { JsonEditorComp } from "comps/comps/jsonComp/jsonEditorComp"; +import { trans } from "i18n"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const schema='{\n "title": "User profile",\n "description": "form example",\n "type": "object",\n "required": [\n "name",\n "phone"\n ],\n "properties": {\n "name": {\n "type": "string",\n "title": "Name"\n },\n "phone": {\n "type": "string",\n "title": "Phone",\n "minLength": 11\n },\n "birthday": {\n "type": "string",\n "title": "Birthday"\n }\n }\n}'; +const uiSchema='{\n "name": {\n "ui:autofocus": true,\n "ui:emptyValue": ""\n },\n "phone": {\n "ui:help": "Please input a 11 digits number"\n },\n "birthday": {\n "ui:widget": "date"\n }\n}'; +const data='{\n "name": "Tom",\n "phone": "13488886666",\n "birthday": "1980-03-16"\n}'; + +export default function JsonEditorExample() { + return ( + <> + + + + + + + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONExplorer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONExplorer.tsx new file mode 100644 index 000000000..022c55088 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONExplorer.tsx @@ -0,0 +1,73 @@ +import { JsonExplorerComp } from "comps/comps/jsonComp/jsonExplorerComp"; +import { trans } from "i18n"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const schema='{\n "title": "User profile",\n "description": "form example",\n "type": "object",\n "required": [\n "name",\n "phone"\n ],\n "properties": {\n "name": {\n "type": "string",\n "title": "Name"\n },\n "phone": {\n "type": "string",\n "title": "Phone",\n "minLength": 11\n },\n "birthday": {\n "type": "string",\n "title": "Birthday"\n }\n }\n}'; +const uiSchema='{\n "name": {\n "ui:autofocus": true,\n "ui:emptyValue": ""\n },\n "phone": {\n "ui:help": "Please input a 11 digits number"\n },\n "birthday": {\n "ui:widget": "date"\n }\n}'; +const data='{\n "name": "Tom",\n "phone": "13488886666",\n "birthday": "1980-03-16"\n}'; +export default function JsonExplorerExample() { + return ( + <> + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONSchemaform.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONSchemaform.tsx index 587ee3cf4..61b2fa22a 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONSchemaform.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONSchemaform.tsx @@ -8,10 +8,10 @@ export default function jsonSchemaFormExample() { <> + ); diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts b/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts index 1a8e04233..007750d93 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts @@ -56,7 +56,44 @@ import ColumnLayoutExample from "./ContainersComp/ColumnLayout"; import TabbedContainerExample from "./ContainersComp/TabbedContainer"; import ContainerExample from "./ContainersComp/Container"; import ContentCardExample from "./MediaComp/ContentCard"; - +import ImageCarouselExample from "./presentationComp/imageCarousel"; +import FormExample from "./formComp/Form"; +import JsonEditorExample from "./formComp/JSONEditor"; +import JsonExplorerExample from "./formComp/JSONExplorer"; +import ShapeExample from "./MediaComp/Shape"; +import JsonLottieAnimationExample from "./MediaComp/LottieAnimation"; +import IconExample from "./MediaComp/Icons"; +import TourExample from "./MediaComp/Tour"; +import QRCodeExample from "./MediaComp/QRCode"; +import StepControlExample from "./selectInputComp/StepControl"; +import CustomCompExample from "./presentationComp/customComponent"; +import ScannerExample from "./MediaComp/Scanner"; +import CandleStickChartExample from "./ChartsComp/CandleStickChart"; +import GridViewExample from "./presentationComp/gridView"; +import ModalExample from "./ChartsComp/Modal"; +import FunnelChartExample from "./ChartsComp/FunnelChart"; +import GaugeChartExample from "./ChartsComp/GaugeChart"; +import GraphChartExample from "./ChartsComp/GraphChart"; +import HeatmapChartExample from "./ChartsComp/HeatmapChart"; +import RadarChartExample from "./ChartsComp/RadarChart"; +import SankeyChartExample from "./ChartsComp/SankeyChart"; +import SunburstChartExample from "./ChartsComp/SunburstChart"; +import ThemeRiverChartExample from "./ChartsComp/ThemeRiverChart"; +import TreeChartExample from "./ChartsComp/TreeChart"; +import TreemapChartExample from "./ChartsComp/TreemapChart"; +import OpenLayersGeoMapChartExample from "./ChartsComp/OpenLayersGeoMap"; +import GeoMapChartExample from "./ChartsComp/GeoMapChart"; +import MermaidChartExample from "./ChartsComp/MermaidChart"; +import MentionCompExample from "./MediaComp/Mention"; +import CalendarExample from "./CalendarInputComp/Calendar"; +import PivotTableExample from "./presentationComp/pivotTable"; +import TurnstileCaptchaExample from "./MediaComp/TurnstileCaptcha"; +import GanttChartExample from "./ChartsComp/GanttChart"; +import KanbanExample from "./presentationComp/Kanban"; +import HillChartExample from "./ChartsComp/HillChart"; +import BPMNEditorExample from "./MediaComp/BPMNEditor"; +import ImageEditorExample from "./presentationComp/imageEditor"; +import DrawerExample from "./ChartsComp/Drawer"; const examples: { [key in UICompType]?: React.FunctionComponent } = { button: ButtonExample, @@ -116,6 +153,44 @@ const examples: { [key in UICompType]?: React.FunctionComponent } = { tabbedContainer: TabbedContainerExample, container: ContainerExample, card: ContentCardExample, + carousel: ImageCarouselExample, + form: FormExample, + jsonEditor: JsonEditorExample, + jsonExplorer: JsonExplorerExample, + shape: ShapeExample, + jsonLottie: JsonLottieAnimationExample, + icon: IconExample, + tour: TourExample, + qrCode: QRCodeExample, + step: StepControlExample, + custom: CustomCompExample, + scanner: ScannerExample, + candleStickChart: CandleStickChartExample, + grid: GridViewExample, + modal: ModalExample, + funnelChart: FunnelChartExample, + gaugeChart: GaugeChartExample, + graphChart: GraphChartExample, + heatmapChart: HeatmapChartExample, + radarChart: RadarChartExample, + sankeyChart: SankeyChartExample, + sunburstChart: SunburstChartExample, + themeriverChart: ThemeRiverChartExample, + treeChart: TreeChartExample, + treemapChart: TreemapChartExample, + openLayersGeoMap: OpenLayersGeoMapChartExample, + chartsGeoMap: GeoMapChartExample, + mermaid: MermaidChartExample, + mention: MentionCompExample, + calendar: CalendarExample, + pivotTable: PivotTableExample, + turnstileCaptcha: TurnstileCaptchaExample, + ganttChart: GanttChartExample, + kanban: KanbanExample, + hillchart: HillChartExample, + bpmnEditor: BPMNEditorExample, + imageEditor: ImageEditorExample, + drawer: DrawerExample, }; export default examples; diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/Kanban.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/Kanban.tsx new file mode 100644 index 000000000..a811f8412 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/Kanban.tsx @@ -0,0 +1,25 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["kanban"].comp; + +export default function KanbanExample() { + return ( + <> + + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/chart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/chart.tsx index b7c85bfe1..fe540f332 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/chart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/chart.tsx @@ -4,7 +4,7 @@ import { chartColorPalette } from "lowcoder-design"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; -const ChartCompWithDefault = uiCompRegistry["chart"].comp; +const ChartCompWithDefault = uiCompRegistry["basicChart"].comp; const defaultDataSource = [ { diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/customComponent.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/customComponent.tsx new file mode 100644 index 000000000..c405d1128 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/customComponent.tsx @@ -0,0 +1,24 @@ +import { CustomComp } from "comps/comps/customComp/customComp"; +import { trans } from "i18n"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function CustomCompExample() { + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/gridView.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/gridView.tsx new file mode 100644 index 000000000..31eaea4cc --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/gridView.tsx @@ -0,0 +1,242 @@ +import { GridComp } from "comps/comps/listViewComp/gridComp"; +import { trans } from "i18n"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const container={ + "layout": { + "9bb47110": { + "i": "9bb47110", + "w": 6, + "h": 14, + "x": 0, + "y": 0 + }, + "aad8227a": { + "i": "aad8227a", + "h": 5, + "w": 17, + "x": 7, + "y": 0 + }, + "68e1f6b2": { + "i": "68e1f6b2", + "h": 5, + "w": 17, + "x": 7, + "y": 9 + } + }, + "items": { + "9bb47110": { + "compType": "image", + "comp": { + "src": "{{currentItem.cover}}", + "autoHeight": "fixed", + "restrictPaddingOnRotation": "image", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "image1" + }, + "aad8227a": { + "compType": "link", + "comp": { + "text": "{{i+1}}. {{currentItem.title}}", + "onEvent": [ + { + "name": "click", + "handler": { + "compType": "goToURL", + "comp": { + "url": "{{currentItem.url}}", + "query": [ + {} + ], + "hash": [ + {} + ], + "inNewTab": true + }, + "condition": "", + "slowdown": "debounce", + "delay": "" + } + } + ], + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "link1" + }, + "68e1f6b2": { + "compType": "rating", + "comp": { + "defaultValue": "{{currentItem.rate / 2}}", + "value": "", + "max": "5", + "label": { + "text": "", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "right" + }, + "allowHalf": true, + "disabled": "true", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "rating1" + } + } +}; + +export default function GridViewExample() { + + const blackListConfig: string[] = [ + "container" + ]; + return ( + <> + + + + + + + + + + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/imageCarousel.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/imageCarousel.tsx new file mode 100644 index 000000000..a90e5e3f1 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/imageCarousel.tsx @@ -0,0 +1,81 @@ +import { CarouselComp } from "comps/comps/carouselComp"; +import { trans } from "i18n"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function ImageCarouselExample() { + return ( + <> + + + + + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/imageEditor.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/imageEditor.tsx new file mode 100644 index 000000000..62981a0f4 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/imageEditor.tsx @@ -0,0 +1,25 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["imageEditor"].comp; + +export default function ImageEditorExample() { + return ( + <> + + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/listView.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/listView.tsx index d11cd2d82..51d5704e5 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/listView.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/listView.tsx @@ -3,17 +3,229 @@ import { trans } from "i18n"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; +const container={ + "layout": { + "9bb47110": { + "i": "9bb47110", + "w": 6, + "h": 14, + "x": 0, + "y": 0 + }, + "aad8227a": { + "i": "aad8227a", + "h": 5, + "w": 17, + "x": 7, + "y": 0 + }, + "68e1f6b2": { + "i": "68e1f6b2", + "h": 5, + "w": 17, + "x": 7, + "y": 9 + } + }, + "items": { + "9bb47110": { + "compType": "image", + "comp": { + "src": "{{currentItem.cover}}", + "autoHeight": "fixed", + "restrictPaddingOnRotation": "image", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "image1" + }, + "aad8227a": { + "compType": "link", + "comp": { + "text": "{{i+1}}. {{currentItem.title}}", + "onEvent": [ + { + "name": "click", + "handler": { + "compType": "goToURL", + "comp": { + "url": "{{currentItem.url}}", + "query": [ + {} + ], + "hash": [ + {} + ], + "inNewTab": true + }, + "condition": "", + "slowdown": "debounce", + "delay": "" + } + } + ], + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "link1" + }, + "68e1f6b2": { + "compType": "rating", + "comp": { + "defaultValue": "{{currentItem.rate / 2}}", + "value": "", + "max": "5", + "label": { + "text": "", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "right" + }, + "allowHalf": true, + "disabled": "true", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "rating1" + } + } +}; + export default function ListViewExample() { + + const blackListConfig: string[] = [ + "container" + ]; return ( <> + + + + + + + + + + + + + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/pivotTable.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/pivotTable.tsx new file mode 100644 index 000000000..c567b228d --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/pivotTable.tsx @@ -0,0 +1,25 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["pivotTable"].comp; + +export default function PivotTableExample() { + return ( + <> + + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/AutoComplete.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/AutoComplete.tsx index 5e05cf20f..65e3a7f72 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/AutoComplete.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/AutoComplete.tsx @@ -3,18 +3,93 @@ import { trans } from "i18n"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; +const items= "[\n {\n \"value\": \"1-BeiJing\",\n \"label\": \"Beijing\"\n },\n {\n \"value\": \"2-ShangHai\",\n \"label\": \"Shanghai\"\n },\n {\n \"value\": \"3-GuangDong\",\n \"label\": \"Guandong\"\n },\n {\n \"value\": \"4-ShenZhen\",\n \"label\": \"Shenzhen\"\n }\n]"; + export default function AutoCompleteExample() { return ( <> + + + + + + + + + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/StepControl.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/StepControl.tsx new file mode 100644 index 000000000..d2e51248a --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/StepControl.tsx @@ -0,0 +1,112 @@ +import { StepComp } from "comps/comps/selectInputComp/stepControl"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function StepControlExample() { + return ( + <> + + + + + + + + + + + + + + + + + + + + + ); + } \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/Tree.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/Tree.tsx index b81253b57..556cb637d 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/Tree.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/Tree.tsx @@ -49,7 +49,7 @@ export default function TreeExample() { description={trans("componentDoc.basicDemoDescription")} >