@pisell/materials 1.0.12 → 1.0.13

package/es/components/MultipleContainersSortList/index.d.ts

@@ -1,12 +1,13 @@
 import React from "react";
 import { SortableItemProps } from "../DragSortList";
+import "./index.less";
 declare type IdType = string | number;
 export interface MultipleContainersSortListProps<T> {
     list: Record<string, T[]>;
     vertical?: boolean;
     wrapStyle?: React.CSSProperties;
     onChange: (val: Record<string, T[]>) => void;
-    renderContainer?: DefaultRenderContainerProps['renderContainer'];
+    renderContainer?: DefaultRenderContainerProps["renderContainer"];
     rowKey: IdType | ((val: T) => IdType);
     children: SortableItemProps<T>["children"];
 }

package/es/components/MultipleContainersSortList/index.js

@@ -19,7 +19,9 @@ import { SortableContext, arrayMove, verticalListSortingStrategy, useSortable }
 import { isFunction } from "@pisell/utils";
 import React, { useCallback, useEffect, useState } from "react";
 import { SortableItem } from "../DragSortList";
+import "./index.less";
 export var TRASH_ID = "void";
+var maxLength = 3;
 var DefaultRenderContainer = function DefaultRenderContainer(props) {
   var id = props.id,
     children = props.children,
@@ -103,6 +105,10 @@ var MultipleContainersSortList = function MultipleContainersSortList(props) {
       var newList = _objectSpread(_objectSpread({}, list), {}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, activeContainer, list[activeContainer].filter(function (item) {
         return getRowKey(item) !== active.id;
       })), _defineProperty(_objectSpread2, overContainer, [].concat(_toConsumableArray(list[overContainer].slice(0, newIndex)), [list[activeContainer][activeIndex]], _toConsumableArray(list[overContainer].slice(newIndex, list[overContainer].length)))), _objectSpread2));
+      if (overContainer === "quickFilter" && newList[overContainer].length > maxLength) {
+        var _objectSpread3;
+        newList = _objectSpread(_objectSpread({}, newList), {}, (_objectSpread3 = {}, _defineProperty(_objectSpread3, overContainer, newList[overContainer].slice(0, maxLength)), _defineProperty(_objectSpread3, activeContainer, [].concat(_toConsumableArray(newList[overContainer].slice(maxLength)), _toConsumableArray(newList[activeContainer]))), _objectSpread3));
+      }
       onChange === null || onChange === void 0 ? void 0 : onChange(newList);
     }
   };
@@ -143,14 +149,16 @@ var MultipleContainersSortList = function MultipleContainersSortList(props) {
         return getRowKey(item);
       }),
       strategy: verticalListSortingStrategy
-    }, list[container].map(function (item, index) {
+    }, list[container].length ? list[container].map(function (item, index) {
       return /*#__PURE__*/React.createElement(SortableItem, {
         key: getRowKey(item),
         id: getRowKey(item),
         item: item,
         index: index
       }, children);
-    })));
+    }) : /*#__PURE__*/React.createElement("span", {
+      className: "materials-sort-list-empty"
+    }, "No filter options available.")));
   })));
 };
 export default MultipleContainersSortList;

package/es/components/MultipleContainersSortList/index.less

@@ -0,0 +1,6 @@
+.materials-sort-list-empty {
+  display: block;
+  color: #5a5a5a;
+  text-align: center;
+  padding-top: 22px;
+}

package/es/components/Pagination/index.js

@@ -0,0 +1,142 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { useMemo } from "react";
+import { ArrowLeft, ArrowRight } from "@pisell/icon";
+import { Pagination as OriginPagination } from "antd";
+import classNames from "classnames";
+import { useResponsive } from "../../hooks";
+import "./index.less";
+
+/**
+ * @title: 自定义渲染
+ * @description:
+ * @return {*}
+ * @Author: zhiwei.Wang
+ * @Date: 2023-07-20 17:01
+ */
+var itemRender = function itemRender(_, type, originalElement) {
+  if (type === "prev") {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames("paginator-page-btn", "left")
+    }, /*#__PURE__*/React.createElement(ArrowLeft, {
+      className: "paginator-page-btn-left-icon"
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "paginator-page-btn-text"
+    }, "Previous"));
+  }
+  if (type === "next") {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames("paginator-page-btn", "right")
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "paginator-page-btn-text"
+    }, "Next"), /*#__PURE__*/React.createElement(ArrowRight, {
+      className: "paginator-page-btn-right-icon"
+    }));
+  }
+  return originalElement;
+};
+
+// 分页配置
+export var paginationConfig = {
+  className: "materials-grid-paginator",
+  defaultCurrent: 1,
+  showTotal: function showTotal(total, range) {
+    return "Page ".concat(range[0], " of ").concat(range[1]);
+  },
+  itemRender: itemRender,
+  responsive: true,
+  size: "small"
+};
+var Pagination = function Pagination(props) {
+  var responsive = useResponsive();
+  var show = useMemo(function () {
+    return Object.keys(props).length;
+  }, [props]);
+  var content = useMemo(function () {
+    if (!show) {
+      return null;
+    }
+    var Com = OriginPagination;
+
+    // 移动端使用简单分页
+    if (responsive === "phone") {
+      Com = MiniPagination;
+    }
+    return /*#__PURE__*/React.createElement(Com, _extends({}, paginationConfig, props));
+  }, [show, paginationConfig, props, responsive]);
+  return content;
+};
+export default Pagination;
+var MiniPagination = function MiniPagination(props) {
+  var _props$current = props.current,
+    current = _props$current === void 0 ? 1 : _props$current,
+    _props$pageSize = props.pageSize,
+    pageSize = _props$pageSize === void 0 ? 10 : _props$pageSize,
+    _props$total = props.total,
+    total = _props$total === void 0 ? 0 : _props$total;
+
+  // 最大翻页
+  var MAX = useMemo(function () {
+    return Math.ceil(total / pageSize);
+  }, [total, pageSize]);
+
+  // 最小翻页
+  var MIN = useMemo(function () {
+    return 1;
+  }, []);
+
+  /**
+   * @title: 翻页回调
+   * @description:
+   * @param {*} type
+   * @return {*}
+   * @Author: zhiwei.Wang
+   * @Date: 2023-07-20 17:02
+   */
+  var onChange = function onChange(type) {
+    var currentPage = current;
+    if (type === "prev") {
+      currentPage = current - 1;
+    }
+    if (type === "next") {
+      currentPage = current + 1;
+    }
+    props.onChange && props.onChange(currentPage, pageSize || 10);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "materials-grid-paginator materials-grid-paginator-mini"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-lowcode-pagination-prev",
+    onClick: function onClick() {
+      if (current <= MIN) {
+        return;
+      }
+      onChange("prev");
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("paginator-page-btn", "left")
+  }, /*#__PURE__*/React.createElement(ArrowLeft, {
+    className: "paginator-page-btn-left-icon"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "materials-grid-paginator-center"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "materials-grid-paginator-center-text"
+  }, "Page"), /*#__PURE__*/React.createElement("span", {
+    className: "materials-grid-paginator-center-value"
+  }, current), /*#__PURE__*/React.createElement("span", {
+    className: "materials-grid-paginator-center-text"
+  }, "of"), /*#__PURE__*/React.createElement("span", {
+    className: "materials-grid-paginator-center-value"
+  }, MAX)), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-lowcode-pagination-next",
+    onClick: function onClick() {
+      if (current >= MAX) {
+        return;
+      }
+      onChange("next");
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("paginator-page-btn", "right")
+  }, /*#__PURE__*/React.createElement(ArrowRight, {
+    className: "paginator-page-btn-right-icon"
+  }))));
+};

package/{lib/components/table → es/components}/Pagination/index.less

@@ -148,4 +148,62 @@
       transform: rotate(180deg);
     }
   }
+}
+
+.materials-grid-paginator-mini {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  overflow: hidden;
+  height: 50px;
+  width: 100%;
+  background-color: #fff;
+  border-radius: 0 0 8px 8px;
+  border: 1px solid #f0f0f0;
+  border-top: none;
+  padding: 0 20px;
+  margin: 0 !important;
+
+  .paginator-page-btn {
+    padding: 8px;
+
+  }
+
+  .materials-grid-paginator-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+
+    .materials-grid-paginator-center-text {
+      color: var(--gray-700, #344054);
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+    }
+
+    .materials-grid-paginator-center-value {
+      color: var(--gray-700, #344054);
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+    }
+  }
+
+  .pisell-lowcode-pagination-prev,
+  .pisell-lowcode-pagination-next {
+    margin: 0;
+    border-radius: 8px;
+    border: 1px solid #D0D5DD;
+
+    .paginator-page-btn-left-icon {
+      margin-right: 0;
+    }
+
+    .paginator-page-btn-right-icon {
+      margin-left: 0;
+    }
+
+  }
+
 }

package/es/components/table/Actions/Filter/Dropdown/index.js

@@ -6,10 +6,15 @@ import "./index.less";
 import FilterItem from "../FilterItem";
 import { useSharedState } from "../../../../../hooks";
 import { Context } from "../../../model";
+import { Tooltip } from "antd";
 var titleMap = {
   quickFilter: "Quick Filter",
   otherFilter: "Filter"
 };
+var tooltipMap = {
+  quickFilter: "Enable quick filtering directly on the page for convenient filtering operations, with a maximum of three filters allowed.\n",
+  otherFilter: "Select filter criteria in the list to perform filtering operations and display corresponding results."
+};
 var DragItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var attributes = props.attributes,
     listeners = props.listeners,
@@ -58,9 +63,11 @@ var Dropdown = function Dropdown(props) {
       className: "filter-dropdown-container-title-wrap"
     }, /*#__PURE__*/React.createElement("span", {
       className: "filter-dropdown-container-title"
-    }, titleMap[id]), /*#__PURE__*/React.createElement(HelpCircle, {
+    }, titleMap[id]), /*#__PURE__*/React.createElement(Tooltip, {
+      title: tooltipMap[id]
+    }, /*#__PURE__*/React.createElement(HelpCircle, {
       className: "filter-dropdown-container-icon-help"
-    })), /*#__PURE__*/React.createElement("div", {
+    }))), /*#__PURE__*/React.createElement("div", {
       ref: ref,
       className: "filter-dropdown-container-filter-wrap"
     }, children));

package/es/components/table/Actions/Filter/Dropdown/index.less

@@ -1,5 +1,7 @@
 .filter-dropdown-wrap {
   width: 400px;
+  max-width: calc(100vw - 24px);
+  min-width: 250px;
   padding: 4px;
   max-height: 400px;
   display: flex;

package/es/components/table/BasicTable/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TableProps } from "antd";
+declare const BasicTable: (props: TableProps<any>) => JSX.Element;
+export default BasicTable;

package/es/components/table/BasicTable/index.js

@@ -0,0 +1,71 @@
+var _excluded = ["dataSource", "pagination"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { Table } from "antd";
+import React, { useState, useMemo } from "react";
+import Pagination from "../../Pagination";
+var BasicTable = function BasicTable(props) {
+  var dataSource = props.dataSource,
+    pagination = props.pagination,
+    other = _objectWithoutProperties(props, _excluded);
+  var _useState = useState(1),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentPage = _useState2[0],
+    setCurrentPage = _useState2[1];
+  var _useState3 = useState(10),
+    _useState4 = _slicedToArray(_useState3, 2),
+    pageSize = _useState4[0],
+    setPageSize = _useState4[1];
+
+  // 分割数据源
+  var _dataSource = useMemo(function () {
+    var list = (dataSource === null || dataSource === void 0 ? void 0 : dataSource.list) || [];
+    var total = (dataSource === null || dataSource === void 0 ? void 0 : dataSource.total) || 0;
+    if (Array.isArray(dataSource)) {
+      list = dataSource;
+      total = list.length;
+    }
+    list = list.slice((currentPage - 1) * pageSize, currentPage * pageSize);
+    return {
+      list: list,
+      total: total
+    };
+  }, [dataSource, currentPage, pageSize]);
+
+  // 总数
+  var total = useMemo(function () {
+    return (pagination === null || pagination === void 0 ? void 0 : pagination.total) || (_dataSource === null || _dataSource === void 0 ? void 0 : _dataSource.total) || 0;
+  }, [dataSource, pagination]);
+
+  /**
+   * @title: 翻页回调
+   * @description:
+   * @param {number} page
+   * @param {number} pageSize
+   * @return {*}
+   * @Author: zhiwei.Wang
+   * @Date: 2023-07-20 17:01
+   */
+  var onPaginationChange = function onPaginationChange(page, pageSize) {
+    setCurrentPage(page);
+    setPageSize(pageSize);
+  };
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Table, _extends({}, other, {
+    pagination: false,
+    dataSource: _dataSource === null || _dataSource === void 0 ? void 0 : _dataSource.list
+  })), /*#__PURE__*/React.createElement(Pagination, _extends({}, pagination, {
+    current: currentPage,
+    pageSize: pageSize,
+    onShowSizeChange: onPaginationChange,
+    onChange: onPaginationChange,
+    total: total
+  })));
+};
+export default BasicTable;

package/es/components/table/Table/fields/date/Show/index.js

@@ -1,6 +1,8 @@
 var _excluded = ["title", "editable", "dataIndex", "field_type", "record", "handleSave"];
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React from "react";
+import { formatDate } from "@pisell/utils";
 var Show = function Show(props) {
   var title = props.title,
     editable = props.editable,
@@ -11,6 +13,6 @@ var Show = function Show(props) {
     restProps = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/React.createElement("div", {
     className: ""
-  }, record[dataIndex]);
+  }, formatDate(record[dataIndex]));
 };
 export default Show;

package/es/components/table/Table/index.js

@@ -12,17 +12,17 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import { useSharedState, useResponsive } from "../../../hooks";
-import { Table } from "antd";
 // import { Access } from '@umijs/max';
 import React, { useCallback, useMemo } from "react";
 import { useMemoizedFn } from "ahooks";
 import { Context } from "../model";
 // import AddFieldModal from "./AddFieldModal";
 import "./index.less";
+import BasicTable from "../BasicTable";
 import SortRow from "./tableConfig/SortRow";
 import Body from "./tableConfig/body";
 import Header from "./tableConfig/header";
-import { paginationConfig } from "../Pagination";
+import { paginationConfig } from "../../Pagination";
 var GridViewTable = function GridViewTable(_ref) {
   var tableProps = _ref.tableProps;
   var responsive = useResponsive();
@@ -96,18 +96,13 @@ var GridViewTable = function GridViewTable(_ref) {
     if (tableProps.pagination === false) {
       return false;
     }
-    if (responsive === "phone") {
-      return _objectSpread(_objectSpread({}, tableProps.pagination), {}, {
-        size: "small"
-      });
-    }
     return _objectSpread(_objectSpread(_objectSpread({}, paginationConfig), tableProps.pagination), {}, {
       showTotal: showTotal
     });
   }, [responsive, tableProps.pagination]);
   return /*#__PURE__*/React.createElement("div", {
     className: "materials-grid-table-wrap"
-  }, /*#__PURE__*/React.createElement(SortRow, null, /*#__PURE__*/React.createElement(Table, _extends({
+  }, /*#__PURE__*/React.createElement(SortRow, null, /*#__PURE__*/React.createElement(BasicTable, _extends({
     dataSource: dataSource,
     columns: columns,
     className: "grid-view-table",

package/es/components/table/index.js

@@ -45,14 +45,15 @@ var GridView = Provider(function (props) {
     });
   }, [dataSource]);
   useEffect(function () {
+    var _filter$list, _filter$list$slice, _filter$list2, _filter$list2$slice;
     modal.dispatch({
       type: "setQuickFilter",
-      payload: filter.list
+      payload: (filter === null || filter === void 0 ? void 0 : (_filter$list = filter.list) === null || _filter$list === void 0 ? void 0 : (_filter$list$slice = _filter$list.slice) === null || _filter$list$slice === void 0 ? void 0 : _filter$list$slice.call(_filter$list, 0, 3)) || []
+    });
+    modal.dispatch({
+      type: "setOtherFilter",
+      payload: (filter === null || filter === void 0 ? void 0 : (_filter$list2 = filter.list) === null || _filter$list2 === void 0 ? void 0 : (_filter$list2$slice = _filter$list2.slice) === null || _filter$list2$slice === void 0 ? void 0 : _filter$list2$slice.call(_filter$list2, 3)) || []
     });
-    // modal.dispatch({
-    //   type: "setOtherFilter",
-    //   payload: filter,
-    // });
   }, [filter]);
   return /*#__PURE__*/React.createElement(Form, {
     form: form,

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

@@ -1,12 +1,13 @@
 import React from "react";
 import { SortableItemProps } from "../DragSortList";
+import "./index.less";
 declare type IdType = string | number;
 export interface MultipleContainersSortListProps<T> {
     list: Record<string, T[]>;
     vertical?: boolean;
     wrapStyle?: React.CSSProperties;
     onChange: (val: Record<string, T[]>) => void;
-    renderContainer?: DefaultRenderContainerProps['renderContainer'];
+    renderContainer?: DefaultRenderContainerProps["renderContainer"];
     rowKey: IdType | ((val: T) => IdType);
     children: SortableItemProps<T>["children"];
 }

package/lib/components/MultipleContainersSortList/index.js

@@ -38,7 +38,9 @@ var import_sortable = require("@dnd-kit/sortable");
 var import_utils = require("@pisell/utils");
 var import_react = __toESM(require("react"));
 var import_DragSortList = require("../DragSortList");
+var import_index = require("./index.less");
 var TRASH_ID = "void";
+var maxLength = 3;
 var DefaultRenderContainer = (props) => {
   const { id, children, renderContainer } = props;
   const { setNodeRef } = (0, import_sortable.useSortable)({
@@ -106,7 +108,7 @@ var MultipleContainersSortList = (props) => {
         const modifier = isBelowOverItem ? 1 : 0;
         newIndex = overIndex >= 0 ? overIndex + modifier : overItems.length + 1;
       }
-      const newList = {
+      let newList = {
         ...list,
         [activeContainer]: list[activeContainer].filter(
           (item) => getRowKey(item) !== active.id
@@ -117,6 +119,16 @@ var MultipleContainersSortList = (props) => {
           ...list[overContainer].slice(newIndex, list[overContainer].length)
         ]
       };
+      if (overContainer === "quickFilter" && newList[overContainer].length > maxLength) {
+        newList = {
+          ...newList,
+          [overContainer]: newList[overContainer].slice(0, maxLength),
+          [activeContainer]: [
+            ...newList[overContainer].slice(maxLength),
+            ...newList[activeContainer]
+          ]
+        };
+      }
       onChange == null ? void 0 : onChange(newList);
     }
   };
@@ -160,7 +172,7 @@ var MultipleContainersSortList = (props) => {
         items: list[container].map((item) => getRowKey(item)),
         strategy: import_sortable.verticalListSortingStrategy
       },
-      list[container].map((item, index) => /* @__PURE__ */ import_react.default.createElement(
+      list[container].length ? list[container].map((item, index) => /* @__PURE__ */ import_react.default.createElement(
         import_DragSortList.SortableItem,
         {
           key: getRowKey(item),
@@ -169,7 +181,7 @@ var MultipleContainersSortList = (props) => {
           index
         },
         children
-      ))
+      )) : /* @__PURE__ */ import_react.default.createElement("span", { className: "materials-sort-list-empty" }, "No filter options available.")
     )
   ))));
 };

package/lib/components/MultipleContainersSortList/index.less

@@ -0,0 +1,6 @@
+.materials-sort-list-empty {
+  display: block;
+  color: #5a5a5a;
+  text-align: center;
+  padding-top: 22px;
+}

package/lib/components/{table/Pagination → Pagination}/index.js

@@ -26,7 +26,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/table/Pagination/index.tsx
+// src/components/Pagination/index.tsx
 var Pagination_exports = {};
 __export(Pagination_exports, {
   default: () => Pagination_default,
@@ -37,6 +37,7 @@ var import_react = __toESM(require("react"));
 var import_icon = require("@pisell/icon");
 var import_antd = require("antd");
 var import_classnames = __toESM(require("classnames"));
+var import_hooks = require("../../hooks");
 var import_index = require("./index.less");
 var itemRender = (_, type, originalElement) => {
   if (type === "prev") {
@@ -56,13 +57,67 @@ var paginationConfig = {
   size: "small"
 };
 var Pagination = (props) => {
-  console.log(props);
+  const responsive = (0, import_hooks.useResponsive)();
   const show = (0, import_react.useMemo)(() => {
     return Object.keys(props).length;
   }, [props]);
-  return show ? /* @__PURE__ */ import_react.default.createElement(import_antd.Pagination, { ...paginationConfig, ...props }) : null;
+  const content = (0, import_react.useMemo)(() => {
+    if (!show) {
+      return null;
+    }
+    let Com = import_antd.Pagination;
+    if (responsive === "phone") {
+      Com = MiniPagination;
+    }
+    return /* @__PURE__ */ import_react.default.createElement(Com, { ...paginationConfig, ...props });
+  }, [show, paginationConfig, props, responsive]);
+  return content;
 };
 var Pagination_default = Pagination;
+var MiniPagination = (props) => {
+  const { current = 1, pageSize = 10, total = 0 } = props;
+  const MAX = (0, import_react.useMemo)(() => {
+    return Math.ceil(total / pageSize);
+  }, [total, pageSize]);
+  const MIN = (0, import_react.useMemo)(() => {
+    return 1;
+  }, []);
+  const onChange = (type) => {
+    let currentPage = current;
+    if (type === "prev") {
+      currentPage = current - 1;
+    }
+    if (type === "next") {
+      currentPage = current + 1;
+    }
+    props.onChange && props.onChange(currentPage, pageSize || 10);
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "materials-grid-paginator materials-grid-paginator-mini" }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "pisell-lowcode-pagination-prev",
+      onClick: () => {
+        if (current <= MIN) {
+          return;
+        }
+        onChange("prev");
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("paginator-page-btn", "left") }, /* @__PURE__ */ import_react.default.createElement(import_icon.ArrowLeft, { className: "paginator-page-btn-left-icon" }))
+  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "materials-grid-paginator-center" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "materials-grid-paginator-center-text" }, "Page"), /* @__PURE__ */ import_react.default.createElement("span", { className: "materials-grid-paginator-center-value" }, current), /* @__PURE__ */ import_react.default.createElement("span", { className: "materials-grid-paginator-center-text" }, "of"), /* @__PURE__ */ import_react.default.createElement("span", { className: "materials-grid-paginator-center-value" }, MAX)), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "pisell-lowcode-pagination-next",
+      onClick: () => {
+        if (current >= MAX) {
+          return;
+        }
+        onChange("next");
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("paginator-page-btn", "right") }, /* @__PURE__ */ import_react.default.createElement(import_icon.ArrowRight, { className: "paginator-page-btn-right-icon" }))
+  ));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   paginationConfig