@pisell/materials 6.0.14 → 6.0.16

package/lib/components/pisellNavigationMenu/PisellNavigationMenu.js

@@ -0,0 +1,231 @@
+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/pisellNavigationMenu/PisellNavigationMenu.tsx
+var PisellNavigationMenu_exports = {};
+__export(PisellNavigationMenu_exports, {
+  default: () => PisellNavigationMenu_default
+});
+module.exports = __toCommonJS(PisellNavigationMenu_exports);
+var import_react = __toESM(require("react"));
+var import_pisellDropSort = __toESM(require("../pisellDropSort"));
+var import_pisellTags = __toESM(require("../pisellTags"));
+var import_icon = __toESM(require("../icon"));
+var import_button = __toESM(require("../button"));
+var import_locales = require("../../locales");
+var import_antd = require("antd");
+var import_pisellEmpty = __toESM(require("../pisellEmpty"));
+var import_utils = require("./utils");
+var import_PisellNavigationMenu = require("./PisellNavigationMenu.less");
+var PisellNavigationMenu = ({
+  value = [],
+  allowDrag = true,
+  allowDelete = true,
+  allowAddChild = true,
+  allowAddRoot = true,
+  disabled = false,
+  spacing = 8,
+  maxLevel = 3,
+  style,
+  className,
+  onChange,
+  onAddSubMenu,
+  onAddPage,
+  onEdit,
+  onDelete,
+  __designMode,
+  title
+}) => {
+  const convertToNavigationItems = (items2) => {
+    return items2.map((item) => ({
+      id: String(item.id),
+      title: String(item.title || ""),
+      path: String(item.path || "/"),
+      children: item.children ? convertToNavigationItems(item.children) : []
+    }));
+  };
+  const items = (0, import_react.useMemo)(() => {
+    return [
+      {
+        label: (0, import_locales.getText)("pisell-lowcode-navigation-menu-add-sub-menu"),
+        key: "add-child"
+      },
+      {
+        label: (0, import_locales.getText)("pisell-lowcode-navigation-menu-add-page"),
+        key: "add-page"
+      }
+    ];
+  }, []);
+  const handleClick = (0, import_react.useCallback)((key, item) => {
+    if (key === "add-child") {
+      onAddSubMenu == null ? void 0 : onAddSubMenu(item);
+    } else if (key === "add-page") {
+      onAddPage == null ? void 0 : onAddPage(item);
+    }
+  }, []);
+  const renderMenuItem = (0, import_react.useCallback)(
+    (itemProps) => {
+      const { item } = itemProps;
+      const { allowEdit = true, allowDelete: allowDelete2 = true, allowAddChild: allowAddChild2 = true, allowAddSubmenu = true, allowAddPage = true } = item;
+      const isShowAddButton = item.isGroup && allowAddChild2 && (allowAddSubmenu || allowAddPage);
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-navigation-menu-item" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-navigation-menu-item-content" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-navigation-menu-item-content-icon" }, /* @__PURE__ */ import_react.default.createElement(import_icon.default, { type: item.icon })), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-navigation-menu-item-content-text" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-navigation-menu-item-title" }, item.title), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-navigation-menu-item-description" }, item.description, !item.isGroup && item.version && /* @__PURE__ */ import_react.default.createElement(import_pisellTags.default, { type: "pill_color", color: "success" }, item.version)))), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-navigation-menu-item-action-wrap" }, allowEdit && /* @__PURE__ */ import_react.default.createElement(
+        import_button.default,
+        {
+          type: "text",
+          onClick: () => onEdit == null ? void 0 : onEdit(item),
+          className: "pisell-lowcode-navigation-menu-item-action-button",
+          icon: /* @__PURE__ */ import_react.default.createElement(
+            import_icon.default,
+            {
+              type: "pisell2-edit-05",
+              className: "pisell-lowcode-navigation-menu-item-action-button-icon"
+            }
+          )
+        }
+      ), isShowAddButton && /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Dropdown,
+        {
+          menu: {
+            items: [
+              allowAddSubmenu && {
+                key: "add-child",
+                label: (0, import_locales.getText)("pisell-lowcode-navigation-menu-add-sub-menu"),
+                onClick: () => handleClick("add-child", item)
+              },
+              allowAddPage && {
+                key: "add-page",
+                label: (0, import_locales.getText)("pisell-lowcode-navigation-menu-add-page"),
+                onClick: () => handleClick("add-page", item)
+              }
+            ].filter(Boolean)
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_button.default,
+          {
+            type: "text",
+            className: "pisell-lowcode-navigation-menu-item-action-button",
+            icon: /* @__PURE__ */ import_react.default.createElement(
+              import_icon.default,
+              {
+                type: "pisell2-plus",
+                className: "pisell-lowcode-navigation-menu-item-action-button-icon"
+              }
+            )
+          }
+        )
+      ), allowDelete2 && /* @__PURE__ */ import_react.default.createElement(
+        import_button.default,
+        {
+          type: "text",
+          onClick: () => onDelete == null ? void 0 : onDelete(item),
+          className: "pisell-lowcode-navigation-menu-item-action-button",
+          icon: /* @__PURE__ */ import_react.default.createElement(
+            import_icon.default,
+            {
+              type: "pisell2-trash-01",
+              className: "pisell-lowcode-navigation-menu-item-action-button-icon"
+            }
+          )
+        }
+      )));
+    },
+    [value, onChange]
+  );
+  const handleChange = (0, import_react.useCallback)(
+    (items2) => {
+      onChange == null ? void 0 : onChange(convertToNavigationItems(items2));
+    },
+    [onChange]
+  );
+  const leftContent = (0, import_react.useMemo)(() => {
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-navigation-menu-left-content" }, title);
+  }, [title]);
+  const rightContent = (0, import_react.useMemo)(() => {
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-navigation-menu-right-content" }, /* @__PURE__ */ import_react.default.createElement(
+      import_button.default,
+      {
+        size: "large",
+        type: "primary",
+        icon: /* @__PURE__ */ import_react.default.createElement(import_icon.default, { type: "pisell2-plus" }),
+        onClick: () => onAddSubMenu == null ? void 0 : onAddSubMenu()
+      },
+      (0, import_locales.getText)("pisell-lowcode-navigation-menu-add-sub-menu")
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_button.default,
+      {
+        size: "large",
+        icon: /* @__PURE__ */ import_react.default.createElement(import_icon.default, { type: "pisell2-plus" }),
+        onClick: () => onAddPage == null ? void 0 : onAddPage()
+      },
+      (0, import_locales.getText)("pisell-lowcode-navigation-menu-add-page")
+    ));
+  }, [title]);
+  const formatValue = (0, import_react.useMemo)(() => {
+    return (0, import_utils.formatTree)(value, (item) => ({
+      ...item,
+      disabledDrop: !item.isGroup
+    }));
+  }, [value]);
+  const getItemStyle = (0, import_react.useCallback)((itemProps) => {
+    const { item } = itemProps;
+    return {
+      backgroundColor: item.isGroup ? "#fff" : "var(--Gray-50, #F9FAFB)"
+    };
+  }, []);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_pisellDropSort.default,
+    {
+      value: formatValue,
+      allowDrag,
+      allowDelete,
+      allowAddChild,
+      allowAddRoot,
+      disabled,
+      spacing,
+      maxLevel,
+      style,
+      className,
+      onChange: handleChange,
+      renderItem: renderMenuItem,
+      isCustomAction: true,
+      __designMode,
+      leftContent,
+      rightContent,
+      getItemStyle,
+      emptyContent: /* @__PURE__ */ import_react.default.createElement(
+        import_pisellEmpty.default,
+        {
+          maxWidth: 400,
+          description: (0, import_locales.getText)("pisell-lowcode-navigation-menu-add-page-tip")
+        }
+      )
+    }
+  );
+};
+var PisellNavigationMenu_default = PisellNavigationMenu;

package/lib/components/pisellNavigationMenu/PisellNavigationMenu.less

@@ -0,0 +1,65 @@
+.pisell-lowcode-navigation-menu-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .pisell-lowcode-navigation-menu-item-content {
+    flex: 1;
+    display: flex;
+    gap: 10px;
+    height: 100%;
+    align-items: center;
+    .pisell-lowcode-navigation-menu-item-content-icon {
+      height: 36px;
+      width: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+    }
+    .pisell-lowcode-navigation-menu-item-content-text {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .pisell-lowcode-navigation-menu-item-title {
+      color: var(--Gray-900, #101828);
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 20px; /* 142.857% */
+    }
+    .pisell-lowcode-navigation-menu-item-description {
+      color: var(--Gray-500, #667085);
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px; /* 142.857% */
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+  }
+  .pisell-lowcode-navigation-menu-item-action-wrap {
+    display: flex;
+    gap: 8px;
+    .pisell-lowcode-navigation-menu-item-action-button {
+      &:hover {
+        background: var(--Gray-300, #D0D5DD);
+      }
+    }
+    .pisell-lowcode-navigation-menu-item-action-button-icon {
+      font-size: 20px;
+      color: #101828;
+    }
+  }
+}
+
+.pisell-lowcode-navigation-menu-left-content {
+  color: var(--Gray-900, #101828);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px; /* 150% */
+}
+
+.pisell-lowcode-navigation-menu-right-content {
+  display: flex;
+  gap: 8px;
+}

package/lib/components/pisellNavigationMenu/index.d.ts

@@ -0,0 +1,3 @@
+import PisellNavigationMenu from './PisellNavigationMenu';
+export default PisellNavigationMenu;
+export type { PisellNavigationMenuProps, NavigationMenuItem } from './types';

package/lib/components/pisellNavigationMenu/index.js

@@ -0,0 +1,36 @@
+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/pisellNavigationMenu/index.tsx
+var pisellNavigationMenu_exports = {};
+__export(pisellNavigationMenu_exports, {
+  default: () => pisellNavigationMenu_default
+});
+module.exports = __toCommonJS(pisellNavigationMenu_exports);
+var import_PisellNavigationMenu = __toESM(require("./PisellNavigationMenu"));
+var pisellNavigationMenu_default = import_PisellNavigationMenu.default;

package/lib/components/pisellNavigationMenu/types.d.ts

@@ -0,0 +1,64 @@
+import { CSSProperties } from 'react';
+export interface NavigationMenuItem {
+    id: string;
+    /** 标题 */
+    title: string;
+    /** 图标 */
+    icon?: string;
+    /** 描述 */
+    description?: string;
+    /** 子菜单 */
+    children?: NavigationMenuItem[];
+    /** 版本 */
+    version?: string;
+    /** 是否是分组 */
+    isGroup?: boolean;
+    /** 是否允许添加子菜单 */
+    allowAddChild?: boolean;
+    /** 是否允许删除 */
+    allowDelete?: boolean;
+    /** 是否允许编辑 */
+    allowEdit?: boolean;
+    /** 是否允许添加子菜单 */
+    allowAddSubmenu?: boolean;
+    /** 是否允许添加页面 */
+    allowAddPage?: boolean;
+    /** 其他属性 */
+    [key: string]: any;
+}
+export interface PisellNavigationMenuProps {
+    /** 导航菜单数据 */
+    value: NavigationMenuItem[];
+    /** 是否允许拖拽排序 */
+    allowDrag?: boolean;
+    /** 是否允许删除菜单项 */
+    allowDelete?: boolean;
+    /** 是否允许添加子菜单 */
+    allowAddChild?: boolean;
+    /** 是否允许添加根菜单 */
+    allowAddRoot?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 菜单项间距 */
+    spacing?: number;
+    /** 最大层级数 */
+    maxLevel?: number;
+    /** 样式 */
+    style?: CSSProperties;
+    /** 类名 */
+    className?: string;
+    /** 数据变化回调 */
+    onChange?: (items: NavigationMenuItem[]) => void;
+    /** 设计模式 */
+    __designMode?: string;
+    /** 标题 */
+    title?: string;
+    /** 添加子菜单回调 */
+    onAddSubMenu?: (item?: NavigationMenuItem) => void;
+    /** 添加页面回调 */
+    onAddPage?: (item?: NavigationMenuItem) => void;
+    /** 编辑回调 */
+    onEdit?: (item: NavigationMenuItem) => void;
+    /** 删除回调 */
+    onDelete?: (item: NavigationMenuItem) => void;
+}

package/lib/components/pisellNavigationMenu/types.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/pisellNavigationMenu/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/components/pisellNavigationMenu/utils.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 树节点的基本接口
+ */
+export interface TreeNode {
+    [key: string]: any;
+    children?: TreeNode[];
+}
+/**
+ * 格式化树结构数据
+ * @param tree 要格式化的树结构数据
+ * @param formatter 格式化函数，用于处理每个节点
+ * @param childrenField 子节点字段名，默认为 'children'
+ * @returns 格式化后的树结构
+ */
+export declare function formatTree<T extends TreeNode, R = T>(tree: T[], formatter: (node: T, level: number, parent: T | null) => R, childrenField?: string): R[];

package/lib/components/pisellNavigationMenu/utils.js

@@ -0,0 +1,44 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellNavigationMenu/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  formatTree: () => formatTree
+});
+module.exports = __toCommonJS(utils_exports);
+function formatTree(tree, formatter, childrenField = "children") {
+  const format = (nodes, level = 0, parent = null) => {
+    return nodes.map((node) => {
+      const formattedNode = formatter(node, level, parent);
+      if (node[childrenField] && Array.isArray(node[childrenField])) {
+        formattedNode[childrenField] = format(
+          node[childrenField],
+          level + 1,
+          node
+        );
+      }
+      return formattedNode;
+    });
+  };
+  return format(tree);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  formatTree
+});

package/lib/components/versionModal/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Version } from '../versionSelect';
 import './index.less';
 interface PublishVersionModalProps {
     visible: boolean;
@@ -6,10 +7,17 @@ interface PublishVersionModalProps {
     onCancel: () => void;
     onConfirm: (data: VersionData) => void;
     isShowNote?: boolean;
+    confirmLoading?: boolean;
+    versions?: Version[];
+    isShowBasedOn?: boolean;
+    isShowCurrentVersion?: boolean;
+    isValidateVersion?: boolean;
 }
 interface VersionData {
     version: string;
     note: string;
+    baseVersion?: string;
+    versionType?: string;
 }
 declare const PublishVersionModal: React.FC<PublishVersionModalProps>;
 export default PublishVersionModal;

package/lib/components/versionModal/index.js

@@ -35,6 +35,7 @@ module.exports = __toCommonJS(versionModal_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_pisellModal = __toESM(require("../pisellModal"));
+var import_versionSelect = __toESM(require("../versionSelect"));
 var import_locales = require("../../locales");
 var import_index = require("./index.less");
 var style = {
@@ -70,19 +71,26 @@ var PublishVersionModal = ({
   currentVersion = "1.0.0",
   onCancel,
   onConfirm,
-  isShowNote = true
+  isShowNote,
+  confirmLoading = false,
+  versions = [],
+  isShowBasedOn,
+  isShowCurrentVersion,
+  isValidateVersion = true
 }) => {
   const [form] = import_antd.Form.useForm();
-  const [versionType, setVersionType] = (0, import_react.useState)("patch");
+  const [versionType, setVersionType] = (0, import_react.useState)("");
   const { patch, minor, major } = getNextVersions(currentVersion);
   const handleVersionChange = (e) => {
     setVersionType(e.target.value);
   };
   const handleSubmit = () => {
     form.validateFields().then((values) => {
-      let { version, note } = values;
+      let { version, note, baseVersion } = values;
+      let versionType2 = "";
       if (version === "custom") {
-        if (!isVersionValid(
+        versionType2 = "custom";
+        if (isValidateVersion && !isVersionValid(
           `${values.major}.${values.minor}.${values.patch}`,
           currentVersion
         )) {
@@ -91,16 +99,18 @@ var PublishVersionModal = ({
         }
         version = `${values.major}.${values.minor}.${values.patch}`;
       }
-      onConfirm({ version, note });
+      onConfirm({ version, note, baseVersion, versionType: versionType2 });
     });
   };
   (0, import_react.useEffect)(() => {
     if (visible) {
+      setVersionType("");
       form.setFieldsValue({
         version: patch,
         major: parseVersion(patch)[0] || 0,
         minor: parseVersion(patch)[1] || 0,
-        patch: parseVersion(patch)[2] || 0
+        patch: parseVersion(patch)[2] || 0,
+        baseVersion: currentVersion
       });
     }
   }, [visible]);
@@ -113,7 +123,8 @@ var PublishVersionModal = ({
       destroyOnClose: true,
       onOk: handleSubmit,
       okText: (0, import_locales.getText)("pisell-version-modal-confirm"),
-      cancelText: (0, import_locales.getText)("pisell-version-modal-cancel")
+      cancelText: (0, import_locales.getText)("pisell-version-modal-cancel"),
+      confirmLoading
     },
     /* @__PURE__ */ import_react.default.createElement(
       import_antd.Form,
@@ -123,7 +134,23 @@ var PublishVersionModal = ({
         preserve: false,
         className: "pisell-lowcode-version-modal-form"
       },
-      /* @__PURE__ */ import_react.default.createElement("p", null, (0, import_locales.getText)("pisell-version-modal-current-version"), ": ", currentVersion),
+      isShowCurrentVersion && /* @__PURE__ */ import_react.default.createElement("p", { className: "pisell-lowcode-version-modal-current-version" }, (0, import_locales.getText)("pisell-version-modal-current-version"), ": ", currentVersion),
+      isShowBasedOn && /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Form.Item,
+        {
+          label: (0, import_locales.getText)("pisell-version-modal-based-on-version"),
+          name: "baseVersion",
+          initialValue: currentVersion,
+          rules: [{ required: true }]
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_versionSelect.default,
+          {
+            versions,
+            fieldNames: { label: "label", value: "version", options: "options" }
+          }
+        )
+      ),
       /* @__PURE__ */ import_react.default.createElement(
         import_antd.Form.Item,
         {

package/lib/components/versionModal/index.less

@@ -1,3 +1,10 @@
 .pisell-lowcode-version-modal-form {
-    padding: 24px 0 0 !important;
-}
+  padding: 16px 0 0 !important;
+}
+
+.pisell-lowcode-version-modal-current-version {
+  color: var(--Gray-500, #667085);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px; /* 150% */
+}

package/lib/components/versionSelect/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { SelectProps } from 'antd';
+import './index.less';
+export interface Version {
+    id: string;
+    label: string;
+    value: string;
+    status: 'live' | 'draft' | 'deprecated';
+    version: string;
+    avatar?: string;
+}
+interface VersionSelectProps extends Omit<SelectProps<string>, 'onChange' | 'options'> {
+    versions: Version[];
+    value?: string;
+    onChange?: (value: string, version: Version) => void;
+}
+declare const VersionSelect: (props: VersionSelectProps) => React.JSX.Element;
+export default VersionSelect;