@pisell/materials 1.0.206 → 1.0.208

package/lowcode/table/meta.ts

@@ -330,6 +330,420 @@ export default {
         },
       },
     },
+    {
+      title: "视图",
+      display: "block",
+      type: "group",
+      items: [
+        {
+          name: "view.defaultViewMode",
+          title: {
+            label: "默认视图",
+            tip: "view.defaultViewMode | 组件默认展示视图",
+          },
+          propType: "string",
+          setter: {
+            componentName: "RadioGroupSetter",
+            props: {
+              options: [
+                {
+                  title: "Grid",
+                  value: "grid",
+                },
+                {
+                  title: "Gallery",
+                  value: "gallery",
+                },
+                {
+                  title: "Kanban",
+                  value: "kanban",
+                },
+              ],
+            },
+          },
+        },
+        {
+          name: "view.multiple",
+          title: {
+            label: "开启多视图",
+            tip: "view.multiple | 开启多视图后可以进行不同组件类型切换",
+          },
+          propType: "bool",
+          setter: "BoolSetter",
+          defaultValue: false,
+        },
+        {
+          name: "view.modeList",
+          title: {
+            label: "多视图",
+            tip: "view.modeList | 组件多视图选项",
+          },
+          condition(target) {
+            return !!target.getProps().getPropValue("view.multiple");
+          },
+          setter: {
+            componentName: "SelectSetter",
+            props: {
+              mode: "multiple",
+              options: [
+                {
+                  title: "Grid",
+                  value: "grid",
+                },
+                {
+                  title: "Gallery",
+                  value: "gallery",
+                },
+                {
+                  title: "Kanban",
+                  value: "kanban",
+                },
+              ],
+            },
+          },
+        },
+      ],
+    },
+    {
+      title: "Gallery",
+      display: "entry",
+      type: "group",
+      items: [
+        {
+          name: "gallery.cardMinWidth",
+          title: { label: "卡片最小宽度", tip: "卡片最小宽度，屏幕尺寸改变时卡片宽度始终保持在最大最小之间｜gallery.cardMinWidth" },
+          setter: "NumberSetter",
+          defaultValue: 260,
+        },
+        {
+          name: "gallery.cardMaxWidth",
+          title: { label: "卡片最大宽度", tip: "卡片最大宽度，屏幕尺寸改变时卡片宽度始终保持在最大最小之间｜gallery.cardMaxWidth" },
+          setter: "NumberSetter",
+          defaultValue: 340,
+        },
+        {
+          name: "gallery.horizontalGutter",
+          title: { label: "水平间隔", tip: "水平间隔｜gallery.horizontalGutter" },
+          setter: "NumberSetter",
+          defaultValue: 32,
+        },
+        {
+          name: "gallery.verticalGutter",
+          title: { label: "垂直间隔", tip: "垂直间隔｜gallery.verticalGutter" },
+          setter: "NumberSetter",
+          defaultValue: 32,
+        },
+        {
+          name: "gallery.fixedHeight",
+          title: { label: "高度固定", tip: "高度固定｜gallery.fixedHeight" },
+          setter: "BoolSetter",
+        },
+        {
+          name: "gallery.cardHeight",
+          title: { label: "卡片高度", tip: "卡片高度｜gallery.cardHeight" },
+          setter: "NumberSetter",
+          condition: {
+            type: "JSFunction",
+            value: 'target => !!target.getProps().getPropValue("gallery.fixedHeight")',
+          },
+        },
+        {
+          name: "gallery.fixedHeader",
+          title: { label: "固定顶部", tip: "是否固定顶部｜gallery.fixedHeader" },
+          setter: "BoolSetter",
+          condition: {
+            type: "JSFunction",
+            value: 'target => !!target.getProps().getPropValue("gallery.fixedHeight")',
+          },
+        },
+        {
+          name: "gallery.fixedFooter",
+          title: { label: "固定底部", tip: "是否固定底部｜gallery.fixedFooter" },
+          setter: "BoolSetter",
+          condition: {
+            type: "JSFunction",
+            value: 'target => !!target.getProps().getPropValue("gallery.fixedHeight")',
+          },
+        },
+        {
+          name: "gallery.footer.render",
+          title: {
+            label: "底部渲染函数",
+            tip: "底部渲染函数 ｜gallery.footer.render",
+          },
+          propType: "func",
+          setter: [
+            {
+              componentName: "SlotSetter",
+              title: "底部函数插槽",
+              initialValue: {
+                type: "JSSlot",
+                params: ["record", "index"],
+                value: [],
+              },
+            },
+            {
+              componentName: "FunctionSetter",
+              props: {
+                template: "footer(){\n// 自定义渲染底部\nreturn `Footer`;\n}",
+              },
+            },
+            "VariableSetter",
+          ],
+        },
+        {
+          name: "gallery.footer.height",
+          title: { label: "底部高度", tip: "底部高度｜gallery.footer.height" },
+          setter: "NumberSetter",
+          condition: {
+            type: "JSFunction",
+            value: 'target => !!target.getProps().getPropValue("gallery.footer.render")',
+          },
+        },
+        {
+          title: "头部区域",
+          display: "block",
+          type: "group",
+          items: [
+            {
+              name: "gallery.cover.show",
+              title: { label: "封面开启", tip: "封面开启｜gallery.cover.show" },
+              setter: "BoolSetter",
+              defaultValue: true,
+            },
+            {
+              name: "gallery.cover.fields",
+              title: {
+                label: "封面内容",
+                tip: "gallery.cover.fields | 封面内容字段",
+              },
+              setter: {
+                componentName: "SelectSetter",
+                props: (target) => {
+                  const columns =
+                    target.parent.parent.parent.getPropValue("columns");
+                  return {
+                    mode: "multiple",
+                    options: columns.map((item) => ({
+                      title:
+                        typeof item.title === "string" ? item.title : item.key,
+                      value: item.key,
+                    })),
+                  };
+                },
+              },
+              condition: {
+                type: "JSFunction",
+                value: 'target => !!target.getProps().getPropValue("gallery.cover.show")',
+              },
+            },
+            {
+              name: "gallery.cover.height",
+              title: {
+                label: "封面高度",
+                tip: "gallery.cover.height | 封面高度",
+              },
+              propType: "number",
+              setter: "NumberSetter",
+              defaultValue: 230,
+              condition: {
+                type: "JSFunction",
+                value: 'target => !!target.getProps().getPropValue("gallery.cover.show")',
+              },
+            },
+            {
+              name: "gallery.cover.objectFit",
+              title: {
+                label: "封面效果",
+                tip: "gallery.cover.objectFit | 封面效果",
+              },
+              propType: "string",
+              setter: {
+                componentName: "RadioGroupSetter",
+                props: {
+                  options: [
+                    {
+                      title: "适应",
+                      value: "fill",
+                    },
+                    {
+                      title: "裁剪",
+                      value: "cover",
+                    },
+                  ],
+                },
+                initialValue: 'fill'
+              },
+              condition: {
+                type: "JSFunction",
+                value: 'target => !!target.getProps().getPropValue("gallery.cover.show")',
+              },
+            },
+            {
+              name: "gallery.title.field",
+              title: {
+                label: "标题内容",
+                tip: "gallery.title.field | 标题内容",
+              },
+              propType: "string",
+              setter: {
+                componentName: "SelectSetter",
+                props: (target) => {
+                  const columns =
+                    target.parent.parent.parent.getPropValue("columns");
+                  return {
+                    mode: "single",
+                    options: columns.map((item) => ({
+                      title:
+                        typeof item.title === "string" ? item.title : item.key,
+                      value: item.key,
+                    })),
+                  };
+                },
+              },
+            },
+            {
+              name: "gallery.title.line",
+              title: {
+                label: "标题行数",
+                tip: "gallery.title.line | 标题行数",
+              },
+              propType: "number",
+              setter: "NumberSetter",
+            },
+            {
+              name: "gallery.header.slot",
+              title: {
+                label: "开启插槽",
+                tip: "gallery.header.slot | 开启插槽",
+              },
+              propType: "func",
+              setter: [
+                {
+                  componentName: "SlotSetter",
+                  title: "函数插槽",
+                  initialValue: {
+                    type: "JSSlot",
+                    params: ["record", "index"],
+                    value: [],
+                  },
+                },
+                "VariableSetter",
+              ],
+            },
+            {
+              name: "gallery.header.fields.show",
+              title: {
+                label: "其他字段",
+                tip: "gallery.header.fields.show | 其他字段",
+              },
+              propType: "bool",
+              setter: "BoolSetter",
+              defaultValue: false,
+            },
+            {
+              name: "gallery.header.fields.list",
+              title: {
+                label: "其他字段",
+                tip: "gallery.header.fields.list | 选择字段渲染在上方",
+              },
+              condition: {
+                type: "JSFunction",
+                value: 'target => !!target.getProps().getPropValue("gallery.header.fields.show")',
+              },
+              setter: {
+                componentName: "SelectSetter",
+                props: (target) => {
+                  const columns =
+                    target.parent.parent.parent.getPropValue("columns");
+                  return {
+                    mode: "multiple",
+                    options: columns.map((item) => ({
+                      title:
+                        typeof item.title === "string" ? item.title : item.key,
+                      value: item.key,
+                    })),
+                  };
+                },
+              },
+            },
+          ],
+        },
+        {
+          title: "内容区域",
+          display: "block",
+          type: "group",
+          items: [
+            {
+              name: "gallery.content.fields",
+              title: "",
+              setter: {
+                componentName: "ArraySetter",
+                props: {
+                  itemSetter: {
+                    componentName: "ObjectSetter",
+                    props: {
+                      config: {
+                        items: [
+                          {
+                            name: "columnKey",
+                            title: { label: "渲染字段", tip: "渲染字段" },
+                            isRequired: true,
+                            setter: {
+                              componentName: "SelectSetter",
+                              props: (target) => {
+                                const columns =
+                                  target.parent.parent.parent.getPropValue(
+                                    "columns"
+                                  );
+                                const fieldsKey = target.parent.parent.parent
+                                  .getPropValue("gallery.content.fields")
+                                  .map((item) => item?.columnKey)
+                                  .filter(Boolean);
+                                return {
+                                  mode: "single",
+                                  options: columns.map((item) => ({
+                                    title:
+                                      typeof item.title === "string"
+                                        ? item.title
+                                        : item.key,
+                                    value: item.key,
+                                    disabled: fieldsKey.includes(item.key),
+                                  })),
+                                };
+                              },
+                            },
+                          },
+                          {
+                            name: "show",
+                            title: { label: "是否展示", tip: "是否展示" },
+                            propType: "bool",
+                            setter: "BoolSetter",
+                            isRequired: true,
+                          },
+                        ],
+                      },
+                    },
+                    initialValue: {
+                      columnKey: "",
+                      show: true,
+                    },
+                  },
+                },
+                initialValue: (target) => {
+                  const columns =
+                    target.parent.parent.parent.getPropValue("columns");
+                  return columns.map((item) => ({
+                    columnKey: item.key,
+                    show: true,
+                  }));
+                },
+              },
+            },
+          ],
+        },
+      ],
+    },
     {
       title: "外观",
       display: "block",
@@ -1416,7 +1830,6 @@ export default {
             },
           },
         },
-
         {
           name: "sort.list",
           condition: {
@@ -1486,6 +1899,23 @@ export default {
                         name: "name",
                         title: { label: "字段", tip: "所排序的字段" },
                         setter: [
+                          {
+                            componentName: "SelectSetter",
+                            mode: "single",
+                            props: (target) => {
+                              return {
+                                options: target.parent.parent.parent
+                                  .getPropValue("columns")
+                                  .map((item) => ({
+                                    title:
+                                      typeof item.title === "string"
+                                        ? item.title
+                                        : item.key,
+                                    value: item.dataIndex,
+                                  })),
+                              };
+                            },
+                          },
                           "StringSetter",
                           {
                             componentName: "ArraySetter",