@pisell/materials 1.0.206 → 1.0.208

package/lowcode/table/snippets.ts

@@ -1,42 +1,418 @@
 export default [
   {
-    title: '表格',
-    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/table-1.png',
+    title: "表格",
+    screenshot:
+      "https://alifd.alicdn.com/fusion-cool/icons/icon-antd/table-1.png",
     schema: {
-      componentName: 'Table',
+      componentName: "Table",
       props: {
         dataSource: [
           {
-            id: '1',
-            name: '胡彦斌',
+            id: "1",
+            name: "胡彦斌",
             age: 32,
-            address: '西湖区湖底公园1号',
+            address: "西湖区湖底公园1号",
           },
           {
-            id: '2',
-            name: '王一博',
+            id: "2",
+            name: "王一博",
             age: 28,
-            address: '滨江区网商路699号',
+            address: "滨江区网商路699号",
           },
         ],
         columns: [
           {
-            title: '姓名',
-            dataIndex: 'name',
-            key: 'name',
+            title: "姓名",
+            dataIndex: "name",
+            key: "name",
           },
           {
-            title: '年龄',
-            dataIndex: 'age',
-            key: 'age',
+            title: "年龄",
+            dataIndex: "age",
+            key: "age",
           },
         ],
-        rowKey: 'id',
+        rowKey: "id",
         pagination: {
           pageSize: 10,
           total: 15,
           current: 1,
         },
+        view: {
+          defaultViewMode: "grid",
+          multiple: false,
+        },
+        columnSetting: {
+          show: false,
+          storageMode: "",
+        },
+        sort: {
+          show: false,
+          storageMode: "",
+        },
+        dataSourceGroup: {
+          show: false,
+          storageMode: "",
+        },
+        filter: {
+          show: false,
+          sortButtonShow: false,
+          storageMode: "",
+          quickFilterMaxLength: 3,
+          list: [],
+        },
+        gallery: {
+          cardMinWidth: 260,
+          cardMaxWidth: 340,
+          horizontalGutter: 32,
+          verticalGutter: 32,
+          cover: {
+            show: true,
+            height: 230,
+            objectFit: "fill",
+          },
+          title: {
+            line: 2,
+          },
+          header: {
+            fields: {
+              show: false,
+            },
+          },
+          content: {},
+          footer: {},
+        },
+      },
+    },
+  },
+  {
+    title: "gallery视图",
+    schema: {
+      componentName: "Table",
+      props: {
+        dataSource: [
+          {
+            id: "1",
+            name: "胡彦斌",
+            age: 32,
+            address: "西湖区湖底公园1号",
+            image:
+              "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
+          },
+          {
+            id: "2",
+            name: "王一博",
+            age: 28,
+            address: "滨江区网商路699号",
+            image:
+              "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
+          },
+        ],
+        columns: [
+          {
+            title: "姓名",
+            dataIndex: "name",
+            key: "name",
+          },
+          {
+            title: "年龄",
+            dataIndex: "age",
+            key: "age",
+          },
+          {
+            title: "图片",
+            dataIndex: "image",
+            key: "image",
+            render: {
+              type: "JSSlot",
+              params: ["text", "record", "index"],
+              value: [
+                {
+                  componentName: "Image",
+                  id: "node_oclrybjvel2",
+                  props: {
+                    src: {
+                      type: "JSExpression",
+                      value: "this.text",
+                      mock: "",
+                    },
+                    height: 120,
+                    width: 120,
+                    preview: false,
+                    fallback: "",
+                  },
+                  hidden: false,
+                  title: "",
+                  isLocked: false,
+                  condition: true,
+                  conditionGroup: "",
+                },
+              ],
+              id: "node_oclrybjvel1",
+            },
+          },
+        ],
+        rowKey: "id",
+        pagination: {
+          pageSize: 10,
+          total: 15,
+          current: 1,
+          showSizeChanger: false,
+          showQuickJumper: false,
+          simple: false,
+          size: "default",
+        },
+        view: {
+          defaultViewMode: "gallery",
+          multiple: false,
+        },
+        columnSetting: {
+          show: true,
+          storageMode: "localStorage",
+        },
+        sort: {
+          show: false,
+          storageMode: "",
+        },
+        dataSourceGroup: {
+          show: false,
+          storageMode: "",
+        },
+        filter: {
+          show: false,
+          sortButtonShow: false,
+          storageMode: "",
+          quickFilterMaxLength: 3,
+          list: [],
+        },
+        gallery: {
+          cardMinWidth: 260,
+          cardMaxWidth: 340,
+          horizontalGutter: 32,
+          verticalGutter: 32,
+          cover: {
+            show: true,
+            height: 230,
+            objectFit: "cover",
+            fields: ["image"],
+          },
+          title: {
+            line: 2,
+            field: "name",
+          },
+          header: {
+            fields: {
+              show: false,
+            },
+          },
+          content: {
+            fields: [
+              {
+                columnKey: "name",
+                show: true,
+              },
+              {
+                columnKey: "age",
+                show: true,
+              },
+              {
+                columnKey: "image",
+                show: true,
+              },
+            ],
+          },
+          footer: {},
+        },
+      },
+    },
+  },
+  {
+    title: "grid多视图",
+    schema: {
+      componentName: "Table",
+      props: {
+        dataSource: [
+          {
+            id: "1",
+            name: "胡彦斌",
+            age: 32,
+            address: "西湖区湖底公园1号",
+            image:
+              "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
+          },
+          {
+            id: "2",
+            name: "王一博",
+            age: 28,
+            address: "滨江区网商路699号",
+            image:
+              "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
+          },
+        ],
+        columns: [
+          {
+            title: "姓名",
+            dataIndex: "name",
+            key: "name",
+          },
+          {
+            title: "年龄",
+            dataIndex: "age",
+            key: "age",
+          },
+          {
+            title: "图片",
+            dataIndex: "image",
+            key: "image",
+            render: {
+              type: "JSSlot",
+              params: ["text", "record", "index"],
+              value: [
+                {
+                  componentName: "Image",
+                  id: "node_oclrybjvel2",
+                  props: {
+                    src: {
+                      type: "JSExpression",
+                      value: "this.text",
+                      mock: "",
+                    },
+                    height: 120,
+                    width: 120,
+                    preview: false,
+                    fallback: "",
+                  },
+                  hidden: false,
+                  title: "",
+                  isLocked: false,
+                  condition: true,
+                  conditionGroup: "",
+                },
+              ],
+              id: "node_oclrybjvel1",
+            },
+          },
+        ],
+        rowKey: "id",
+        pagination: {
+          pageSize: 10,
+          total: 15,
+          current: 1,
+          showSizeChanger: false,
+          showQuickJumper: false,
+          simple: false,
+          size: "default",
+          localPagination: true,
+        },
+        view: {
+          defaultViewMode: "grid",
+          multiple: true,
+          modeList: ["grid", "gallery"],
+        },
+        columnSetting: {
+          show: true,
+          storageMode: "localStorage",
+        },
+        sort: {
+          show: true,
+          storageMode: "localStorage",
+          list: [
+            {
+              label: "标题",
+              type: "string",
+              columnKey: "name",
+              isCustom: false,
+            },
+            {
+              label: "标题",
+              type: "number",
+              columnKey: "age",
+              isCustom: false,
+            },
+          ],
+        },
+        dataSourceGroup: {
+          show: true,
+          storageMode: "localStorage",
+          list: [
+            {
+              label: "标题",
+              name: "",
+              columnKey: "name",
+              isCustom: false,
+            },
+            {
+              label: "标题",
+              name: "",
+              columnKey: "age",
+              isCustom: false,
+            },
+          ],
+        },
+        filter: {
+          show: true,
+          sortButtonShow: true,
+          storageMode: "",
+          quickFilterMaxLength: 3,
+          list: [
+            {
+              label: "标题",
+              type: "text",
+              key: "name",
+              columnKey: "name",
+              isCustom: false,
+              sort: true,
+              localFilter: true,
+            },
+            {
+              label: "标题",
+              type: "text",
+              key: "age",
+              columnKey: "age",
+              isCustom: false,
+              sort: true,
+              localFilter: true,
+            },
+          ],
+        },
+        gallery: {
+          cardMinWidth: 260,
+          cardMaxWidth: 340,
+          horizontalGutter: 32,
+          verticalGutter: 32,
+          cover: {
+            show: true,
+            height: 230,
+            objectFit: "cover",
+            fields: ["image"],
+          },
+          title: {
+            line: 2,
+            field: "name",
+          },
+          header: {
+            fields: {
+              show: false,
+            },
+          },
+          content: {
+            fields: [
+              {
+                columnKey: "name",
+                show: true,
+              },
+              {
+                columnKey: "age",
+                show: true,
+              },
+              {
+                columnKey: "image",
+                show: true,
+              },
+            ],
+          },
+          footer: {},
+        },
       },
     },
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "1.0.206",
+  "version": "1.0.208",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -29,7 +29,8 @@
     "webpack": "^4.27.1",
     "webpack-dev-server": "^4.0.0",
     "build-plugin-component": "^1.6.5",
-    "postcss-loader": "^4.3.0"
+    "postcss-loader": "^4.3.0",
+    "@types/react-window": "^1.8.8"
   },
   "publishConfig": {
     "access": "public"
@@ -57,6 +58,8 @@
     "@dnd-kit/utilities": "^3.2.1",
     "ahooks": "^3.7.6",
     "react-infinite-scroll-component": "^6.1.0",
+    "react-window": "^1.8.10",
+    "react-virtualized-auto-sizer": "^1.0.20",
     "@pisell/utils": "1.0.23",
     "@pisell/icon": "0.0.8",
     "@pisell/date-picker": "1.0.67"

package/dist/umd/materials.min.css

@@ -1 +0,0 @@
-.materials-grid{display:flex;flex-direction:column;height:100%;width:100%}.materials-grid-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.materials-grid-header .right-wrap{align-items:center;display:flex;gap:8px}.materials-grid-actions{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.materials-grid-actions .left-wrap{align-items:center;display:flex;flex:1 1}.materials-grid-actions .left-wrap .pisell-lowcode-form-item{margin-bottom:0}.materials-grid-actions .right-wrap{align-items:center;display:flex;gap:8px}.materials-grid-actions .right-wrap .icon{cursor:pointer;transition:.2s}.materials-grid-actions .right-wrap .icon:hover{color:var(--theme-color)}.materials-grid-actions .right-wrap .button{align-items:center;display:flex;font-size:12px;height:28px;justify-content:center}.filter-dropdown-wrap{display:flex;flex-direction:column;max-height:400px;max-width:calc(100vw - 24px);min-width:250px;padding:4px;width:400px}.filter-dropdown-wrap .filter-dropdown-wrap-content{flex:1 1;overflow:auto}.filter-dropdown-wrap .filter-dropdown-drag-item{align-items:center;background:#f9fafb;background:var(--gray-50,#f9fafb);border-radius:8px;display:flex;margin-bottom:12px;padding:8px 12px 12px}.filter-dropdown-wrap .filter-dropdown-drag-item .dots-six-icon{color:#98a2b3;cursor:pointer;font-size:24px}.filter-dropdown-wrap .filter-dropdown-drag-item .pisell-lowcode-form-item{margin-bottom:0}.filter-dropdown-wrap .filter-dropdown-drag-item .filter-dropdown-drag-item-right{flex:1 1;margin-left:16px}.filter-dropdown-wrap .filter-dropdown-drag-item .filter-dropdown-drag-item-right .filter-dropdown-drag-item-title{color:#777;color:var(--text-text-2,#777);font-size:14px;font-style:normal;font-weight:600;line-height:20px}.filter-dropdown-container-wrap{border-bottom:1px solid #e2e2e2;border-bottom:1px solid var(--surface-surface-4,#e2e2e2);margin-bottom:20px;min-height:70px}.filter-dropdown-container-wrap:last-child{border:none}.filter-dropdown-container-wrap .filter-dropdown-container-title-wrap{align-items:center;color:#919191;color:var(--text-text-3,#919191);display:flex;font-size:16px;font-style:normal;font-weight:600;line-height:22px;margin-bottom:12px}.filter-dropdown-container-wrap .filter-dropdown-container-title-wrap .filter-dropdown-container-title{color:#101828;color:var(--gray-900,#101828);font-size:16px;font-style:normal;font-weight:600;line-height:24px;margin-right:6px}.filter-dropdown-container-wrap .filter-dropdown-container-title-wrap .filter-dropdown-container-icon-help{color:#98a2b3;color:var(--gray-400,#98a2b3);font-size:20px}.filter-dropdown-container-wrap .filter-dropdown-container-filter-wrap{min-height:80px}.materials-sort-list-empty{color:#5a5a5a;display:block;padding-top:22px;text-align:center}.materials-grid-summary{margin-bottom:16px}.grid-view-table-wrap{position:relative}.materials-grid-paginator{align-items:center;background-color:#fff;border:1px solid #f0f0f0;border-radius:0 0 8px 8px;border-top:none;display:flex;height:50px;justify-content:center;margin:0!important;padding:0 20px;width:100%}.materials-grid-paginator .pisell-lowcode-pagination-total-text{color:#667085;color:var(--gray-500,#667085);font-size:14px;font-style:normal;font-weight:500;margin-right:auto}.materials-grid-paginator .pisell-lowcode-pagination-item{border:1px solid #d0d5dd;border-radius:0;border-right:0;margin:0;position:relative}.materials-grid-paginator .pisell-lowcode-pagination-jump-next,.materials-grid-paginator .pisell-lowcode-pagination-jump-prev{border:1px solid #d0d5dd;border-radius:0;border-right:none;margin:0}.materials-grid-paginator .pisell-lowcode-pagination-item-link:hover{color:rgba(0,0,0,.88)!important;font-weight:450!important}.materials-grid-paginator .pisell-lowcode-pagination-item-link:hover .pisell-lowcode-pagination-item-link-icon{color:rgba(0,0,0,.88)!important;font-weight:450!important}.materials-grid-paginator .pisell-lowcode-pagination-item-active:hover{border-color:#d0d5dd!important}.materials-grid-paginator .pisell-lowcode-pagination-item-active{background-color:rgba(0,0,0,.06)}.materials-grid-paginator .pisell-lowcode-pagination-item-active a{color:rgba(0,0,0,.88)!important;font-weight:450!important}.materials-grid-paginator .pisell-lowcode-pagination-prev{align-items:center;border:1px solid #d0d5dd;border-radius:8px 0 0 8px;border-right:none;display:flex;justify-content:center;margin:0;min-width:auto}.materials-grid-paginator .pisell-lowcode-pagination-next{align-items:center;border:1px solid #d0d5dd;border-radius:0 8px 8px 0;display:flex;justify-content:center;margin:0;min-width:auto}.paginator-page-btn{align-items:center;border-radius:4px 4px 4px 4px;color:#344054;color:var(--gray-700,#344054);cursor:pointer;display:flex;font-size:12px;font-weight:400;justify-content:center;padding:10px 16px;transition:.2s;-ms-user-select:none;user-select:none}.paginator-page-btn .paginator-page-btn-text{font-weight:600}.paginator-page-btn .paginator-page-btn-left-icon,.paginator-page-btn .paginator-page-btn-right-icon{font-size:20px}.paginator-page-btn .paginator-page-btn-left-icon{margin-right:8px}.paginator-page-btn .paginator-page-btn-right-icon{margin-left:8px}.paginator-page-btn.left{margin-right:auto}.paginator-page-btn.left .icon{font-size:18px;margin-right:8px}.paginator-page-btn.right{margin-left:auto}.paginator-page-btn.right .icon{font-size:18px;margin-left:8px;transform:rotate(180deg)}.materials-grid-paginator-mini{align-items:center;background-color:#fff;border:1px solid #f0f0f0;border-radius:0 0 8px 8px;border-top:none;display:flex;height:50px;justify-content:space-between;margin:0!important;overflow:hidden;padding:0 20px;width:100%}.materials-grid-paginator-mini .paginator-page-btn{padding:8px}.materials-grid-paginator-mini .materials-grid-paginator-center{align-items:center;display:flex;gap:4px;justify-content:center}.materials-grid-paginator-mini .materials-grid-paginator-center .materials-grid-paginator-center-text{color:#344054;color:var(--gray-700,#344054);font-size:14px;font-style:normal;font-weight:400}.materials-grid-paginator-mini .materials-grid-paginator-center .materials-grid-paginator-center-value{color:#344054;color:var(--gray-700,#344054);font-size:14px;font-style:normal;font-weight:500}.materials-grid-paginator-mini .pisell-lowcode-pagination-next,.materials-grid-paginator-mini .pisell-lowcode-pagination-prev{border:1px solid #d0d5dd;border-radius:8px;margin:0}.materials-grid-paginator-mini .pisell-lowcode-pagination-next .paginator-page-btn-left-icon,.materials-grid-paginator-mini .pisell-lowcode-pagination-prev .paginator-page-btn-left-icon{margin-right:0}.materials-grid-paginator-mini .pisell-lowcode-pagination-next .paginator-page-btn-right-icon,.materials-grid-paginator-mini .pisell-lowcode-pagination-prev .paginator-page-btn-right-icon{margin-left:0}.react-resizable{position:relative}.react-resizable-handle{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgd2lkdGg9IjYiIGhlaWdodD0iNiI+PHBhdGggZD0iTTYgNkgwVjQuMmg0LjJWMEg2djZaIiBvcGFjaXR5PSIuMzAyIi8+PC9zdmc+);background-origin:content-box;background-position:100% 100%;background-repeat:no-repeat;box-sizing:border-box;height:20px;padding:0 3px 3px 0;position:absolute;width:20px}.react-resizable-handle-sw{bottom:0;cursor:sw-resize;left:0;transform:rotate(90deg)}.react-resizable-handle-se{bottom:0;cursor:se-resize;right:0}.react-resizable-handle-nw{cursor:nw-resize;left:0;top:0;transform:rotate(180deg)}.react-resizable-handle-ne{cursor:ne-resize;right:0;top:0;transform:rotate(270deg)}.react-resizable-handle-e,.react-resizable-handle-w{cursor:ew-resize;margin-top:-10px;top:50%}.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-resizable-handle-n,.react-resizable-handle-s{cursor:ns-resize;left:50%;margin-left:-10px}.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}.materials-grid-table-header-cell{align-items:center;display:flex;height:44px;padding:0 14px}.materials-grid-table-header-cell .field-icon{color:#777;font-size:18px}.materials-grid-table-header-cell .materials-grid-table-header-cell-content{color:#1b1b1b;flex:auto;font-size:14px;font-weight:600;overflow:hidden;padding-right:10px;text-overflow:ellipsis;white-space:nowrap;word-break:break-all}.materials-grid-table-header-cell .actions{align-items:center;display:flex;gap:8px}.materials-grid-table-header-cell .actions .action{color:#ababab;cursor:pointer;font-size:14px}.editable-cell-value-wrap{height:100%;width:100%}.materials-grid-table-cell{height:1px;padding:0!important}.cell-provider{align-items:center;border-radius:4px;cursor:pointer;display:flex;height:100%;justify-content:center;padding:12px;position:relative;width:100%}.cell-provider.focus{box-shadow:var(--theme-color) 0 0 0 1px!important}