@pisell/private-materials 6.8.10 → 6.8.12

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,
+  };
+};

package/lowcode/selector.group/meta.ts

@@ -1,3 +1,9 @@
+import { SelectorPropsConfig } from '../selector/meta';
+
+function uuid() {
+  return ((Math.random() * 1e6) >> 0).toString(36);
+}
+
 const SelectorGroupMeta = {
   componentName: 'Selector.Group',
   title: '高级选择器组',
@@ -26,7 +32,52 @@ const SelectorGroupMeta = {
           },
           tip: '分组数据列表，每个分组包含选项配置',
         },
-        setter: 'JsonSetter',
+        setter: [
+          'JsonSetter',
+          {
+            componentName: 'ArraySetter',
+            props: {
+              itemSetter: {
+                componentName: 'ObjectSetter',
+                props: {
+                  config: {
+                    items: SelectorPropsConfig,
+                  },
+                },
+                initialValue: () => {
+                  const id = uuid();
+                  return {
+                    id: `group_${id}`,
+                    title: `分组 ${id}`,
+                    dataSource: [
+                      { label: `选项 1`, value: `${id}_option1` },
+                      { label: `选项 2`, value: `${id}_option2` },
+                    ],
+                    mode: 'single',
+                    valueType: 'primitive',
+                    preset: {
+                      variant: '1',
+                    },
+                    renderItem: {
+                      type: 'JSSlot',
+                      params: ['renderProps'],
+                      value: [
+                        {
+                          componentName: 'Selector.Item',
+                          props: {
+                            type: 'JSExpression',
+                            value: 'this.renderProps',
+                            mock: '主按钮',
+                          },
+                        },
+                      ],
+                    },
+                  };
+                },
+              },
+            },
+          },
+        ],
         isRequired: true,
       },
       // 值控制
@@ -138,7 +189,7 @@ const SelectorGroupMeta = {
           },
           tip: '自定义滚动容器元素',
         },
-        setter: 'VariableSetter',
+        setter: 'StringSetter',
       },
     ],
     supports: {
@@ -164,24 +215,58 @@ const snippets = [
       props: {
         dataSource: [
           {
-            id: 'group1',
-            title: '分组1',
+            id: 'group_1',
+            title: '分组 1',
             dataSource: [
-              { label: '选项1-1', value: 'group1_option1' },
-              { label: '选项1-2', value: 'group1_option2' },
+              { label: '选项 1', value: 'group1_option1' },
+              { label: '选项 2', value: 'group1_option2' },
             ],
             mode: 'single',
             valueType: 'primitive',
+            preset: {
+              variant: '1',
+            },
+            renderItem: {
+              type: 'JSSlot',
+              params: ['renderProps'],
+              value: [
+                {
+                  componentName: 'Selector.Item',
+                  props: {
+                    type: 'JSExpression',
+                    value: 'this.renderProps',
+                    mock: '主按钮',
+                  },
+                },
+              ],
+            },
           },
           {
-            id: 'group2',
-            title: '分组2',
+            id: 'group_2',
+            title: '分组 2',
             dataSource: [
-              { label: '选项2-1', value: 'group2_option1' },
-              { label: '选项2-2', value: 'group2_option2' },
+              { label: '选项 1', value: 'group2_option1' },
+              { label: '选项 2', value: 'group2_option2' },
             ],
             mode: 'multiple',
             valueType: 'object',
+            preset: {
+              variant: '1',
+            },
+            renderItem: {
+              type: 'JSSlot',
+              params: ['renderProps'],
+              value: [
+                {
+                  componentName: 'Selector.Item',
+                  props: {
+                    type: 'JSExpression',
+                    value: 'this.renderProps',
+                    mock: '主按钮',
+                  },
+                },
+              ],
+            },
           },
         ],
         allowedValuesPolicy: 'relaxed',

package/lowcode/selector.item/meta.ts

@@ -0,0 +1,31 @@
+import { AntdIconSetter } from '@pisell/materials/lowcode/_setters';
+import {
+  IPublicTypeComponentMetadata,
+  IPublicTypeSnippet,
+} from '@alilc/lowcode-types';
+
+const SelectorItemMeta: IPublicTypeComponentMetadata = {
+  componentName: 'Selector.Item',
+  title: '选择器选项',
+  category: '表单',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/private-materials',
+    version: '1.0.0',
+    exportName: 'Selector',
+    main: 'src/index.ts',
+    destructuring: true,
+    subName: 'Item',
+  },
+  props: [],
+  configure: {  
+    component: {
+      disableBehaviors: ['copy', 'remove'],
+      isContainer: true,
+    },
+  },
+};
+
+export default SelectorItemMeta;