@pisell/materials 1.0.215 → 1.0.217

package/lib/components/table/model.js

@@ -30,62 +30,23 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var model_exports = {};
 __export(model_exports, {
   Context: () => Context,
-  Provider: () => Provider
+  Provider: () => Provider,
+  formatColumn: () => formatColumn
 });
 module.exports = __toCommonJS(model_exports);
 var import_miniRedux = __toESM(require("../../utils/miniRedux"));
 var defaultState = {
-  dataSource: [
-    {
-      key: "1",
-      id: 1,
-      name: "Olivia Rhye",
-      age: "32",
-      address: "London, Park Lane no. 0",
-      image: ["https://file.mypisell-dev.com//static/avatar.png"]
-    },
-    {
-      key: "2",
-      id: 2,
-      name: "Dianne Russell",
-      age: "32",
-      address: "London, Park Lane no. 1",
-      image: ["https://file.mypisell-dev.com//static/avatar.png"]
-    }
-  ],
-  defaultColumns: [
-    {
-      title: "Name",
-      dataIndex: "name",
-      field_type: "text",
-      editable: true,
-      width: 200,
-      fixed: "left",
-      lock: true
-    },
-    {
-      title: "Age",
-      dataIndex: "age",
-      editable: true,
-      width: 200,
-      field_type: "text",
-      lock: true
-    },
-    {
-      title: "Address",
-      dataIndex: "address",
-      editable: true,
-      width: 200,
-      field_type: "text"
-    },
-    {
-      title: "Image",
-      dataIndex: "image",
-      editable: true,
-      width: 200,
-      field_type: "image"
-    }
-  ],
+  // 表格id 用于缓存配置到localStorage
+  tableId: "",
+  // 是否使用本地数据模式
+  localPagination: false,
+  dataSource: [],
+  // 原始数据 用于回显
+  originDataSource: [],
+  defaultColumns: [],
+  // 原始列 用于列操作时还原
+  originColumns: [],
+  originColumnsMap: /* @__PURE__ */ new Map(),
   currentCell: null,
   quickFilter: [],
   otherFilter: [],
@@ -106,12 +67,26 @@ var { Provider, Context } = (0, import_miniRedux.default)({
     setDataSource(state, payload) {
       return { ...state, dataSource: payload };
     },
+    setOriginDataSource(state, payload) {
+      return { ...state, originDataSource: payload };
+    },
     setDefaultColumns(state, payload) {
       return {
         ...state,
         defaultColumns: payload.map((d) => formatColumn(d))
       };
     },
+    setOriginColumns(state, payload) {
+      const originColumns = payload.map((d) => formatColumn(d));
+      const originColumnsMap = new Map(
+        originColumns.map((item) => [item.key, item])
+      );
+      return {
+        ...state,
+        originColumns,
+        originColumnsMap
+      };
+    },
     setCurrentCell(state, payload) {
       return { ...state, currentCell: payload };
     },
@@ -129,13 +104,18 @@ var { Provider, Context } = (0, import_miniRedux.default)({
     },
     setOtherFilter(state, payload) {
       return { ...state, otherFilter: payload };
+    },
+    setTableId(state, payload) {
+      return { ...state, tableId: payload };
+    },
+    setLocalPagination(state, payload) {
+      return { ...state, localPagination: payload };
     }
   }
 });
 var formatColumn = (item) => {
   let _other = {
     editable: true,
-    width: 100,
     field_type: "text",
     lock: true,
     ...item.other || {}
@@ -148,5 +128,6 @@ var formatColumn = (item) => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Context,
-  Provider
+  Provider,
+  formatColumn
 });

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

@@ -0,0 +1,192 @@
+import { FilterType } from "../filter/types";
+import { SortItemProps } from "../sort/types";
+import React from "react";
+export declare type StorageMode = "" | "localStorage";
+/**
+ * 排序总配置
+ */
+export declare type SortType = {
+    /** 排序是否展示 */
+    show: boolean;
+    /** 排序存储模式 */
+    storageMode: StorageMode;
+    list: SortItemProps[];
+};
+/**
+ * 列展示总配置
+ */
+export declare type ColumnSettingType = {
+    /** 列设置是否展示 */
+    show: boolean;
+    /** 列设置存储模式 */
+    storageMode: StorageMode;
+};
+declare type DataSourceListItemType = {
+    isCustom: boolean;
+    columnKey?: string;
+    label?: string;
+    name?: string | string[];
+};
+/**
+ * 数据源分组总配置
+ */
+export declare type DataSourceGroupType = {
+    /** 分组设置是否展示 */
+    show: boolean;
+    /** 分组设置存储模式 */
+    storageMode: StorageMode;
+    /**  */
+    list: DataSourceListItemType[];
+};
+/**
+ * Gallery封面总配置
+ */
+declare type GalleryCoverType = {
+    /** 封面是否展示 */
+    show: boolean;
+    /**
+     * 封面图片可以使用的字段
+     */
+    fields: string[];
+    /**
+     * 封面高度
+     */
+    height: number;
+    /** 图片裁剪方式 */
+    objectFit: "fill" | "cover";
+};
+/**
+ * Gallery标题总配置
+ */
+declare type GalleryTitleType = {
+    /** 标题使用的字段 */
+    field: string;
+    /** 标题行数 */
+    line: number;
+};
+/**
+ * Gallery头部区域总配置
+ */
+declare type GalleryHeaderType = {
+    /** 头部区域插槽 */
+    slot?: (record: Record<string, any>, index: number) => React.ReactNode;
+    /** 头部区域其他字段设置 */
+    fields: {
+        /** 头部区域其他字段是否展示 */
+        show: boolean;
+        /** 头部区域其他字段 */
+        list: string[];
+    };
+};
+/**
+ * Gallery内容区域总配置
+ */
+declare type GalleryContentType = {
+    /** 内容区域字段配置 */
+    fields: {
+        columnKey: string;
+        show: boolean;
+    }[];
+};
+export declare type GallerySettingValueType = {
+    coverField: string | "noCover";
+    coverObjectFit: "fill" | "cover";
+    compactMode: "default" | "compact";
+    isShowLabel: boolean;
+};
+/**
+ * Gallery底部区域总配置
+ */
+declare type GalleryFooterType = {
+    /** 底部区域自定义渲染 */
+    render: (record: Record<string, any>, index: number) => React.ReactNode;
+    /** 底部区域高度 */
+    height: number;
+};
+/**
+ * Gallery模式总配置
+ */
+export declare type GallerySettingType = {
+    /** 卡片最小宽度 */
+    cardMinWidth: number;
+    /** 卡片最大宽度 */
+    cardMaxWidth: number;
+    /** 水平间隔 */
+    horizontalGutter: number;
+    /** 垂直间隔 */
+    verticalGutter: number;
+    /** 封面配置 */
+    cover: GalleryCoverType;
+    /** 标题配置 */
+    title: GalleryTitleType;
+    /** 头部区域 */
+    header: GalleryHeaderType;
+    /** 内容区域 */
+    content: GalleryContentType;
+    /** 固定高度 */
+    fixedHeight: boolean;
+    /** 固定的卡片高度 */
+    cardHeight: number;
+    /** 固定顶部 */
+    fixedHeader: boolean;
+    /** 固定底部 */
+    fixedFooter: boolean;
+    /** 底部区域 */
+    footer: GalleryFooterType;
+    /** 卡片点击时间 */
+    onItem: (record: Record<string, any>, index: number) => void;
+};
+/** 视图模式 */
+export declare type ModeType = "grid" | "gallery" | "kanban";
+/**
+ * 视图模式总配置
+ */
+export declare type GridViewType = {
+    /** 默认视图模式 */
+    defaultViewMode: ModeType;
+    /** 开启多视图模式可进行页面内转换 */
+    multiple: boolean;
+    /** 当前可用的视图模式列表 */
+    modeList: ModeType[];
+};
+declare type SortDetail = {
+    fromIndex: number;
+    toIndex: number;
+    dataSource: Record<string, any>[];
+    fromId: number | string;
+    toId: number | string;
+    fromItem: Record<string, any>;
+    toItem: Record<string, any>;
+};
+export declare type GridViewProps = {
+    columns: any;
+    dataSource: any[];
+    dispatch: any;
+    /**
+     * 画册模式的配置
+     */
+    gallery: GallerySettingType;
+    /**
+     * 视图设置
+     */
+    view: GridViewType;
+    style: React.CSSProperties;
+    pagination: any;
+    filter: FilterType;
+    buttons: any;
+    actionButtons: any;
+    sort: SortType;
+    title: any;
+    onValuesChange: (changedValues: any, values: any) => void;
+    summary: any;
+    utils: any;
+    rowKey: ((record: Record<string, any>) => string) | string;
+    columnSetting?: ColumnSettingType;
+    dataSourceGroup?: DataSourceGroupType;
+    loading: boolean;
+    dragSort: boolean;
+    onSortChange?: (detail: SortDetail) => boolean;
+    __id?: string;
+    __designMode?: "design";
+};
+export {};

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

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

@@ -1,4 +1,6 @@
-import { Component } from 'react';
+import React, { Component } from "react";
+import { TabsProps } from "antd";
+import "./index.less";
 declare class Tabs extends Component<any> {
     state: {
         activeKey: any;
@@ -6,6 +8,7 @@ declare class Tabs extends Component<any> {
     private _handleChange;
     setActiveKey: (key: string) => void;
     getActiveKey: () => any;
-    render(): JSX.Element;
+    renderIconLabelTabBar: TabsProps["renderTabBar"];
+    render(): React.JSX.Element;
 }
 export default Tabs;

package/lib/components/tabs/index.js

@@ -35,6 +35,9 @@ module.exports = __toCommonJS(tabs_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_warning = require("../../utils/warning");
+var import_classnames = __toESM(require("classnames"));
+var import_index = require("./index.less");
+var prefix = "pisell-lowcode-";
 var Tabs = class extends import_react.Component {
   constructor() {
     super(...arguments);
@@ -55,12 +58,51 @@ var Tabs = class extends import_react.Component {
     this.getActiveKey = () => {
       return this.state.activeKey;
     };
+    this.renderIconLabelTabBar = (props, DefaultTabBar) => {
+      const { items, sidebarWidth } = this.props;
+      let wrapStyle = {
+        gap: props.tabBarGutter
+      };
+      if (["left", "right"].includes(props.tabPosition)) {
+        wrapStyle = {
+          ...wrapStyle,
+          width: sidebarWidth || 130
+        };
+      }
+      return /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: (0, import_classnames.default)(
+            "pisell-lowcode-tabs-nav",
+            `${prefix}tab-bar-wrap`,
+            `${prefix}tab-bar-wrap-${props.tabPosition}`
+          ),
+          style: wrapStyle
+        },
+        items.map((item) => {
+          return /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              className: (0, import_classnames.default)(`${prefix}tab-bar-item`, {
+                [`${prefix}tab-bar-item-active`]: item.key === props.activeKey
+              }),
+              key: item.key,
+              onClick: (e) => props.onTabClick(item.key, e)
+            },
+            /* @__PURE__ */ import_react.default.createElement(import_antd.Badge, { count: item.badge, offset: [0, 6] }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}tab-bar-icon-wrap` }, item.icon)),
+            /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}tab-bar-label` }, item.label)
+          );
+        }),
+        props.extra
+      );
+    };
   }
   render() {
     const { props } = this;
     const { activeKey } = this.state;
-    const { children } = props;
+    const { children, type } = props;
     let items = props.items;
+    let otherProps = {};
     if (!props.items && Array.isArray(children) && children.length > 0) {
       (0, import_warning.warning)("Tabs.TabPane is deprecated. Please use `items` directly.");
       items = children.map((node) => {
@@ -77,10 +119,17 @@ var Tabs = class extends import_react.Component {
         return null;
       }).filter(Boolean);
     }
+    if (type === "icon-label") {
+      otherProps = {
+        renderTabBar: this.renderIconLabelTabBar,
+        type: "line"
+      };
+    }
     return /* @__PURE__ */ import_react.default.createElement(
       import_antd.Tabs,
       {
         ...props,
+        ...otherProps,
         items,
         activeKey,
         onChange: this._handleChange

package/lib/components/tabs/index.less

@@ -0,0 +1,60 @@
+@pisell-prefix: pisell-lowcode;
+
+.@{pisell-prefix} {
+  &-tabs-tabpane {
+    padding: 0 !important;
+  }
+  &-tab-bar-wrap {
+    display: flex;
+    flex-direction: column;
+    flex: none;
+  }
+  &-tab-bar-wrap-top,
+  &-tab-bar-wrap-bottom {
+    display: flex;
+    flex-direction: row;
+  }
+  &-tab-bar-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 16px;
+    cursor: pointer;
+  }
+  &-tab-bar-icon-wrap {
+    width: 50px;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 99px;
+    background: #f2f2f7;
+    margin-bottom: 6px;
+    color: #ACACAC;
+    transition: background 200ms ease-in-out, border-color 200ms ease-in-out;
+    border: 1px solid #f2f2f7;
+    &:hover {
+      border-color: #d5d7da;
+    }
+  }
+  &-tab-bar-label {
+    color: #0d1619;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+  }
+
+  &-tab-bar-item-active  &-tab-bar-icon-wrap {
+    background: var(--primary-600, #7F56D9);
+    color: #fff;
+  }
+  &-tab-bar-item-active > &-tab-bar-label {
+    color: var(--primary-600, #7F56D9);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
+  }
+}

package/lib/components/time-picker/index.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const TimePicker: (props: any) => JSX.Element;
+declare const TimePicker: (props: any) => import("react").JSX.Element;
 export default TimePicker;

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const Upload: (props: any) => JSX.Element;
+declare const Upload: (props: any) => import("react").JSX.Element;
 export default Upload;

package/lib/index.d.ts

@@ -14,8 +14,8 @@ export { Empty } from "antd";
 export { Grid } from "antd";
 export { Image } from "antd";
 export { InputNumber } from "antd";
-export { List } from "antd";
 export { message } from "antd";
+export { Menu } from "antd";
 export { Mentions } from "antd";
 export { Statistic } from "antd";
 export { notification } from "antd";
@@ -61,8 +61,14 @@ export { default as Cascader } from "./components/cascader";
 export { default as AutoComplete } from "./components/auto-complete";
 export { default as Div } from "./components/div";
 export { default as Page } from "./components/page";
+export { default as Component } from "./components/component";
 export { default as Filter } from "./components/filter";
 export { default as Translation } from "./components/translation";
 export { default as SortableList } from "./components/sortableList";
 export { default as RecordView } from "./components/record-view";
 export { default as QRCode } from "./components/qrcode";
+export { default as ClassicLayout } from "./components/classicLayout";
+export { default as List } from "./components/list";
+export { default as Sort } from "./components/sort";
+export { default as InputNumberRange } from "./components/input-number-range";
+export { default as LowCodePage } from "./components/lowCodePage";

package/lib/index.js

@@ -42,8 +42,10 @@ __export(src_exports, {
   Carousel: () => import_antd9.Carousel,
   Cascader: () => import_cascader.default,
   Checkbox: () => import_checkbox.default,
+  ClassicLayout: () => import_classicLayout.default,
   Col: () => import_antd10.Col,
   Collapse: () => import_antd8.Collapse,
+  Component: () => import_component.default,
   ConfigProvider: () => import_config_provider.default,
   DatePicker: () => import_date_picker.default,
   Descriptions: () => import_antd11.Descriptions,
@@ -59,8 +61,11 @@ __export(src_exports, {
   Image: () => import_antd15.Image,
   Input: () => import_input.default,
   InputNumber: () => import_antd16.InputNumber,
-  List: () => import_antd17.List,
+  InputNumberRange: () => import_input_number_range.default,
+  List: () => import_list.default,
+  LowCodePage: () => import_lowCodePage.default,
   Mentions: () => import_antd19.Mentions,
+  Menu: () => import_antd18.Menu,
   Modal: () => import_modal.default,
   Page: () => import_page.default,
   Pagination: () => import_antd22.Pagination,
@@ -76,6 +81,7 @@ __export(src_exports, {
   Select: () => import_select.default,
   Skeleton: () => import_skeleton.default,
   Slider: () => import_slider.default,
+  Sort: () => import_sort.default,
   SortableList: () => import_sortableList.default,
   Space: () => import_antd29.Space,
   Spin: () => import_antd30.Spin,
@@ -94,7 +100,7 @@ __export(src_exports, {
   TreeSelect: () => import_tree_select.default,
   Typography: () => import_typography.default,
   Upload: () => import_upload.default,
-  message: () => import_antd18.message,
+  message: () => import_antd17.message,
   notification: () => import_antd21.notification,
   version: () => import_antd38.version
 });
@@ -162,11 +168,17 @@ var import_cascader = __toESM(require("./components/cascader"));
 var import_auto_complete = __toESM(require("./components/auto-complete"));
 var import_div = __toESM(require("./components/div"));
 var import_page = __toESM(require("./components/page"));
+var import_component = __toESM(require("./components/component"));
 var import_filter = __toESM(require("./components/filter"));
 var import_translation = __toESM(require("./components/translation"));
 var import_sortableList = __toESM(require("./components/sortableList"));
 var import_record_view = __toESM(require("./components/record-view"));
 var import_qrcode = __toESM(require("./components/qrcode"));
+var import_classicLayout = __toESM(require("./components/classicLayout"));
+var import_list = __toESM(require("./components/list"));
+var import_sort = __toESM(require("./components/sort"));
+var import_input_number_range = __toESM(require("./components/input-number-range"));
+var import_lowCodePage = __toESM(require("./components/lowCodePage"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Affix,
@@ -182,8 +194,10 @@ var import_qrcode = __toESM(require("./components/qrcode"));
   Carousel,
   Cascader,
   Checkbox,
+  ClassicLayout,
   Col,
   Collapse,
+  Component,
   ConfigProvider,
   DatePicker,
   Descriptions,
@@ -199,8 +213,11 @@ var import_qrcode = __toESM(require("./components/qrcode"));
   Image,
   Input,
   InputNumber,
+  InputNumberRange,
   List,
+  LowCodePage,
   Mentions,
+  Menu,
   Modal,
   Page,
   Pagination,
@@ -216,6 +233,7 @@ var import_qrcode = __toESM(require("./components/qrcode"));
   Select,
   Skeleton,
   Slider,
+  Sort,
   SortableList,
   Space,
   Spin,

package/lib/locales/en-US.d.ts

@@ -0,0 +1,31 @@
+declare const _default: {
+    "table-filter-search": string;
+    "table-filter-clear": string;
+    "table-filter-filter": string;
+    "table-filter-min": string;
+    "table-filter-max": string;
+    "table-pagination-previous": string;
+    "table-pagination-next": string;
+    "table-pagination-total": (current: string, total: string) => string;
+    "select-dropdown-render-select-all": string;
+    "sort-button-text": string;
+    "sort-oldest-to-newest": string;
+    "sort-newest-to-oldest": string;
+    "sort-a-z": string;
+    "sort-z-a": string;
+    "sort-from-morning-to-night": string;
+    "sort-from-evening-to-morning": string;
+    "sort-0-9": string;
+    "sort-9-0": string;
+    "table-action-filter-button": string;
+    "table-action-filter-quick-filter": string;
+    "table-action-filter-quick-filter-tip": (count: number) => string;
+    "table-action-filter-other-filter": string;
+    "table-action-filter-other-filter-tip": () => string;
+    "table-action-group-by-title": string;
+    "table-action-group-by-title-tip": string;
+    "table-action-column-title": string;
+    "table-column-group-records": string;
+    "table-column-drag-sort-disabled-tip": string;
+};
+export default _default;