@pisell/materials 6.11.4 → 6.11.6

package/lowcode/pisell-find/meta.ts

@@ -0,0 +1,365 @@
+import snippets from './snippets';
+
+const PisellFindMeta = {
+  componentName: 'PisellFind',
+  title: 'Find 查找',
+  category: 'Plus Components',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.0',
+    exportName: 'PisellFind',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  configure: {
+    props: [
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Basic Config',
+            'zh-CN': '基础配置',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'triggerType',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Trigger Type',
+                'zh-CN': '触发器类型',
+              },
+              tip: '查找触发方式',
+            },
+            propType: {
+              type: 'oneOf',
+              value: ['input', 'button', 'icon', 'text'],
+            },
+            setter: [
+              {
+                componentName: 'RadioGroupSetter',
+                props: {
+                  options: [
+                    { title: '按钮', value: 'button' },
+                    { title: '输入框', value: 'input' },
+                    { title: '图标', value: 'icon' },
+                    { title: '文本', value: 'text' },
+                  ],
+                },
+              },
+              'VariableSetter',
+            ],
+            defaultValue: 'button',
+          },
+          {
+            name: 'placeholder',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Placeholder',
+                'zh-CN': '占位符',
+              },
+            },
+            propType: 'string',
+            setter: ['PisellI18nSetter', 'StringSetter', 'VariableSetter'],
+            defaultValue: '请输入搜索内容',
+          },
+          {
+            name: 'buttonText',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Button Text',
+                'zh-CN': '按钮文本',
+              },
+            },
+            propType: 'string',
+            setter: ['PisellI18nSetter', 'StringSetter', 'VariableSetter'],
+            defaultValue: 'Find',
+            condition: {
+              type: 'JSFunction',
+              value: 'target => target.getProps().getPropValue("triggerType") === "button"',
+            },
+          },
+          {
+            name: 'size',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Size',
+                'zh-CN': '尺寸',
+              },
+            },
+            propType: { type: 'oneOf', value: ['large', 'middle', 'small'] },
+            setter: [
+              {
+                componentName: 'RadioGroupSetter',
+                props: {
+                  options: [
+                    { title: '大号', value: 'large' },
+                    { title: '默认', value: 'middle' },
+                    { title: '小号', value: 'small' },
+                  ],
+                },
+              },
+              'VariableSetter',
+            ],
+            defaultValue: 'middle',
+          },
+          {
+            name: 'disabled',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Disabled',
+                'zh-CN': '是否禁用',
+              },
+            },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: false,
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Search History',
+            'zh-CN': '搜索历史',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'showHistory',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Show Search History',
+                'zh-CN': '显示搜索历史',
+              },
+            },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: true,
+          },
+          {
+            name: 'historyKey',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'History Storage Key',
+                'zh-CN': '历史记录存储 Key',
+              },
+            },
+            propType: 'string',
+            setter: ['StringSetter', 'VariableSetter'],
+            defaultValue: 'pisell_find_history',
+            condition: {
+              type: 'JSFunction',
+              value: 'target => target.getProps().getPropValue("showHistory")',
+            },
+          },
+          {
+            name: 'maxHistoryCount',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Max History Count',
+                'zh-CN': '历史记录上限',
+              },
+            },
+            propType: 'number',
+            setter: ['NumberSetter', 'VariableSetter'],
+            defaultValue: 10,
+            condition: {
+              type: 'JSFunction',
+              value: 'target => target.getProps().getPropValue("showHistory")',
+            },
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Display Config',
+            'zh-CN': '展示配置',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'displayType',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Display Type',
+                'zh-CN': '展示类型',
+              },
+              tip: '不指定时根据触发器类型智能判断',
+            },
+            propType: {
+              type: 'oneOf',
+              value: ['inline', 'popup', 'modal', 'drawer', 'detached'],
+            },
+            setter: [
+              {
+                componentName: 'SelectSetter',
+                props: {
+                  options: [
+                    { title: '弹窗展示', value: 'modal' },
+                    { title: '内联展示', value: 'inline' },
+                    { title: '浮层展示', value: 'popup' },
+                    { title: '抽屉展示', value: 'drawer' },
+                    { title: '独立展示', value: 'detached' },
+                  ],
+                },
+              },
+              'VariableSetter',
+            ],
+          },
+          {
+            name: 'modalWidth',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Modal Width',
+                'zh-CN': 'Modal 宽度',
+              },
+            },
+            propType: { type: 'oneOfType', value: ['string', 'number'] },
+            setter: ['NumberSetter', 'StringSetter', 'VariableSetter'],
+            defaultValue: 834,
+            condition: {
+              type: 'JSFunction',
+              value: 'target => target.getProps().getPropValue("displayType") === "modal"',
+            },
+          },
+          {
+            name: 'mask',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Show Mask',
+                'zh-CN': '显示遮罩层',
+              },
+            },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: false,
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Advanced Config',
+            'zh-CN': '高级配置',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'showConfirmButton',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Show Confirm Button',
+                'zh-CN': '显示确认按钮',
+              },
+              tip: '默认关闭，输入即搜索',
+            },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: false,
+          },
+          {
+            name: 'debounceTime',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Debounce Time',
+                'zh-CN': '防抖时间',
+              },
+              tip: '防抖时间（毫秒）',
+            },
+            propType: 'number',
+            setter: ['NumberSetter', 'VariableSetter'],
+            defaultValue: 300,
+          },
+          {
+            name: 'showScan',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Show Scan Button',
+                'zh-CN': '显示扫码按钮',
+              },
+            },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: true,
+          },
+          {
+            name: 'clearOnClose',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Clear On Close',
+                'zh-CN': '关闭时清空关键词',
+              },
+            },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: false,
+          },
+        ],
+      },
+    ],
+    supports: {
+      style: true,
+      className: true,
+      events: [
+        {
+          name: 'onSearch',
+          template:
+            'onSearch(keyword,${extParams}){\n// 搜索触发回调\n// 在此处过滤数据并更新列表\nconst filtered = data.filter(item => item.name.includes(keyword));\nsetFilteredData(filtered);}',
+        },
+        {
+          name: 'onChange',
+          template:
+            'onChange(value,${extParams}){\n// 关键词变化回调\nconsole.log("onChange", value);}',
+        },
+        {
+          name: 'onOpen',
+          template:
+            'onOpen(${extParams}){\n// 查找面板打开回调\nconsole.log("onOpen");}',
+        },
+        {
+          name: 'onClose',
+          template:
+            'onClose(${extParams}){\n// 查找面板关闭回调\nconsole.log("onClose");}',
+        },
+      ],
+    },
+    component: {},
+  },
+};
+
+export default {
+  ...PisellFindMeta,
+  snippets,
+};

package/lowcode/pisell-find/snippets.ts

@@ -0,0 +1,37 @@
+export default [
+  {
+    title: 'Button 查找',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellFind',
+      props: {
+        triggerType: 'button',
+        buttonText: 'Find',
+      },
+    },
+  },
+  {
+    title: 'Input 查找',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellFind',
+      props: {
+        triggerType: 'input',
+        placeholder: '搜索内容',
+      },
+    },
+  },
+  {
+    title: '带历史记录查找',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellFind',
+      props: {
+        triggerType: 'button',
+        buttonText: 'Find',
+        showHistory: true,
+        maxHistoryCount: 10,
+      },
+    },
+  },
+];