@pisell/private-materials 6.8.10 → 6.8.12

package/lowcode/selector/meta.ts

@@ -1,304 +1,327 @@
 import { AntdIconSetter } from '../../../materials/lowcode/_setters';
-import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
+import {
+  IPublicTypeComponentMetadata,
+  IPublicTypeFieldConfig,
+  IPublicTypeSnippet,
+} from '@alilc/lowcode-types';
 
-const SelectorMeta: IPublicTypeComponentMetadata = {
-  componentName: 'Selector',
-  title: '高级选择器',
-  category: '表单',
-  docUrl: '',
-  screenshot: '',
-  devMode: 'proCode',
-  npm: {
-    package: '@pisell/private-materials',
-    version: '1.0.0',
-    exportName: 'Selector',
-    main: 'src/index.ts',
-    destructuring: true,
-    subName: '',
+import {
+  getVariantPropConfig,
+  getPresetVariantPropConfig,
+  VALID_VARIANT_MAP,
+  PRESET_VARIANT_MAP,
+} from './utils';
+
+export const SelectorPropsConfig: IPublicTypeFieldConfig[] = [
+  // 基础配置
+  {
+    name: 'id',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Group ID',
+        'zh-CN': '分组ID',
+      },
+      tip: '分组唯一标识符',
+    },
+    isRequired:true,
+    setter: [
+      'StringSetter',
+      'NumberSetter'
+    ]
   },
-  configure: {
-    props: [
-      // 基础配置
-      {
-        name: 'id',
-        title: {
-          label: {
-            type: 'i18n',
-            'en-US': 'Group ID',
-            'zh-CN': '分组ID',
-          },
-          tip: '分组唯一标识符',
-        },
-        setter: 'NumberSetter',
+  {
+    name: 'title',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Group Title',
+        'zh-CN': '分组标题',
       },
-      {
-        name: 'title',
-        title: {
-          label: {
-            type: 'i18n',
-            'en-US': 'Group Title',
-            'zh-CN': '分组标题',
-          },
-        },
-        setter: 'StringSetter',
+    },
+    setter: 'StringSetter',
+  },
+  // 数据源配置
+  {
+    name: 'dataSource',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Data Source',
+        'zh-CN': '数据源',
       },
-      // 数据源配置
-      {
-        name: 'dataSource',
-        title: {
-          label: {
-            type: 'i18n',
-            'en-US': 'Data Source',
-            'zh-CN': '数据源',
-          },
-          tip: '选项列表数据',
-        },
-        setter: 'JsonSetter',
+      tip: '选项列表数据',
+    },
+    setter: 'JsonSetter',
+  },
+  // 值控制
+  {
+    name: 'value',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Value',
+        'zh-CN': '当前值',
       },
-      // 值控制
-      {
-        name: 'value',
-        title: {
-          label: {
-            type: 'i18n',
-            'en-US': 'Value',
-            'zh-CN': '当前值',
-          },
-          tip: '支持单值、数组或复合对象',
-        },
-        setter: 'JsonSetter',
+      tip: '支持单值、数组或复合对象',
+    },
+    setter: 'JsonSetter',
+  },
+  {
+    name: 'defaultValue',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Default Value',
+        'zh-CN': '默认值',
       },
-      {
-        name: 'defaultValue',
-        title: {
-          label: {
-            type: 'i18n',
-            'en-US': 'Default Value',
-            'zh-CN': '默认值',
-          },
-        },
-        setter: 'JsonSetter',
+    },
+    setter: 'JsonSetter',
+  },
+  {
+    name: 'valueType',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Value Type',
+        'zh-CN': '值类型',
       },
-      // 模式配置
-      {
-        name: 'mode',
-        title: {
-          label: {
-            type: 'i18n',
-            'en-US': 'Selection Mode',
-            'zh-CN': '选择模式',
-          },
-        },
-        setter: {
-          componentName: 'RadioGroupSetter',
-          props: {
-            options: [
-              { title: '单选', value: 'single' },
-              { title: '多选', value: 'multiple' },
-            ],
-          },
-          initialValue: 'single',
-        },
+      tip: 'primitive返回原始值，object返回包含数量等信息的复合对象',
+    },
+    setter: {
+      componentName: 'RadioGroupSetter',
+      props: {
+        options: [
+          { title: '原始值', value: 'primitive' },
+          { title: '对象值', value: 'object' },
+        ],
       },
-      {
-        name: 'valueType',
-        title: {
-          label: {
-            type: 'i18n',
-            'en-US': 'Value Type',
-            'zh-CN': '值类型',
-          },
-          tip: 'primitive返回原始值，object返回包含数量等信息的复合对象',
-        },
-        setter: {
-          componentName: 'RadioGroupSetter',
-          props: {
-            options: [
-              { title: '原始值', value: 'primitive' },
-              { title: '对象值', value: 'object' },
-            ],
-          },
-          initialValue: 'primitive',
-        },
+      initialValue: 'primitive',
+    },
+  },
+  // 模式配置
+  {
+    name: 'mode',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Selection Mode',
+        'zh-CN': '选择模式',
       },
-      {
-        name: 'variant',
-        title: '组件类型',
-        setter: {
-          componentName: 'RadioGroupSetter',
-          props: {
-            options: [
-              { title: '默认', value: 'default' },
-              { title: '选择器', value: 'select' },
-              { title: '卡片', value: 'card' },
-            ],
-          },
-          initialValue: 'default',
-        },
+    },
+    setter: {
+      componentName: 'RadioGroupSetter',
+      props: {
+        options: [
+          { title: '单选', value: 'single' },
+          { title: '多选', value: 'multiple' },
+        ],
       },
-      {
-        name: 'preserve',
-        title: {
-          label: {
-            type: 'i18n',
-            'en-US': 'Preserve',
-            'zh-CN': '保留状态',
-          },
-        },
-        setter: 'BoolSetter',
-        defaultValue: false,
+      initialValue: 'single',
+    },
+  },
+  {
+    name: 'itemLayout',
+    title: '选项布局',
+    setter: {
+      componentName: 'RadioGroupSetter',
+      props: {
+        options: [
+          { title: '水平', value: 'horizontal' },
+          { title: '垂直', value: 'vertical' },
+        ],
       },
-      {
-        name: 'disabled',
-        title: {
-          label: {
-            type: 'i18n',
-            'en-US': 'Disabled',
-            'zh-CN': '禁用状态',
-          },
-        },
-        setter: 'BoolSetter',
-        defaultValue: false,
+      initialValue: 'horizontal',
+    },
+    extraProps: {
+      setValue(target: any, value: any) {
+        // itemLayout变动时，如果当前的variant在垂直模式下不支持，则设置为默认
+        const _variant = target.parent.getPropValue('variant');
+        const validVariants = VALID_VARIANT_MAP[value as string];
+        let _newVariant = _variant;
+        if (!validVariants.includes(_variant as string)) {
+          _newVariant = validVariants[0];
+        }
+        // 如果variant变动，则设置为新的variant
+        if (_newVariant !== _variant) {
+          target.parent.setPropValue('variant', _newVariant);
+        }
+        // 同时检查preset.variant是否支持，如果不支持，则设置为默认
+        const _presetVariant = target.parent.getPropValue('preset.variant');
+        let _variantWithLayout =
+          'card' === _newVariant ? `${_newVariant}|${value}` : _newVariant;
+        const validPresetVariants =
+          PRESET_VARIANT_MAP[_variantWithLayout as string];
+        if (!validPresetVariants.includes(_presetVariant as string)) {
+          target.parent.setPropValue('preset.variant', validPresetVariants[0]);
+        }
+        const _origin__designMode_flag__ = target.parent.getPropValue(
+          '__designMode_flag__'
+        );
+        target.parent.setPropValue(
+          '__designMode_flag__',
+          !_origin__designMode_flag__
+        );
+        return value;
       },
-      {
-        name: 'fieldNames',
-        title: {
-          label: {
-            type: 'i18n',
-            'en-US': 'Field Names',
-            'zh-CN': '字段名映射',
-          },
-          tip: '自定义label和value字段名',
-        },
-        setter: {
-          componentName: 'JsonSetter',
-        },
+    },
+  },
+  // 交替展示，实现组件重新渲染效果
+  getVariantPropConfig(
+    (t) => t.parent.getPropValue('itemLayout') === 'horizontal'
+  ),
+  getVariantPropConfig(
+    (t) => t.parent.getPropValue('itemLayout') !== 'horizontal'
+  ),
+  // 使用虚拟属性，实现组件重新渲染效果
+  getPresetVariantPropConfig(
+    (t) => !t.parent.getPropValue('__designMode_flag__')
+  ),
+  getPresetVariantPropConfig(
+    (t) => !!t.parent.getPropValue('__designMode_flag__')
+  ),
+  {
+    name: '__designMode_flag__',
+    title: '设计模式标志',
+    condition: (t) => false,
+    setter: 'BoolSetter',
+    defaultValue: false,
+  },
+  {
+    name: 'disabled',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Disabled',
+        'zh-CN': '禁用状态',
       },
-      // 校验规则配置
-      {
-        name: 'ruleConfig',
-        title: {
-          label: {
-            type: 'i18n',
-            'en-US': 'Rule Config',
-            'zh-CN': '校验规则',
-          },
-        },
-        setter: {
-          componentName: 'JsonSetter',
-        },
+    },
+    setter: 'BoolSetter',
+    defaultValue: false,
+  },
+  {
+    name: 'preserve',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Preserve',
+        'zh-CN': '保留状态',
       },
-      // 网格布局配置
-      {
-        name: 'grid',
-        title: {
-          label: {
-            type: 'i18n',
-            'en-US': 'Grid Layout',
-            'zh-CN': '网格布局',
-          },
-        },
-        setter: {
-          componentName: 'JsonSetter',
-        },
+    },
+    setter: 'BoolSetter',
+    defaultValue: false,
+  },
+  {
+    name: 'fieldNames',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Field Names',
+        'zh-CN': '字段名映射',
       },
-      // 选项样式配置
-      {
-        name: 'item',
-        title: {
-          label: {
-            type: 'i18n',
-            'en-US': 'Item Style',
-            'zh-CN': '选项样式',
-          },
-        },
-        setter: {
-          componentName: 'ObjectSetter',
-          props: {
-            config: {
-              items: [
-                {
-                  name: 'bordered',
-                  title: '显示边框',
-                  setter: 'BoolSetter',
-                },
-                {
-                  name: 'layout',
-                  title: '布局方向',
-                  setter: {
-                    componentName: 'RadioGroupSetter',
-                    props: {
-                      options: [
-                        { title: '水平', value: 'horizontal' },
-                        { title: '垂直', value: 'vertical' },
-                      ],
-                    },
-                    initialValue: 'horizontal',
-                  },
-                },
-                {
-                  name: 'selectedTypeVariant',
-                  title: '选中样式类型',
-                  setter: {
-                    componentName: 'RadioGroupSetter',
-                    props: {
-                      options: [
-                        { title: '默认', value: 'default' },
-                        { title: '填充', value: 'filled' },
-                        { title: 'cornered', value: 'cornered' },
-                      ],
-                    },
-                    initialValue: 'default',
-                  },
-                },
-                {
-                  name: 'renderContent',
-                  title: '自定义内容渲染',
-                  setter: 'FunctionSetter',
-                },
-                {
-                  name: 'style',
-                  title: '自定义样式',
-                  setter: 'JsonSetter',
-                },
-                {
-                  name: 'selectedIcon',
-                  title: '选中状态图标',
-                  setter: {
-                    componentName: AntdIconSetter,
-                  },
-                },
-              ],
-            },
-          },
-        },
+      tip: '自定义label和value字段名',
+    },
+    setter: {
+      componentName: 'JsonSetter',
+    },
+  },
+  // 校验规则配置
+  {
+    name: 'ruleConfig',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Rule Config',
+        'zh-CN': '校验规则',
       },
-      {
-        name: 'renderItem',
-        title: {
-          label: {
-            type: 'i18n',
-            'en-US': 'Render Item',
-            'zh-CN': '渲染选项',
-          },
-        },
-        setter: 'FunctionSetter',
+    },
+    setter: {
+      componentName: 'JsonSetter',
+    },
+  },
+  // 网格布局配置
+  {
+    name: 'layout',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Layout',
+        'zh-CN': '布局',
+      },
+    },
+    setter: {
+      componentName: 'JsonSetter',
+    },
+  },
+  // 选项样式配置
+  {
+    name: 'itemProps',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Item Card Props',
+        'zh-CN': '选项卡属性',
       },
-      // 标题配置
+    },
+    setter: {
+      componentName: 'JsonSetter',
+    },
+  },
+  {
+    name: 'renderItem',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Render Item',
+        'zh-CN': '渲染选项',
+      },
+    },
+    setter: [
       {
-        name: 'titleProps',
-        title: {
-          label: {
-            type: 'i18n',
-            'en-US': 'Title Props',
-            'zh-CN': '标题配置',
-          },
-        },
-        setter: {
-          componentName: 'JsonSetter',
+        componentName: 'SlotSetter',
+        initialValue: {
+          params: ['renderProps'],
+          type: 'JSSlot',
+          value: [],
         },
+        defaultValue: null,
       },
+      'FunctionSetter',
     ],
+  },
+  // 标题配置
+  {
+    name: 'headerProps',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Header Props',
+        'zh-CN': '头部配置',
+      },
+    },
+    setter: {
+      componentName: 'JsonSetter',
+    },
+  },
+];
+
+const SelectorMeta: IPublicTypeComponentMetadata = {
+  componentName: 'Selector',
+  title: '高级选择器',
+  category: '表单',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/private-materials',
+    version: '1.0.0',
+    exportName: 'Selector',
+    main: 'src/index.ts',
+    destructuring: true,
+    subName: '',
+  },
+  configure: {
+    props: SelectorPropsConfig,
     supports: {
       style: true,
       events: [
@@ -328,19 +351,31 @@ const snippets: IPublicTypeSnippet[] = [
         title: '选择器1',
         mode: 'single',
         valueType: 'primitive',
+        variant: 'default',
+        preset: {
+          variant: '1',
+        },
         dataSource: [
           { label: '选项1', value: 'option1' },
           { label: '选项2', value: 'option2' },
           { label: '选项3', value: 'option3' },
         ],
-        item: {
-          variant: 'card',
-          bordered: true,
-          layout: 'horizontal',
-          selectedTypeVariant: 'default',
-        },
         preserve: false,
         disabled: false,
+        renderItem: {
+          type: 'JSSlot',
+          params: ['renderProps'],
+          value: [
+            {
+              componentName: 'Selector.Item',
+              props: {
+                type: 'JSExpression',
+                value: 'this.renderProps',
+                mock: '主按钮',
+              },
+            },
+          ],
+        },
       },
     },
   },