@pisell/materials 3.0.62 → 6.0.2

package/lib/components/dataSourceComponents/fields/TimePicker/WithMode.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TimePickerProps } from './type';
+import './style.less';
+declare const TimePickerWithMode: React.FC<TimePickerProps & import("../../dataSourceForm/utils").WithModeProps>;
+export default TimePickerWithMode;

package/lib/components/dataSourceComponents/fields/TimePicker/WithMode.js

@@ -0,0 +1,137 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dataSourceComponents/fields/TimePicker/WithMode.tsx
+var WithMode_exports = {};
+__export(WithMode_exports, {
+  default: () => WithMode_default
+});
+module.exports = __toCommonJS(WithMode_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_dayjs = __toESM(require("dayjs"));
+var import_classnames = __toESM(require("classnames"));
+var import_utils = require("@pisell/utils");
+var import_select_time = __toESM(require("../../../select-time"));
+var import_usePisellConfig = __toESM(require("../../../pisell-config-provider/hooks/usePisellConfig"));
+var import_utils2 = require("../../../table/Table/utils");
+var import_ReadPretty = __toESM(require("./ReadPretty"));
+var import_utils3 = require("../../dataSourceForm/utils");
+var import_style = require("./style.less");
+var TimePicker = (props) => {
+  const config = (0, import_usePisellConfig.default)();
+  const {
+    format = "HH:mm",
+    className,
+    size = "middle",
+    value,
+    onChange,
+    disabled,
+    placeholder,
+    defaultValue: propsDefaultValue
+  } = props;
+  const normalizedValue = (0, import_react.useMemo)(() => {
+    if (!value)
+      return void 0;
+    if (import_dayjs.default.isDayjs(value))
+      return value;
+    try {
+      return (0, import_dayjs.default)(String(value), format);
+    } catch {
+      return void 0;
+    }
+  }, [value, format]);
+  const defaultValue = (0, import_react.useMemo)(() => {
+    if (!propsDefaultValue)
+      return void 0;
+    if (import_dayjs.default.isDayjs(propsDefaultValue))
+      return propsDefaultValue;
+    try {
+      return (0, import_dayjs.default)(String(propsDefaultValue), format);
+    } catch {
+      return void 0;
+    }
+  }, [propsDefaultValue, format]);
+  if (config.platform === "h5") {
+    const sizeClassMap = {
+      large: "pisell-h5-time-picker-lg",
+      middle: "",
+      small: "pisell-h5-time-picker-sm"
+    };
+    const timeFormat = (0, import_utils.isString)(format) ? format : "HH:mm:ss";
+    const stepValue = timeFormat.includes("ss") ? 1 : 60;
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-h5-time-picker-wrapper" }, /* @__PURE__ */ import_react.default.createElement(
+      "input",
+      {
+        type: "time",
+        step: stepValue,
+        value: (normalizedValue == null ? void 0 : normalizedValue.format(timeFormat)) || "",
+        onChange: (e) => {
+          const timeString = e.target.value;
+          if (onChange && timeString) {
+            const today = (0, import_dayjs.default)().format("YYYY-MM-DD");
+            const timeValue = (0, import_dayjs.default)(`${today} ${timeString}`);
+            onChange(timeValue, timeValue.format(timeFormat));
+          }
+        },
+        disabled,
+        placeholder,
+        className: (0, import_classnames.default)(
+          "pisell-h5-time-picker",
+          sizeClassMap[size],
+          className
+        )
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(import_icons.ClockCircleOutlined, { className: "pisell-h5-time-picker-suffix" }));
+  }
+  if (format === "HH:mm") {
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_select_time.default,
+      {
+        value: normalizedValue == null ? void 0 : normalizedValue.format("HH:mm"),
+        onChange: (timeString) => {
+          if (onChange) {
+            const timeValue = timeString ? (0, import_dayjs.default)(`${(0, import_dayjs.default)().format("YYYY-MM-DD")} ${timeString}`) : null;
+            onChange(timeValue, timeString || "");
+          }
+        },
+        timePickerProps: {
+          format,
+          ...(0, import_utils2.omit)(props, ["value", "defaultValue"]) || {}
+        },
+        popoverProps: {},
+        timeProps: {},
+        slice: 15
+      }
+    );
+  }
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.TimePicker, { ...props, value: normalizedValue, defaultValue });
+};
+var TimePickerWithMode = (0, import_utils3.withMode)(TimePicker, import_ReadPretty.default);
+var WithMode_default = TimePickerWithMode;

package/lib/components/dataSourceComponents/fields/TimePicker/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const TimePicker: React.FC<import("./type").TimePickerProps & import("../../dataSourceForm/utils").WithModeProps & import("../../dataSourceForm/utils").WithFormItemProps>;
+export default TimePicker;

package/lib/components/dataSourceComponents/fields/TimePicker/index.js

@@ -0,0 +1,44 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dataSourceComponents/fields/TimePicker/index.tsx
+var TimePicker_exports = {};
+__export(TimePicker_exports, {
+  default: () => TimePicker_default
+});
+module.exports = __toCommonJS(TimePicker_exports);
+var import_utils = require("../../dataSourceForm/utils");
+var import_WithMode = __toESM(require("./WithMode"));
+var TimePicker = (0, import_utils.withFormItem)(import_WithMode.default, {
+  innerProps: {
+    style: {
+      width: "100%"
+    }
+  }
+});
+var TimePicker_default = TimePicker;

package/lib/components/dataSourceComponents/fields/TimePicker/style.less

@@ -0,0 +1,86 @@
+.pisell-h5-time-picker-wrapper {
+  position: relative;
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+
+  .pisell-h5-time-picker-suffix {
+    position: absolute;
+    right: 11px;
+    color: var(--pisell-lowcode-color-icon, #98A2B3);
+    pointer-events: none;
+    z-index: 1;
+    cursor: pointer;
+  }
+}
+
+.pisell-h5-time-picker {
+  width: 100%;
+  padding: 4px 11px;
+  color: var(--pisell-lowcode-color-text);
+  font-size: 14px;
+  line-height: 1.5714285714285714;
+  background-color: var(--pisell-lowcode-color-bg-container);
+  border: 1px solid var(--pisell-lowcode-color-border);
+  border-radius: var(--pisell-lowcode-border-radius);
+  transition: all 0.2s;
+  outline: none;
+  box-sizing: border-box;
+
+  // 让原生图标透明但保持可点击
+  &::-webkit-calendar-picker-indicator {
+    opacity: 0;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    position: absolute;
+    right: 8px;
+  }
+  &::-webkit-time-picker-indicator {
+    opacity: 0;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    position: absolute;
+    right: 8px;
+  }
+
+  // 默认是 middle 尺寸
+  height: 32px;
+
+  &.pisell-h5-time-picker-lg {
+    padding: 7px 11px;
+    height: 40px;
+    font-size: 16px;
+  }
+
+  &.pisell-h5-time-picker-sm {
+    padding: 0px 7px;
+    height: 24px;
+  }
+
+  &:hover {
+    border-color: var(--pisell-lowcode-color-primary);
+  }
+
+  &:focus {
+    border-color: var(--pisell-lowcode-color-primary);
+    box-shadow: 0 0 0 2px var(--pisell-lowcode-color-primary-bg-hover);
+    outline: 0;
+  }
+
+  &:disabled {
+    color: var(--pisell-lowcode-color-text-disabled);
+    background-color: var(--pisell-lowcode-color-bg-container-disabled);
+    border-color: var(--pisell-lowcode-color-border);
+    box-shadow: none;
+    cursor: not-allowed;
+  }
+
+  &::placeholder {
+    color: var(--pisell-lowcode-color-text-placeholder);
+  }
+
+  // 添加右侧padding以容纳图标
+  padding-right: 30px !important;
+} 

package/lib/components/dataSourceComponents/fields/TimePicker/type.d.ts

@@ -0,0 +1,5 @@
+import { TimePickerProps as AntTimePickerProps } from 'antd';
+import { ModeType } from "../../dataSourceForm/type";
+export interface TimePickerProps extends Omit<AntTimePickerProps, 'renderMode'> {
+    renderMode: ModeType;
+}

package/lib/components/dataSourceComponents/fields/TimePicker/type.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dataSourceComponents/fields/TimePicker/type.ts
+var type_exports = {};
+module.exports = __toCommonJS(type_exports);

package/lib/components/dataSourceComponents/fields/Translation/BaseTranslation.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TranslationProps } from './type';
+import './index.less';
+declare const Translation: React.FC<TranslationProps>;
+export default Translation;

package/lib/components/dataSourceComponents/fields/Translation/BaseTranslation.js

@@ -0,0 +1,115 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dataSourceComponents/fields/Translation/BaseTranslation.tsx
+var BaseTranslation_exports = {};
+__export(BaseTranslation_exports, {
+  default: () => BaseTranslation_default
+});
+module.exports = __toCommonJS(BaseTranslation_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_locales = require("../../../../locales");
+var import_index = require("./index.less");
+var defaultValue = {
+  en: "",
+  "zh-CN": "",
+  "zh-HK": "",
+  original: ""
+};
+var languageConfig = [
+  { key: "original", label: (0, import_locales.getText)("pisell-translation-original") },
+  { key: "en", label: "English" },
+  { key: "zh-CN", label: "简体中文" },
+  { key: "zh-HK", label: "繁體中文" }
+];
+var Translation = ({
+  value = defaultValue,
+  onChange,
+  placeholder,
+  disabled
+}) => {
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const hasAnyTranslation = (0, import_react.useCallback)(() => {
+    if (!value) {
+      return false;
+    }
+    return Object.entries(value).some(([key, val]) => key !== "original" && val);
+  }, [value]);
+  const handleInputChange = (0, import_react.useCallback)(
+    (lang) => (e) => {
+      const newValue = {
+        ...value,
+        [lang]: e.target.value
+      };
+      onChange == null ? void 0 : onChange(newValue);
+    },
+    [value, onChange]
+  );
+  const content = /* @__PURE__ */ import_react.default.createElement("div", { className: "translation-popover" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { direction: "vertical", style: { width: "100%" }, size: 16 }, languageConfig.map(({ key, label }) => /* @__PURE__ */ import_react.default.createElement("div", { key, className: "translation-field" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "translation-label" }, label), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Input,
+    {
+      value: (value == null ? void 0 : value[key]) || "",
+      onChange: handleInputChange(key),
+      allowClear: true
+    }
+  )))));
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "translation-wrapper" }, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Input,
+    {
+      value: (value == null ? void 0 : value.original) || "",
+      onChange: handleInputChange("original"),
+      placeholder,
+      disabled,
+      className: "translation-input"
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Popover,
+    {
+      content,
+      trigger: "click",
+      open,
+      onOpenChange: (open2) => {
+        if (disabled) {
+          return;
+        }
+        setOpen(open2);
+      },
+      placement: "bottomRight"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `translation-icon-wrapper ${hasAnyTranslation() ? "has-translation" : ""} ${disabled ? "disabled" : ""}`
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_icons.GlobalOutlined, { className: "translation-icon" })
+    )
+  ));
+};
+var BaseTranslation_default = Translation;

package/lib/components/dataSourceComponents/fields/Translation/ReadPretty.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TranslationProps } from './type';
+import './ReadPretty.less';
+declare const TranslationReadPretty: (props: TranslationProps) => React.JSX.Element;
+export default TranslationReadPretty;

package/lib/components/dataSourceComponents/fields/Translation/ReadPretty.js

@@ -0,0 +1,50 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dataSourceComponents/fields/Translation/ReadPretty.tsx
+var ReadPretty_exports = {};
+__export(ReadPretty_exports, {
+  default: () => ReadPretty_default
+});
+module.exports = __toCommonJS(ReadPretty_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_ReadPretty = require("./ReadPretty.less");
+var TranslationReadPretty = (props) => {
+  const { value, renderMode } = props;
+  return /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      className: (0, import_classnames.default)("pisell-translation-read-pretty", {
+        "pisell-translation-read-pretty-table-view": renderMode === "tableView"
+      })
+    },
+    (value == null ? void 0 : value.original) || ""
+  );
+};
+var ReadPretty_default = TranslationReadPretty;

package/lib/components/dataSourceComponents/fields/Translation/ReadPretty.less

@@ -0,0 +1,11 @@
+.pisell-translation-read-pretty {
+  color: var(--Gray-900, #101828);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px; /* 150% */
+}
+
+.pisell-translation-read-pretty-table-view {
+  font-size: 14px;
+  font-weight: 400;
+}

package/lib/components/dataSourceComponents/fields/Translation/WithMode.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TranslationProps } from './type';
+declare const TranslationWithMode: import("react").FC<TranslationProps & import("../../dataSourceForm/utils").WithModeProps>;
+export default TranslationWithMode;

package/lib/components/dataSourceComponents/fields/Translation/WithMode.js

@@ -0,0 +1,39 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dataSourceComponents/fields/Translation/WithMode.ts
+var WithMode_exports = {};
+__export(WithMode_exports, {
+  default: () => WithMode_default
+});
+module.exports = __toCommonJS(WithMode_exports);
+var import_ReadPretty = __toESM(require("./ReadPretty"));
+var import_utils = require("../../dataSourceForm/utils");
+var import_BaseTranslation = __toESM(require("./BaseTranslation"));
+var TranslationWithMode = (0, import_utils.withMode)(import_BaseTranslation.default, import_ReadPretty.default);
+var WithMode_default = TranslationWithMode;

package/lib/components/dataSourceComponents/fields/Translation/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Translation: React.FC<import("./type").TranslationProps & import("../../dataSourceForm/utils").WithModeProps & import("../../dataSourceForm/utils").WithFormItemProps>;
+export default Translation;

package/lib/components/dataSourceComponents/fields/Translation/index.js

@@ -0,0 +1,38 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dataSourceComponents/fields/Translation/index.tsx
+var Translation_exports = {};
+__export(Translation_exports, {
+  default: () => Translation_default
+});
+module.exports = __toCommonJS(Translation_exports);
+var import_utils = require("../../dataSourceForm/utils");
+var import_WithMode = __toESM(require("./WithMode"));
+var Translation = (0, import_utils.withFormItem)(import_WithMode.default);
+var Translation_default = Translation;

package/lib/components/dataSourceComponents/fields/Translation/index.less

@@ -0,0 +1,58 @@
+.translation-wrapper {
+  position: relative;
+
+  .translation-input {
+    padding-right: 40px;
+  }
+
+  .translation-icon-wrapper {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    padding: 0 13px;
+    display: flex;
+    align-items: center;
+    border-radius: 0 6px 6px 0;
+    transition: all 0.3s;
+    cursor: pointer;
+    .translation-icon {
+      color: #d9d9d9;
+      transition: all 0.3s;
+    }
+
+    &.has-translation {
+      background-color: var(--theme-color, #7F56D9);
+      transition: all 0.3s;
+      .translation-icon {
+        transition: all 0.3s;
+        color: #fff;
+      }
+    }
+
+    &:hover {
+      .translation-icon {
+        color: #a481e6;
+      }
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+
+     .translation-icon {
+        color: #d9d9d9;
+      }
+    }
+  }
+}
+
+.translation-popover {
+  min-width: 300px;
+  padding: 8px;
+
+  .translation-field {
+    .translation-label {
+      margin-bottom: 8px;
+    }
+  }
+} 

package/lib/components/dataSourceComponents/fields/Translation/type.d.ts

@@ -0,0 +1,15 @@
+import { ModeType } from "../../dataSourceForm/type";
+export interface TranslationValue {
+    en: string;
+    'zh-CN': string;
+    'zh-HK': string;
+    original: string;
+}
+export interface TranslationProps {
+    renderMode: ModeType;
+    value?: TranslationValue;
+    onChange?: (value: TranslationValue) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    className?: string;
+}