import { ComponentMetadata, Snippet } from '@alilc/lowcode-types'; import snippets from './snippets'; const SubmitButtonMeta: ComponentMetadata = { componentName: 'SubmitButton', title: '提交按钮', category: '无代码表单', group: '无代码组件', docUrl: '', screenshot: '', devMode: 'proCode', npm: { package: '@pisell/materials', version: '1.0.1', exportName: 'SubmitButton', main: 'src/index.tsx', destructuring: true, subName: '', }, generalProps: [ { type: 'group', title: { type: 'i18n', 'en-US': 'Info', 'zh-CN': '信息', }, display: 'accordion', items: [ { name: 'childrenString', title: { label: { type: 'i18n', 'en-US': 'Text', 'zh-CN': '文字', }, }, setter: ['PisellI18nSetter'], defaultValue: { type: 'i18n', en: 'Submit', 'zh-CN': '提交', 'zh-HK': '提交', }, }, { name: 'status', title: { label: { type: 'i18n', 'en-US': 'Status', 'zh-CN': '状态', }, }, propType: { type: 'oneOf', value: ['normal', 'disabled', 'hidden'], }, setter: { componentName: 'RadioGroupSetter', props: { options: [ { title: '正常', value: 'normal', }, { title: '禁用', value: 'disabled', }, { title: '隐藏', value: 'hidden', }, ], }, }, }, ], }, { type: 'group', title: { type: 'i18n', 'en-US': 'Appearance', 'zh-CN': '外观', }, display: 'accordion', items: [ { name: 'type', title: { label: { type: 'i18n', 'en-US': 'Button type', 'zh-CN': '按钮类型', }, }, propType: { type: 'oneOf', value: [ 'primary', 'default', 'ghost', 'dashed', 'danger', 'link', 'text', ], }, setter: [ { componentName: 'SelectSetter', props: { options: [ { title: 'primary button', value: 'primary', }, { title: 'default button', value: 'default', }, { title: 'dashed button', value: 'dashed', }, { title: 'danger button', value: 'danger', }, { title: 'link button', value: 'link', }, { title: 'text button', value: 'text', }, ], }, }, 'VariableSetter', ], }, ], }, { type: 'group', title: { type: 'i18n', 'en-US': 'Submission', 'zh-CN': '提交', }, display: 'accordion', items: [ { name: 'confirmConfig', title: { label: { type: 'i18n', 'en-US': 'Confirm before submission', 'zh-CN': '提交前确认', }, }, setter: { componentName: 'ObjectSetter', props: { config: { items: [ { name: 'enable', title: { type: 'i18n', 'en-US': 'Enable', 'zh-CN': '启用', }, setter: 'BoolSetter', isRequired: true, }, { name: 'icon', title: { type: 'i18n', 'en-US': 'Icon', 'zh-CN': '图标', }, setter: [ { componentName: 'SlotSetter', initialValue: { type: 'JSSlot', value: [ { componentName: 'Icon', props: { type: 'SmileOutlined', size: 20, rotate: 0, spin: false, }, }, ], }, defaultValue: null, }, ], }, { name: 'title', title: { type: 'i18n', 'en-US': 'Title', 'zh-CN': '标题', }, setter: ['PisellI18nSetter', 'VariableSetter'], defaultValue: { type: 'i18n', en: 'Confirm submission', 'zh-CN': '确认提交', 'zh-HK': '確認提交', }, }, { name: 'content', title: { type: 'i18n', 'en-US': 'Helper text', 'zh-CN': '辅助文字', }, setter: ['PisellI18nSetter', 'VariableSetter'], defaultValue: { type: 'i18n', en: 'Are you sure you want to submit this form?', 'zh-CN': '确定要提交此表单吗？', 'zh-HK': '確定要提交此表單嗎？', }, }, { name: 'cancelText', title: { type: 'i18n', 'en-US': 'Cancel button text', 'zh-CN': '取消按钮文字', }, setter: ['PisellI18nSetter', 'VariableSetter'], defaultValue: { type: 'i18n', en: 'Cancel', 'zh-CN': '取消', 'zh-HK': '取消', }, }, { name: 'okText', title: { type: 'i18n', 'en-US': 'OK button text', 'zh-CN': '确定按钮文字', }, setter: ['PisellI18nSetter', 'VariableSetter'], defaultValue: { type: 'i18n', en: 'Submit', 'zh-CN': '提交', 'zh-HK': '提交', }, }, ], }, columns: 1, forceInline: 1, mode: 'popup', }, }, }, ], }, { type: 'group', title: { type: 'i18n', 'en-US': 'After submimssion', 'zh-CN': '提交后', }, display: 'accordion', items: [ { name: 'toastConfig', title: { type: 'i18n', 'en-US': 'Show Toast', 'zh-CN': '显示提示', }, setter: { componentName: 'ObjectSetter', props: { config: { items: [ { name: 'enable', title: { type: 'i18n', 'en-US': 'Enable', 'zh-CN': '启用', }, setter: 'BoolSetter', isRequired: true, }, { name: 'icon', title: { type: 'i18n', 'en-US': 'Icon', 'zh-CN': '图标', }, setter: [ { componentName: 'SlotSetter', initialValue: { type: 'JSSlot', value: [ { componentName: 'Icon', props: { type: 'SmileOutlined', size: 20, rotate: 0, spin: false, }, }, ], }, defaultValue: null, }, ], }, { name: 'title', title: { type: 'i18n', 'en-US': 'Text', 'zh-CN': '文字', }, setter: ['PisellI18nSetter', 'VariableSetter'], defaultValue: { type: 'i18n', en: 'Submitted successfully', 'zh-CN': '提交成功', 'zh-HK': '提交成功', }, }, { name: 'showAfterSubmit', title: { type: 'i18n', 'en-US': 'Show after submit', 'zh-CN': '提交成功后显示', }, setter: 'BoolSetter', defaultValue: true, } ], }, columns: 1, forceInline: 1, mode: 'popup', }, }, }, { name: 'refreshData', title: { label: { type: 'i18n', 'en-US': 'Refresh data', 'zh-CN': '刷新数据', }, }, setter: 'BoolSetter', }, { name: 'afterSubmitType', title: { label: { type: 'i18n', 'en-US': 'Action after submission', 'zh-CN': '提交后动作', }, }, setter: { componentName: 'SelectSetter', props: { options: [ { title: '无操作', value: 'none', }, { title: '关闭当前抽屉/对话框', value: 'close', }, { title: '显示模态框', value: 'showModal', }, { title: '显示通知框', value: 'showNotification', }, ], }, }, }, { name: 'afterSubmitModalConfig', type: 'group', extraProps: { display: 'entry', }, condition: (props) => { return props.getPropValue('afterSubmitType') === 'showModal'; }, title: { label: '模态框配置', }, items: [ { name: 'afterSubmitModalConfig.title', title: { type: 'i18n', 'en-US': 'Title', 'zh-CN': '标题', }, setter: 'PisellI18nSetter', defaultValue: { type: 'i18n', en: 'Submitted successfully', 'zh-CN': '提交成功', 'zh-HK': '提交成功', }, }, { name: 'afterSubmitModalConfig.content', title: { type: 'i18n', 'en-US': 'Content', 'zh-CN': '内容', }, setter: 'PisellI18nSetter', defaultValue: { type: 'i18n', en: 'Your form has been successfully submitted', 'zh-CN': '您的表单已成功提交', 'zh-HK': '您的表單已成功提交', }, }, { name: 'afterSubmitModalConfig.okText', title: { type: 'i18n', 'en-US': 'Button text', 'zh-CN': '按钮文字', }, setter: 'PisellI18nSetter', defaultValue: { type: 'i18n', en: 'OK', 'zh-CN': '确定', 'zh-HK': '確定', }, }, { name: 'afterSubmitModalConfig.onOk', title: { type: 'i18n', 'en-US': 'OK Callback', 'zh-CN': '确认回调', }, setter: { componentName: 'FunctionSetter', props: { template: "onOk(${extParams}){\n console.log('Modal OK clicked');\n}", }, }, }, ], }, { name: 'afterSubmitNotificationConfig', title: { label: '通知框配置', }, condition: (props) => { return props.getPropValue('afterSubmitType') === 'showNotification'; }, type: 'group', extraProps: { display: 'entry', }, items: [ { name: 'afterSubmitNotificationConfig.icon', title: { type: 'i18n', 'en-US': 'Icon', 'zh-CN': '图标', }, setter: [ { componentName: 'SlotSetter', initialValue: { type: 'JSSlot', value: [ { componentName: 'Icon', props: { type: 'SmileOutlined', size: 20, rotate: 0, spin: false, }, }, ], }, defaultValue: null, }, ], }, { name: 'afterSubmitNotificationConfig.title', title: { type: 'i18n', 'en-US': 'Text', 'zh-CN': '文字', }, setter: 'PisellI18nSetter', defaultValue: { type: 'i18n', en: 'Submitted successfully', 'zh-CN': '提交成功', 'zh-HK': '提交成功', }, }, { name: 'afterSubmitNotificationConfig.content', title: { type: 'i18n', 'en-US': 'Message', 'zh-CN': '消息', }, setter: 'PisellI18nSetter', defaultValue: { type: 'i18n', en: 'Your form has been successfully submitted', 'zh-CN': '您的表单已成功提交', 'zh-HK': '您的表單已成功提交', }, }, { name: 'afterSubmitNotificationConfig.placement', title: { type: 'i18n', 'en-US': 'Placement', 'zh-CN': '位置', }, setter: { componentName: 'SelectSetter', props: { options: [ { title: 'top', value: 'top', }, { title: 'topLeft', value: 'topLeft', }, { title: 'topRight', value: 'topRight', }, { title: 'bottom', value: 'bottom', }, { title: 'bottomLeft', value: 'bottomLeft', }, { title: 'bottomRight', value: 'bottomRight', }, ], }, }, defaultValue: 'top', }, { name: 'afterSubmitNotificationConfig.duration', title: { type: 'i18n', 'en-US': 'Duration', 'zh-CN': '持续时间', }, setter: 'NumberSetter', defaultValue: 4.5, }, ], }, ], }, ], configure: { props: [ { title: { label: { type: 'i18n', 'en-US': 'Feature', 'zh-CN': '功能', }, }, display: 'block', type: 'group', items: [ { name: 'children', title: { label: { type: 'i18n', 'en-US': 'content', 'zh-CN': '内容', }, tip: 'children', }, propType: { type: 'oneOfType', value: ['node', 'string'], }, setter: ['SlotSetter', 'PisellI18nSetter', 'VariableSetter'], }, { name: 'htmlType', title: { label: { type: 'i18n', 'en-US': 'native type', 'zh-CN': '原生类型', }, tip: { type: 'i18n', 'en-US': 'htmlType | Set the native `type` value of `button`', 'zh-CN': 'htmlType | 设置 `button` 原生的 `type` 值', }, }, propType: { type: 'oneOf', value: ['submit', 'reset', 'button'], }, setter: [ { componentName: 'RadioGroupSetter', props: { options: [ { title: 'Submit', value: 'submit', }, { title: 'Reset', value: 'reset', }, { title: 'Button', value: 'button', }, ], }, }, 'VariableSetter', ], defaultValue: 'button', }, { name: 'className', title: { label: '样式类名', tip: 'className | 样式类名', }, propType: 'string', setter: 'StringSetter', }, { name: 'href', title: { label: { type: 'i18n', 'en-US': 'jump address', 'zh-CN': '跳转地址', }, tip: { type: 'i18n', 'en-US': 'href | click to jump to the address, specify this attribute button behavior is consistent with a link', 'zh-CN': 'href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致', }, }, propType: 'string', setter: ['StringSetter', 'VariableSetter'], }, { name: 'target', title: { label: 'Target', tip: { type: 'i18n', 'en-US': 'target | Equivalent to the target attribute of a link, effective when href exists', 'zh-CN': 'target | 相当于 a 链接的 target 属性，href 存在时生效', }, }, propType: { type: 'oneOf', value: ['_self', '_blank', '_parent', '_top'], }, setter: [ { componentName: 'SelectSetter', props: { options: [ { title: { type: 'i18n', 'en-US': 'Jump to this window', 'zh-CN': '本窗口跳转', }, value: '_self', }, { title: { type: 'i18n', 'en-US': 'open a new tab', 'zh-CN': '打开新标签页', }, value: '_blank', }, { title: { type: 'i18n', 'en-US': 'parent window jump', 'zh-CN': '父窗口跳转', }, value: '_parent', }, { title: { type: 'i18n', 'en-US': 'Top-level window jump', 'zh-CN': '顶层窗口跳转', }, value: '_top', }, ], }, }, 'StringSetter', 'VariableSetter', ], condition: { type: 'JSFunction', value: 'target => !!target.getProps().getPropValue("href")?.trim()', }, }, { name: 'customSubmit', title: '自定义提交', propType: 'func', setter: 'FunctionSetter', }, ], }, { title: { type: 'i18n', 'en-US': 'exterior', 'zh-CN': '外观', }, display: 'block', type: 'group', items: [ { name: 'type', title: { label: 'type', tip: 'set button type', }, propType: { type: 'oneOf', value: [ 'primary', 'default', 'ghost', 'dashed', 'danger', 'link', 'text', ], }, setter: [ { componentName: 'SelectSetter', props: { options: [ { title: 'primary button', value: 'primary', }, { title: 'default button', value: 'default', }, { title: 'dashed button', value: 'dashed', }, { title: 'danger button', value: 'danger', }, { title: 'link button', value: 'link', }, { title: 'text button', value: 'text', }, ], }, }, 'VariableSetter', ], }, { name: 'size', title: { label: 'size', tip: 'set button size', }, propType: { type: 'oneOf', value: ['large', 'middle', 'small'] }, setter: [ { componentName: 'RadioGroupSetter', props: { options: [ { title: 'large', value: 'large', }, { title: 'middle', value: 'middle', }, { title: 'small', value: 'small', }, ], }, }, 'VariableSetter', ], defaultValue: 'middle', }, { name: 'shape', title: { label: 'shape', tip: 'shape | Set button shape, optional value is `circle`, `round` or not set', }, propType: { type: 'oneOf', value: ['default', 'circle', 'round'] }, defaultValue: 'default', setter: [ { componentName: 'RadioGroupSetter', props: { options: [ { title: 'default', value: 'default', }, { title: 'circle', value: 'circle', }, { title: 'round', value: 'round', }, ], }, }, 'VariableSetter', ], }, { name: 'icon', title: { label: { type: 'i18n', 'en-US': 'icon', 'zh-CN': '图标', }, tip: 'icon | Set the icon component of the button', }, propType: { type: 'oneOfType', value: ['node'] }, setter: [ { componentName: 'SlotSetter', initialValue: { type: 'JSSlot', value: [ { componentName: 'Icon', props: { type: 'SmileOutlined', size: 20, rotate: 0, spin: false, }, }, ], }, defaultValue: null, }, ], }, { name: 'rightIcon', title: { label: { type: 'i18n', 'en-US': 'Right icon', 'zh-CN': '右侧图标', }, tip: 'icon | Set the icon component of the button', }, propType: { type: 'oneOfType', value: ['node'] }, setter: [ { componentName: 'SlotSetter', initialValue: { type: 'JSSlot', value: [ { componentName: 'Icon', props: { type: 'SmileOutlined', size: 20, rotate: 0, spin: false, }, }, ], }, defaultValue: null, }, ], }, { name: 'block', title: { label: { type: 'i18n', 'en-US': 'adaptive', 'zh-CN': '自适应', }, tip: { type: 'i18n', 'en-US': 'block | Option to adjust button width to its parent width', 'zh-CN': 'block | 将按钮宽度调整为其父宽度的选项', }, }, propType: 'bool', setter: 'BoolSetter', defaultValue: false, }, { name: 'danger', title: { label: { type: 'i18n', 'en-US': 'danger button', 'zh-CN': '危险按钮', }, tip: { type: 'i18n', 'en-US': 'danger | set hazard button', 'zh-CN': 'danger | 设置危险按钮', }, }, propType: 'bool', setter: 'BoolSetter', defaultValue: false, }, { name: 'ghost', title: { label: { type: 'i18n', 'en-US': 'ghost attribute', 'zh-CN': '幽灵属性', }, tip: { type: 'i18n', 'en-US': 'ghost | Ghost property to make button background transparent', 'zh-CN': 'ghost | 幽灵属性，使按钮背景透明', }, }, propType: 'bool', setter: 'BoolSetter', defaultValue: false, }, ], }, { title: { type: 'i18n', 'en-US': 'state', 'zh-CN': '状态', }, display: 'block', type: 'group', items: [ { name: 'loading', title: { label: { type: 'i18n', 'en-US': 'loading status', 'zh-CN': '载入状态', }, tip: { type: 'i18n', 'en-US': 'loading | Set button loading state', 'zh-CN': 'loading | 设置按钮载入状态', }, }, propType: 'bool', setter: ['BoolSetter', 'VariableSetter'], }, { name: 'disabled', title: { label: { type: 'i18n', 'en-US': 'Whether to disable', 'zh-CN': '是否禁用', }, tip: { type: 'i18n', 'en-US': 'disabled | Is it disabled', 'zh-CN': 'disabled | 是否为禁用状态', }, }, propType: 'bool', setter: ['BoolSetter', 'VariableSetter'], defaultValue: false, }, ], }, ], supports: { style: true, events: [ { name: 'onClick', template: "onClick(event,${extParams}){\n// 点击按钮时的回调\nconsole.log('onClick', event);}", }, ], }, component: {}, }, }; export default { ...SubmitButtonMeta, snippets, };