Dev -> Feat

client/package.json

@@ -17,7 +17,8 @@
     "test": "jest && yarn workspace lowcoder-comps test",
     "prepare": "yarn workspace lowcoder prepare",
     "build:core": "yarn workspace lowcoder-core build",
-    "test:core": "yarn workspace lowcoder-core test"
+    "test:core": "yarn workspace lowcoder-core test",
+    "lint": "eslint . --fix"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.20.2",

client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts

@@ -1,150 +1,145 @@
 export const en = {
-  chart: {
-    delete: "Delete",
-    data: "Data",
-    mode: "Mode",
-    config: "Configuration",
-    UIMode: "UI Mode",
-    chartType: "Chart type",
-    xAxis: "X-axis",
-    chartSeries: "Chart series",
-    customSeries: "Custom series",
-    add: "Add",
-    confirmDelete: "Confirm Delete: ",
-    seriesName: "Series Name",
-    dataColumns: "Data columns",
-    title: "Title",
-    xAxisDirection: "X axis direction",
-    xAxisName: "X axis name",
-    xAxisType: "X axis type",
-    xAxisTypeTooltip:
-      "By default, it will be automatically detected according to X-axis data. For the type description, please refer to: ",
-    logBase: "LogBase",
-    yAxisName: "Y axis name",
-    yAxisType: "Y axis type",
-    yAxisDataFormat: "Y axis data type",
-    yAxisDataFormatTooltip: `Value indicates the value of each coordinate. Example: '{{value * 100 + "%"}}'`,
-    basicBar: "Basic bar",
-    stackedBar: "Stacked bar",
-    barType: "Bar chart type",
-    categoryAxis: "Category axis",
-    valueAxis: "Value axis",
-    timeAxis: "Time axis",
-    logAxis: "Log axis",
-    auto: "Default",
-    legendPosition: "Legend position",
-    basicLine: "Basic line",
-    stackedLine: "Stacked line",
-    areaLine: "Area line",
-    smooth: "Smooth curve",
-    lineType: "Line chart type",
-    basicPie: "Basic pie",
-    doughnutPie: "Doughnut pie",
-    rosePie: "Rose pie",
-    pieType: "Pie chart type",
-    spending: "Spending",
-    budget: "Budget",
-    bar: "Bar chart",
-    line: "Line chart",
-    scatter: "Scatter chart",
-    pie: "Pie chart",
-    horizontal: "Horizontal",
-    vertical: "Vertical",
-    noData: "No data",
-    unknown: "Unknown",
-    select: "Select",
-    unSelect: "Unselect",
-    echartsOptionLabel: "Option",
-    echartsOptionTooltip: "ECharts option",
-    echartsOptionExamples: "ECharts examples",
-    echartsMapOptionTooltip: "ECharts Map Option",
-    echartsMapOptionExamples: "ECharts Map Examples",
-    selectDesc: "Triggered when the user selects part of the data in the chart",
-    unselectDesc: "Triggered when the user unselects part of the data in the chart",
-    selectedPointsDesc: "Selected points",
-    dataDesc: "The raw data used in the current chart",
-    titleDesc: "Current chart title",
-    scatterShape: "Scatter shape",
-    circle: "Circle",
-    rect: "Rect",
-    triangle: "Triangle",
-    diamond: "Diamond",
-    pin: "Pin",
-    arrow: "Arrow",
-    pointColorLabel: "Point color",
-    pointColorTooltip: `Set the point color according to the series name and current point value, optional variables: seriesName, value. Example: '{{value < 25000 ? "red" : "green"}}'`,
-    mapReady: "Map Ready",
-    mapReadyDesc: "Triggers when map is ready",
-    zoomLevelChange: "Zoom Level Change",
-    zoomLevelChangeDesc: "Triggers when map zoom level changed",
-    centerPositionChange: "Center Position Change",
-    centerPositionChangeDesc: "Triggers when map center position changed"
+  "chart": {
+    "delete": "Delete",
+    "data": "Data",
+    "mode": "Mode",
+    "config": "Configuration",
+    "UIMode": "UI Mode",
+    "chartType": "Chart Type",
+    "xAxis": "X-axis",
+    "chartSeries": "Chart Series",
+    "customSeries": "Custom Series",
+    "add": "Add",
+    "confirmDelete": "Confirm Delete: ",
+    "seriesName": "Series Name",
+    "dataColumns": "Data Columns",
+    "title": "Title",
+    "xAxisDirection": "X-axis Direction",
+    "xAxisName": "X-axis Name",
+    "xAxisType": "X-axis Type",
+    "xAxisTypeTooltip": "Automatically detected based on X-axis data. For type description, refer to: ",
+    "logBase": "Log Base",
+    "yAxisName": "Y-axis Name",
+    "yAxisType": "Y-axis Type",
+    "yAxisDataFormat": "Y-axis Data Type",
+    "yAxisDataFormatTooltip": "Indicates the value of each coordinate. Example: '{{value * 100 + \"%\"}}'",
+    "basicBar": "Basic Bar",
+    "stackedBar": "Stacked Bar",
+    "barType": "Bar Chart Type",
+    "categoryAxis": "Category Axis",
+    "valueAxis": "Value Axis",
+    "timeAxis": "Time Axis",
+    "logAxis": "Log Axis",
+    "auto": "Default",
+    "legendPosition": "Legend Position",
+    "basicLine": "Basic Line",
+    "stackedLine": "Stacked Line",
+    "areaLine": "Area Line",
+    "smooth": "Smooth Curve",
+    "lineType": "Line Chart Type",
+    "basicPie": "Basic Pie",
+    "doughnutPie": "Doughnut Pie",
+    "rosePie": "Rose Pie",
+    "pieType": "Pie Chart Type",
+    "spending": "Spending",
+    "budget": "Budget",
+    "bar": "Bar Chart",
+    "line": "Line Chart",
+    "scatter": "Scatter Chart",
+    "pie": "Pie Chart",
+    "horizontal": "Horizontal",
+    "vertical": "Vertical",
+    "noData": "No Data",
+    "unknown": "Unknown",
+    "select": "Select",
+    "unSelect": "Unselect",
+    "echartsOptionLabel": "Option",
+    "echartsOptionTooltip": "ECharts Option",
+    "echartsOptionExamples": "ECharts Examples",
+    "echartsMapOptionTooltip": "ECharts Map Option",
+    "echartsMapOptionExamples": "ECharts Map Examples",
+    "selectDesc": "Triggered when a user selects part of the data in the chart",
+    "unselectDesc": "Triggered when a user unselects part of the data in the chart",
+    "selectedPointsDesc": "Selected Points",
+    "dataDesc": "JSON Data for the Chart",
+    "titleDesc": "Current Chart Title",
+    "scatterShape": "Scatter Shape",
+    "circle": "Circle",
+    "rect": "Rectangle",
+    "triangle": "Triangle",
+    "diamond": "Diamond",
+    "pin": "Pin",
+    "arrow": "Arrow",
+    "pointColorLabel": "Point Color",
+    "pointColorTooltip": "Set point color based on series name and value. Variables: seriesName, value. Example: '{{value < 25000 ? \"red\" : \"green\"}}'",
+    "mapReady": "Map Ready",
+    "mapReadyDesc": "Triggers when the map is ready",
+    "zoomLevelChange": "Zoom Level Change",
+    "zoomLevelChangeDesc": "Triggers when the map zoom level changes",
+    "centerPositionChange": "Center Position Change",
+    "centerPositionChangeDesc": "Triggers when the map center position changes"
   },
-  imageEditor: {
-    defaultSrc: "",
-    save: "Save",
-    saveDesc: "Save image",
-    src: "Image source",
-    name: "Image name",
-    buttonText: "Button text",
-    srcDesc: "Image source",
-    nameDesc: "Image name",
-    dataURIDesc: "Image data URI",
-    dataDesc: "Image data",
-    buttonTextDesc: "Button text",
+  "imageEditor": {
+    "defaultSrc": "",
+    "save": "Save",
+    "saveDesc": "Save Image",
+    "src": "Image Source",
+    "name": "Image Name",
+    "buttonText": "Button Text",
+    "srcDesc": "Image Source",
+    "nameDesc": "Image Name",
+    "dataURIDesc": "Image Data URI",
+    "dataDesc": "Image Data",
+    "buttonTextDesc": "Button Text"
   },
-  calendar: {
-    events: "Events data",
-    editable: "Editable",
-    defaultDate: "Default date",
-    defaultDateTooltip: "The date that the calendar initially displays",
-    defaultView: "Default view",
-    defaultViewTooltip: "The view that the calendar initially displays",
-    showEventTime: "Show event times",
-    showEventTimeTooltip: "Whether to display the time text of the event",
-    showWeekends: "Show weekends",
-    showAllDay: "Show all-day",
-    showAllDayTooltip: "Whether to display the all-day slot in the week and day views",
-    dayMaxEvents: "Day max events",
-    dayMaxEventsTooltip:
-      "The maximum number of events to display in the month view per day, with 0 being limited to the height of the cell",
-    eventMaxStack: "Event max stack",
-    eventMaxStackTooltip:
-      "The maximum number of events to stack horizontally in the week and day views, with 0 being no limit",
-    selectInterval: "The interval selected on the calendar",
-    selectEvent: "Selected event",
-    changeSet:
-      "The event object changed by dragging in the calendar, the key is the eventId, and the value is the event",
-    headerBtnBackground: "Button background",
-    btnText: "Button text",
-    title: "Title",
-    selectBackground: "Selected background",
-    today: "Today",
-    month: "Month",
-    week: "Week",
-    day: "Day",
-    list: "List",
-    monday: "Monday",
-    tuesday: "Tuesday",
-    wednesday: "Wednesday",
-    thursday: "Thursday",
-    friday: "Friday",
-    saturday: "Saturday",
-    sunday: "Sunday",
-    startWeek: "Start from",
-    creatEvent: "Create event",
-    editEvent: "Edit event",
-    eventName: "Event name",
-    eventColor: "Event color",
-    eventGroupId: "Group ID",
-    groupIdTooltip:
-      "Group ID is used to group different events, and events in the same group can be dragged and resized together.",
-    more: "more",
-    allDay: "All day",
-    eventNameRequire: "Please enter Event name",
-    eventId: "Event ID",
-    eventIdRequire: "Please enter Event ID",
-    eventIdTooltip: "Unique ID for each event",
-    eventIdExist: "ID already exists",
+  "calendar": {
+    "events": "Events Data",
+    "editable": "Editable",
+    "defaultDate": "Default Date",
+    "defaultDateTooltip": "Initial display date of the calendar",
+    "defaultView": "Default View",
+    "defaultViewTooltip": "Initial view of the calendar",
+    "showEventTime": "Show Event Times",
+    "showEventTimeTooltip": "Display event time text",
+    "showWeekends": "Show Weekends",
+    "showAllDay": "Show All-Day",
+    "showAllDayTooltip": "Display all-day slot in week and day views",
+    "dayMaxEvents": "Day Max Events",
+    "dayMaxEventsTooltip": "Max events per day in month view, 0 for cell height limit",
+    "eventMaxStack": "Event Max Stack",
+    "eventMaxStackTooltip": "Max events to stack horizontally in week and day views, 0 for no limit",
+    "selectInterval": "Selected Interval",
+    "selectEvent": "Selected Event",
+    "changeSet": "Changed Event Object",
+    "headerBtnBackground": "Button Background",
+    "btnText": "Button Text",
+    "title": "Title",
+    "selectBackground": "Selected Background",
+    "today": "Today",
+    "month": "Month",
+    "week": "Week",
+    "day": "Day",
+    "list": "List",
+    "monday": "Monday",
+    "tuesday": "Tuesday",
+    "wednesday": "Wednesday",
+    "thursday": "Thursday",
+    "friday": "Friday",
+    "saturday": "Saturday",
+    "sunday": "Sunday",
+    "startWeek": "Start From",
+    "creatEvent": "Create Event",
+    "editEvent": "Edit Event",
+    "eventName": "Event Name",
+    "eventColor": "Event Color",
+    "eventGroupId": "Group ID",
+    "groupIdTooltip": "Group ID groups events for drag and resize together.",
+    "more": "More",
+    "allDay": "All Day",
+    "eventNameRequire": "Enter Event Name",
+    "eventId": "Event ID",
+    "eventIdRequire": "Enter Event ID",
+    "eventIdTooltip": "Unique ID for each event",
+    "eventIdExist": "ID Exists"
   },
 };

client/packages/lowcoder/.eslintrc

@@ -4,5 +4,7 @@
   "rules": {
     // "react-hooks/exhaustive-deps": "off"
     //"only-ascii/only-ascii": "error"
+    "no-unused-vars": "warn",
+    "import/no-unused-modules": [1, {"unusedExports": true}]
   }
-}
+}

client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx

@@ -225,8 +225,8 @@ const CustomCompBase = new UICompBuilder(childrenMap, (props, dispatch) => {
       <>
         {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
           <><Section name={sectionNames.interaction}>
-              {children.model.propertyView({ label: trans("data") })}
-              {children.code.propertyView({ label: trans("code"), language: "html" })}
+              {children.model.propertyView({ label: trans("customComp.data") })}
+              {children.code.propertyView({ label: trans("customComp.code"), language: "html" })}
               {hiddenPropertyView(children)}
             </Section>
           </>

client/packages/lowcoder/src/comps/comps/dataChangeResponderComp.tsx

@@ -8,6 +8,7 @@ import { trans } from "i18n";
 import _ from "lodash";
 import { CompAction, CompActionTypes } from "lowcoder-core";
 import {
+  TacoMarkDown,
   DocLink,
   QueryConfigLabel,
   QueryConfigWrapper,
@@ -45,18 +46,18 @@ const DataResponderItemCompBase = new MultiCompBuilder(
             key: "general",
             title: trans("query.generalTab"),
             children: (
-              <QueryPropertyViewWrapper>
+              <><QueryPropertyViewWrapper>
                 <QuerySectionWrapper>
                   {children.data.propertyView({
                     label: trans("dataResponder.data"),
                     tooltip: trans("dataResponder.dataTooltip"),
                     placement: "bottom",
                     placeholder: "{{anyDependencies}}",
-                    extraChildren: QueryTutorials.dataResponder && (
+                    /* extraChildren: QueryTutorials.dataResponder && (
                       <DocLink style={{ marginTop: 8 }} href={QueryTutorials.dataResponder}>
                         {trans("dataResponder.docLink")}
                       </DocLink>
-                    ),
+                    ), */
                   })}
                 </QuerySectionWrapper>
 
@@ -68,7 +69,10 @@ const DataResponderItemCompBase = new MultiCompBuilder(
                     {children.onEvent.getPropertyView()}
                   </QueryConfigWrapper>
                 </QuerySectionWrapper>
-              </QueryPropertyViewWrapper>
+              </QueryPropertyViewWrapper><><TacoMarkDown>{trans("dataResponder.documentationText")}</TacoMarkDown><DocLink style={{ marginTop: 8 }} href={QueryTutorials.dataResponder} title={trans("dataResponder.documentationText")}>
+                {trans("dataResponder.docLink")}
+              </DocLink></></>
+
             ),
           },
         ]}

client/packages/lowcoder/src/comps/comps/iframeComp.tsx

@@ -64,7 +64,7 @@ let IFrameCompBase = new UICompBuilder(
   .setPropertyViewFn((children) => (
     <>
       <Section name={sectionNames.basic}>
-        {children.url.propertyView({ label: "URL", placeholder: "https://example.com" })}
+        {children.url.propertyView({ label: "Source URL", placeholder: "https://example.com", tooltip: trans("iframe.URLDesc") })}
       </Section>
 
       {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (

client/packages/lowcoder/src/comps/comps/imageComp.tsx

@@ -102,7 +102,7 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
 
   // on safari
   const setStyle = (height: string, width: string) => {
-    console.log(width, height);
+    // console.log(width, height);
 
     const img = imgRef.current;
     const imgDiv = img?.getElementsByTagName("div")[0];

client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx

@@ -17,7 +17,7 @@ export function listPropertyView(compType: ListCompType) {
       <>
         <Section name={sectionNames.basic}>
           {children.noOfRows.propertyView({
-            label: trans("data"),
+            label: trans("listView.dataDesc"),
             tooltip: trans("listView.dataTooltip"),
           })}
           {compType === "grid" &&