@pisell/private-materials 6.3.58 → 6.3.59

package/lowcode/selector/meta.ts

@@ -0,0 +1,387 @@
+import { AntdIconSetter } from '../../../materials/lowcode/_setters';
+import {
+  IPublicTypeComponentMetadata,
+  IPublicTypeFieldConfig,
+  IPublicTypeSnippet,
+} from '@alilc/lowcode-types';
+
+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'
+    ]
+  },
+  {
+    name: 'title',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Group Title',
+        'zh-CN': '分组标题',
+      },
+    },
+    setter: 'StringSetter',
+  },
+  // 数据源配置
+  {
+    name: 'dataSource',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Data Source',
+        'zh-CN': '数据源',
+      },
+      tip: '选项列表数据',
+    },
+    setter: 'JsonSetter',
+  },
+  // 值控制
+  {
+    name: 'value',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Value',
+        'zh-CN': '当前值',
+      },
+      tip: '支持单值、数组或复合对象',
+    },
+    setter: 'JsonSetter',
+  },
+  {
+    name: 'defaultValue',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Default Value',
+        'zh-CN': '默认值',
+      },
+    },
+    setter: 'JsonSetter',
+  },
+  {
+    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',
+    },
+  },
+  // 模式配置
+  {
+    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',
+    },
+  },
+  {
+    name: 'itemLayout',
+    title: '选项布局',
+    setter: {
+      componentName: 'RadioGroupSetter',
+      props: {
+        options: [
+          { title: '水平', value: 'horizontal' },
+          { title: '垂直', value: 'vertical' },
+        ],
+      },
+      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;
+      },
+    },
+  },
+  // 交替展示，实现组件重新渲染效果
+  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': '禁用状态',
+      },
+    },
+    setter: 'BoolSetter',
+    defaultValue: false,
+  },
+  {
+    name: 'preserve',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Preserve',
+        'zh-CN': '保留状态',
+      },
+    },
+    setter: 'BoolSetter',
+    defaultValue: false,
+  },
+  {
+    name: 'fieldNames',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Field Names',
+        'zh-CN': '字段名映射',
+      },
+      tip: '自定义label和value字段名',
+    },
+    setter: {
+      componentName: 'JsonSetter',
+    },
+  },
+  // 校验规则配置
+  {
+    name: 'ruleConfig',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Rule Config',
+        'zh-CN': '校验规则',
+      },
+    },
+    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: [
+      {
+        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: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(value,${extParams}){ console.log('onChange', value); }",
+        },
+        {
+          name: 'onClear',
+          template: "onClear(${extParams}){ console.log('onClear'); }",
+        },
+      ],
+    },
+    component: {},
+  },
+};
+
+const snippets: IPublicTypeSnippet[] = [
+  {
+    title: '高级选择器',
+    screenshot: '',
+    schema: {
+      componentName: 'Selector',
+      props: {
+        id: 'selector1',
+        title: '选择器1',
+        mode: 'single',
+        valueType: 'primitive',
+        variant: 'default',
+        preset: {
+          variant: '1',
+        },
+        dataSource: [
+          { label: '选项1', value: 'option1' },
+          { label: '选项2', value: 'option2' },
+          { label: '选项3', value: 'option3' },
+        ],
+        preserve: false,
+        disabled: false,
+        renderItem: {
+          type: 'JSSlot',
+          params: ['renderProps'],
+          value: [
+            {
+              componentName: 'Selector.Item',
+              props: {
+                type: 'JSExpression',
+                value: 'this.renderProps',
+                mock: '主按钮',
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+];
+
+export default {
+  ...SelectorMeta,
+  snippets,
+};

package/lowcode/selector/utils.ts

@@ -0,0 +1,118 @@
+export const VALID_VARIANT_MAP: Record<string, string[]> = {
+  ['vertical']: ['card', 'media'],
+  ['horizontal']: ['default', 'select', 'card'],
+};
+
+export const PRESET_VARIANT_MAP: Record<string, string[]> = {
+  ['default']: ['1', '2', '3', '4'],
+  ['select']: ['1'],
+  ['card|vertical']: ['1', '2'],
+  ['card|horizontal']: ['1', '2', '3', '4', '5'],
+  ['media']: ['1', '2'],
+};
+
+const _getVariantSetter = (target: any) => {
+  const _itemLayout = target.parent.getPropValue('itemLayout');
+  let options: any[] = [];
+  let initialValue = 'default';
+  // 垂直模式下，只展示卡片和图文类型
+  // 水平模式下，只展示默认、选择器、卡片类型
+  if (_itemLayout === 'vertical') {
+    options = [
+      { title: '卡片', value: 'card' },
+      { title: '图文', value: 'media' },
+    ];
+    initialValue = 'card';
+  } else {
+    options = [
+      { title: '默认', value: 'default' },
+      { title: '选择器', value: 'select' },
+      { title: '卡片', value: 'card' },
+    ];
+    initialValue = 'default';
+  }
+  return {
+    componentName: 'RadioGroupSetter',
+    props: {
+      options: options,
+    },
+    initialValue,
+  };
+};
+
+export const getVariantPropConfig = (condition?: (t: any) => boolean) => {
+  return {
+    name: 'variant',
+    title: '组件类型',
+    condition: condition,
+    setter: _getVariantSetter,
+    extraProps: {
+      setValue(target: any, value: any) {
+        // value变动时，如果当前的preset.variant在当前的variant下不支持，则设置为默认
+        const _layout = target.parent.getPropValue('itemLayout');
+        let _variantWithLayout =
+          'card' === value ? `${value}|${_layout}` : value;
+        const validPresetVariants =
+          PRESET_VARIANT_MAP[_variantWithLayout as string];
+        if (
+          validPresetVariants &&
+          !validPresetVariants.includes(
+            target.parent.getPropValue('preset.variant') 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;
+      },
+    },
+  };
+};
+
+const _getPresetVariantSetter = (target: any) => {
+  const _itemLayout = target.parent.getPropValue('itemLayout');
+  const _variant = target.parent.getPropValue('variant');
+  const validKeys = Object.keys(PRESET_VARIANT_MAP);
+  let _variantWithLayout =
+    'card' === _variant ? `${_variant}|${_itemLayout}` : _variant;
+  if (!validKeys.includes(_variantWithLayout as string)) {
+    return {
+      componentName: 'div',
+      props: {
+        children: '不支持的变体',
+      },
+    };
+  }
+  let options: any[] = [];
+  let validPresetVariants = PRESET_VARIANT_MAP[_variantWithLayout];
+  validPresetVariants?.forEach((presetVariant) => {
+    options.push({
+      title: `${_variant.substring(0, 1).toUpperCase()}${presetVariant}`,
+      value: presetVariant,
+    });
+  });
+  let initialValue = '1';
+
+  return {
+    componentName: 'RadioGroupSetter',
+    props: {
+      options: options,
+    },
+    initialValue,
+  };
+};
+
+export const getPresetVariantPropConfig = (condition?: (t: any) => boolean) => {
+  return {
+    name: 'preset.variant',
+    title: '预设变体',
+    condition: condition,
+    setter: _getPresetVariantSetter,
+  };
+};