@1money/component-ui 0.0.74 → 0.0.76
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/components/Dialog/Dialog.js +7 -39
- package/es/components/Dialog/constants.d.ts +0 -3
- package/es/components/Dialog/constants.js +1 -4
- package/es/components/Dialog/style/Dialog.css +0 -21
- package/es/components/ProForm/ProForm.js +46 -33
- package/es/components/ProForm/ProFormDependency.js +6 -16
- package/es/components/ProForm/ProFormItem.js +5 -7
- package/es/components/ProForm/ProFormList.js +112 -40
- package/es/components/ProForm/core/constants.d.ts +2 -0
- package/es/components/ProForm/core/constants.js +7 -1
- package/es/components/ProForm/core/devWarning.d.ts +3 -0
- package/es/components/ProForm/core/devWarning.js +22 -0
- package/es/components/ProForm/core/formStore.d.ts +10 -2
- package/es/components/ProForm/core/formStore.js +21 -2
- package/es/components/ProForm/core/hooks/useForm.js +246 -103
- package/es/components/ProForm/core/hooks/useFormCore.js +134 -28
- package/es/components/ProForm/core/interface.d.ts +124 -49
- package/es/components/ProForm/core/runRules.d.ts +44 -12
- package/es/components/ProForm/core/runRules.js +584 -133
- package/es/components/ProForm/core/useFormItem.d.ts +6 -7
- package/es/components/ProForm/core/useFormItem.js +44 -22
- package/es/components/ProForm/core/validationError.d.ts +13 -0
- package/es/components/ProForm/core/validationError.js +29 -0
- package/es/components/ProForm/fields/ProFormCheckboxGroup.js +19 -5
- package/es/components/ProForm/fields/ProFormFieldSet.js +51 -12
- package/es/components/ProForm/fields/ProFormRadioGroup.js +8 -3
- package/es/components/ProForm/fields/ProFormSelect.js +13 -7
- package/es/components/ProForm/fields/createProFormField.js +18 -25
- package/es/components/ProForm/hooks/useFieldRequest.js +10 -8
- package/es/components/ProForm/index.d.ts +2 -1
- package/es/components/ProForm/index.js +4 -1
- package/es/components/ProForm/interface.d.ts +31 -40
- package/es/components/ProForm/layouts/QueryFilter.js +24 -16
- package/es/components/ProForm/style/ProForm.css +0 -1
- package/es/components/ProForm/utils.d.ts +8 -0
- package/es/components/ProForm/utils.js +51 -3
- package/es/components/Table/core/useTableSetup.js +2 -2
- package/es/components/Table/interface.d.ts +1 -1
- package/es/index.css +1 -1
- package/lib/components/Dialog/Dialog.js +6 -38
- package/lib/components/Dialog/constants.d.ts +0 -3
- package/lib/components/Dialog/constants.js +1 -4
- package/lib/components/Dialog/style/Dialog.css +0 -21
- package/lib/components/ProForm/ProForm.js +45 -32
- package/lib/components/ProForm/ProFormDependency.js +5 -15
- package/lib/components/ProForm/ProFormItem.js +5 -7
- package/lib/components/ProForm/ProFormList.js +110 -38
- package/lib/components/ProForm/core/constants.d.ts +2 -0
- package/lib/components/ProForm/core/constants.js +8 -2
- package/lib/components/ProForm/core/devWarning.d.ts +3 -0
- package/lib/components/ProForm/core/devWarning.js +29 -0
- package/lib/components/ProForm/core/formStore.d.ts +10 -2
- package/lib/components/ProForm/core/formStore.js +23 -2
- package/lib/components/ProForm/core/hooks/useForm.js +242 -99
- package/lib/components/ProForm/core/hooks/useFormCore.js +133 -27
- package/lib/components/ProForm/core/interface.d.ts +124 -49
- package/lib/components/ProForm/core/runRules.d.ts +44 -12
- package/lib/components/ProForm/core/runRules.js +587 -133
- package/lib/components/ProForm/core/useFormItem.d.ts +6 -7
- package/lib/components/ProForm/core/useFormItem.js +43 -21
- package/lib/components/ProForm/core/validationError.d.ts +13 -0
- package/lib/components/ProForm/core/validationError.js +36 -0
- package/lib/components/ProForm/fields/ProFormCheckboxGroup.js +18 -4
- package/lib/components/ProForm/fields/ProFormFieldSet.js +51 -12
- package/lib/components/ProForm/fields/ProFormRadioGroup.js +7 -2
- package/lib/components/ProForm/fields/ProFormSelect.js +13 -7
- package/lib/components/ProForm/fields/createProFormField.js +18 -25
- package/lib/components/ProForm/hooks/useFieldRequest.js +10 -8
- package/lib/components/ProForm/index.d.ts +2 -1
- package/lib/components/ProForm/index.js +10 -1
- package/lib/components/ProForm/interface.d.ts +31 -40
- package/lib/components/ProForm/layouts/QueryFilter.js +24 -16
- package/lib/components/ProForm/style/ProForm.css +0 -1
- package/lib/components/ProForm/utils.d.ts +8 -0
- package/lib/components/ProForm/utils.js +52 -3
- package/lib/components/Table/core/useTableSetup.js +2 -2
- package/lib/components/Table/interface.d.ts +1 -1
- package/lib/index.css +1 -1
- package/package.json +1 -1
- package/scripts/mcp-server/examples.generated.json +42 -36
- package/scripts/mcp-server/index.generated.json +23 -67
package/package.json
CHANGED
|
@@ -67,6 +67,12 @@
|
|
|
67
67
|
"source": "stories",
|
|
68
68
|
"compilable": true
|
|
69
69
|
},
|
|
70
|
+
"059d4b90513df16e1152c3b3c26f16fd3f888eed8540bfcd39df492d290fb571": {
|
|
71
|
+
"title": "Rule",
|
|
72
|
+
"code": "<ProForm.Text\n name=\"username\"\n label=\"Username\"\n rules={[\n { required: true, message: 'Username is required' },\n {\n validator: async (_rule, value) => {\n if (!value) return;\n const available = await checkUsernameAvailable(String(value));\n if (!available) {\n throw new Error('Username is already taken');\n }\n },\n },\n ]}\n/>",
|
|
73
|
+
"source": "readme",
|
|
74
|
+
"compilable": true
|
|
75
|
+
},
|
|
70
76
|
"059d700d7a0e1ac3f3128b3461d9f1e718e140448690ccb50db0915c49cd7461": {
|
|
71
77
|
"title": "Canonical usage",
|
|
72
78
|
"code": "import { Alert } from '@1money/component-ui';\n// or\nimport { Alert } from '@1money/component-ui/Alert';",
|
|
@@ -79,12 +85,6 @@
|
|
|
79
85
|
"source": "stories",
|
|
80
86
|
"compilable": true
|
|
81
87
|
},
|
|
82
|
-
"06ed80f270ad4a44a62966e3d03d55cb761b84d414aac8e3da266148f530c106": {
|
|
83
|
-
"title": "Dependency In List",
|
|
84
|
-
"code": "<ProForm\n {...args}\n initialValues={{ items: [{ type: 'fixed', amount: '100' }] }}\n onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n >\n <ProFormList name=\"items\" label=\"Discounts\" min={1} max={5}>\n {(fields) =>\n fields.map(({ name, key }) => (\n <div key={key} style={{ display: 'flex', gap: 8, alignItems: 'flex-end' }}>\n <ProFormSelect\n name={`${name}.type`}\n label=\"Type\"\n valueEnum={{ fixed: 'Fixed amount', percent: 'Percentage' }}\n />\n <ProFormDependency name={[`${name}.type`]} ignoreFormListField>\n {(values) =>\n values[`${name}.type`] === 'percent' ? (\n <ProFormText name={`${name}.rate`} label=\"Rate (%)\" placeholder=\"e.g. 10\" />\n ) : (\n <ProFormText name={`${name}.amount`} label=\"Amount ($)\" placeholder=\"e.g. 100\" />\n )\n }\n </ProFormDependency>\n </div>\n ))\n }\n </ProFormList>\n </ProForm>",
|
|
85
|
-
"source": "stories",
|
|
86
|
-
"compilable": false
|
|
87
|
-
},
|
|
88
88
|
"0716e5e5fffc542e7b028181c93a5655fb3738281657fc43abb5eb99a95b3e8b": {
|
|
89
89
|
"title": "Custom Icon",
|
|
90
90
|
"code": "<Alert\n {...args}\n status=\"info\"\n title=\"Manual review queued\"\n body=\"This alert uses a custom icon to reflect a workflow-specific state instead of the default status glyph.\"\n icon={<Icons name=\"notificationWarning\" size={32} />}\n link={{ label: 'Open queue', onClick: fn() }}\n />",
|
|
@@ -235,6 +235,12 @@
|
|
|
235
235
|
"source": "stories",
|
|
236
236
|
"compilable": false
|
|
237
237
|
},
|
|
238
|
+
"13500f6400048c58ebdd67eb24eb90d67d08102e36cba22502bc9dc016cc7476": {
|
|
239
|
+
"title": "Warning Only Validation",
|
|
240
|
+
"code": "<ProForm\n {...args}\n initialValues={{ nickname: '', amount: '' }}\n onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n >\n <ProFormText\n name=\"nickname\"\n label=\"Nickname\"\n description=\"Submitting still works while the warning is shown\"\n rules={[\n { required: true },\n { min: 4, warningOnly: true, message: 'Short nicknames are hard to search' },\n ]}\n />\n <ProFormText\n name=\"amount\"\n label=\"Amount\"\n description=\"Validated on blur only (item-level validateTrigger)\"\n validateTrigger=\"onBlur\"\n rules={[{ pattern: /^\\d+$/, message: 'Digits only' }]}\n />\n </ProForm>",
|
|
241
|
+
"source": "stories",
|
|
242
|
+
"compilable": false
|
|
243
|
+
},
|
|
238
244
|
"144e248f0e0e1f5a681bdd8625add8d71643d3cca3f40bd840d914b057970d9a": {
|
|
239
245
|
"title": "All Variants",
|
|
240
246
|
"code": "<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n <div>\n <p style={{ marginBottom: 8 }}>Default</p>\n <Copy {...args} contained/>\n </div>\n <div>\n <Copy {...args} contained={false} />\n </div>\n </div>",
|
|
@@ -925,6 +931,12 @@
|
|
|
925
931
|
"source": "stories",
|
|
926
932
|
"compilable": false
|
|
927
933
|
},
|
|
934
|
+
"59856252632897157d32c74aa985ecb8fb411ce6574ee696171c79f957372825": {
|
|
935
|
+
"title": "Async Validator",
|
|
936
|
+
"code": "<ProForm\n {...args}\n initialValues={{ username: '' }}\n onFinish={(values) => alert('Success: ' + JSON.stringify(values))}\n >\n <ProFormText\n name=\"username\"\n label=\"Username\"\n placeholder=\"Try admin / root / 1money\"\n description=\"The availability check is declared with rule-level validateTrigger: 'onBlur' inside an item-level validateTrigger of ['onChange', 'onBlur'] (rule triggers must be a subset of the item triggers). It runs on blur with a simulated 800ms server delay — submit always runs every rule.\"\n validateTrigger={['onChange', 'onBlur']}\n rules={[\n { required: true, message: 'Username is required' },\n { validator: checkUsernameAvailable, validateTrigger: 'onBlur' },\n ]}\n />\n <CheckingHint name=\"username\" />\n </ProForm>",
|
|
937
|
+
"source": "stories",
|
|
938
|
+
"compilable": false
|
|
939
|
+
},
|
|
928
940
|
"5a377a26c6ff1d855746de603b966dc47d7c9bcb12b73a0bcf2d990f55822934": {
|
|
929
941
|
"title": "Figma Wallet Registry",
|
|
930
942
|
"code": "<WalletRegistryStory\n dataSource={walletRegistryRows}\n defaultExpandedKeys={['wallet-customer-funds']}\n />",
|
|
@@ -1135,6 +1147,12 @@
|
|
|
1135
1147
|
"source": "readme",
|
|
1136
1148
|
"compilable": true
|
|
1137
1149
|
},
|
|
1150
|
+
"6f097a82d83df1982f3f442539825fbae168fd100c8516f97657fdc82d8373f1": {
|
|
1151
|
+
"title": "Dependency In List",
|
|
1152
|
+
"code": "<ProForm\n {...args}\n initialValues={{ items: [{ type: 'fixed', amount: '100' }] }}\n onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n >\n <ProFormList name=\"items\" label=\"Discounts\" min={1} max={5}>\n {(fields) =>\n fields.map(({ name, key }) => (\n <div key={key} style={{ display: 'flex', gap: 8, alignItems: 'flex-end' }}>\n <ProFormSelect\n name={`${name}.type`}\n label=\"Type\"\n valueEnum={{ fixed: 'Fixed amount', percent: 'Percentage' }}\n />\n <ProFormDependency name={[`${name}.type`]}>\n {(values) =>\n values[`${name}.type`] === 'percent' ? (\n <ProFormText name={`${name}.rate`} label=\"Rate (%)\" placeholder=\"e.g. 10\" />\n ) : (\n <ProFormText name={`${name}.amount`} label=\"Amount ($)\" placeholder=\"e.g. 100\" />\n )\n }\n </ProFormDependency>\n </div>\n ))\n }\n </ProFormList>\n </ProForm>",
|
|
1153
|
+
"source": "stories",
|
|
1154
|
+
"compilable": false
|
|
1155
|
+
},
|
|
1138
1156
|
"6f2b7da00479a6033fdaca36f0646a924c61cbf09cd0e07da6948a884af98a61": {
|
|
1139
1157
|
"title": "Dependency",
|
|
1140
1158
|
"code": "<ProForm\n {...args}\n initialValues={{ hasAccount: false, accountType: '' }}\n >\n <ProFormSwitch name=\"hasAccount\" label=\"Has Account\" />\n <ProFormDependency name={['hasAccount']}>\n {({ hasAccount }) =>\n hasAccount ? (\n <>\n <ProFormText\n name=\"accountId\"\n label=\"Account ID\"\n rules={[{ required: true }]}\n />\n <ProFormText name=\"accountName\" label=\"Account Name\" />\n </>\n ) : null\n }\n </ProFormDependency>\n </ProForm>",
|
|
@@ -1195,12 +1213,6 @@
|
|
|
1195
1213
|
"source": "readme",
|
|
1196
1214
|
"compilable": true
|
|
1197
1215
|
},
|
|
1198
|
-
"74f28ec19da10ee7a3cecb129f444ca1e9b9bfa6a44bda5422d89c70a079ddc3": {
|
|
1199
|
-
"title": "Validation",
|
|
1200
|
-
"code": "<ProForm\n {...args}\n initialValues={{}}\n onFinish={(values) => alert('Success: ' + JSON.stringify(values))}\n >\n <ProFormText\n name=\"username\"\n label=\"Username\"\n rules={[\n { required: true, message: 'Username is required' },\n { min: 3, message: 'At least 3 characters' },\n { max: 20, message: 'At most 20 characters' },\n ]}\n />\n <ProFormText\n name=\"email\"\n label=\"Email\"\n rules={[\n { required: true, message: 'Email is required' },\n { pattern: /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/, message: 'Invalid email' },\n ]}\n />\n <ProFormPassword\n name=\"password\"\n label=\"Password\"\n rules={[\n { required: true },\n { min: 8, message: 'At least 8 characters' },\n ]}\n />\n <ProFormCheckbox\n name=\"terms\"\n label=\"I accept the terms\"\n rules={[\n {\n validator: (value) => {\n if (!value) return 'You must accept the terms';\n return true;\n },\n },\n ]}\n />\n </ProForm>",
|
|
1201
|
-
"source": "stories",
|
|
1202
|
-
"compilable": false
|
|
1203
|
-
},
|
|
1204
1216
|
"74f5da9a09e06d9d070a4672ca86016fd56695dd053d8b5bfb5f5f4388eadd32": {
|
|
1205
1217
|
"title": "Usage",
|
|
1206
1218
|
"code": "import { ProTable } from '@1money/component-ui';\nimport type { ProColumns } from '@1money/component-ui';\nimport '@1money/component-ui/index.css';\n\ninterface Account { id: string; name: string; status: string; amount: number }\n\nconst columns: ProColumns<Account>[] = [\n { key: 'name', dataIndex: 'name', title: 'Name', valueType: 'text' },\n {\n key: 'status', dataIndex: 'status', title: 'Status', valueType: 'select',\n valueEnum: { active: { text: 'Active' }, frozen: { text: 'Frozen' } },\n },\n { key: 'amount', dataIndex: 'amount', title: 'Amount', valueType: 'digit', search: false },\n];\n\n<ProTable<Account>\n rowKey=\"id\"\n columns={columns}\n request={async (params, sort, filter) => {\n const res = await api.list(params); // params includes current, pageSize + search values\n return { data: res.rows, total: res.total, success: true };\n }}\n pagination={{ pageSize: 10 }}\n/>;",
|
|
@@ -1483,18 +1495,18 @@
|
|
|
1483
1495
|
"source": "stories",
|
|
1484
1496
|
"compilable": true
|
|
1485
1497
|
},
|
|
1498
|
+
"8a26ecdb4c7ab900bc0b4ddf1c51f7da668aa5ed67d2683ef63f07028cdb7e84": {
|
|
1499
|
+
"title": "Nested List",
|
|
1500
|
+
"code": "<ProForm\n {...args}\n initialValues={{\n groups: [\n { title: 'Group A', items: [{ name: 'Item 1' }] },\n ],\n }}\n onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n >\n <ProFormList name=\"groups\" label=\"Groups\">\n {(fields) =>\n fields.map(({ name, key }) => (\n <div key={key} style={{ border: '1px solid #eee', padding: 12, marginBottom: 8, borderRadius: 4 }}>\n <ProFormText name={`${name}.title`} label=\"Group Title\" />\n {/* Nested list names are absolute paths, built from the row's field.name */}\n <ProFormList name={`${name}.items`} label=\"Items\">\n {(subFields) =>\n subFields.map((sf) => (\n <ProFormText key={sf.key} name={`${sf.name}.name`} label=\"Item Name\" />\n ))\n }\n </ProFormList>\n </div>\n ))\n }\n </ProFormList>\n </ProForm>",
|
|
1501
|
+
"source": "stories",
|
|
1502
|
+
"compilable": false
|
|
1503
|
+
},
|
|
1486
1504
|
"8a5806fc588c223301f3b8050939aef03b37dac957c426887998aa3f4423697e": {
|
|
1487
1505
|
"title": "Vertical",
|
|
1488
1506
|
"code": "<span>\n Text <Divider type=\"vertical\" /> Text\n</span>",
|
|
1489
1507
|
"source": "readme",
|
|
1490
1508
|
"compilable": true
|
|
1491
1509
|
},
|
|
1492
|
-
"8b751a499e8365e384d8c21bfd57f0c317933488ecf3d0d3cef92f63f7876153": {
|
|
1493
|
-
"title": "Warning Only Validation",
|
|
1494
|
-
"code": "<ProForm\n {...args}\n initialValues={{ nickname: '', amount: '' }}\n onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n >\n <ProFormText\n name=\"nickname\"\n label=\"Nickname\"\n description=\"Submitting still works while the warning is shown\"\n rules={[\n { required: true },\n { min: 4, warningOnly: true, message: 'Short nicknames are hard to search' },\n ]}\n />\n <ProFormText\n name=\"amount\"\n label=\"Amount\"\n description=\"Validated on blur only (rule-level validateTrigger)\"\n rules={[{ pattern: /^\\d+$/, message: 'Digits only', validateTrigger: 'onBlur' }]}\n />\n </ProForm>",
|
|
1495
|
-
"source": "stories",
|
|
1496
|
-
"compilable": false
|
|
1497
|
-
},
|
|
1498
1510
|
"8bbc2c00d6f26600eaf14a2347cb6396fa9aed93dd50bb9b95614282b0c307ea": {
|
|
1499
1511
|
"title": "Colors",
|
|
1500
1512
|
"code": "<div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>\n {LINK_COLORS.map((color) => (\n <Link {...args} key={color} color={color}>\n {color}\n </Link>\n ))}\n </div>",
|
|
@@ -1969,6 +1981,12 @@
|
|
|
1969
1981
|
"source": "stories",
|
|
1970
1982
|
"compilable": true
|
|
1971
1983
|
},
|
|
1984
|
+
"b978823a61980bc8652f12244d9754f6b25138846aa816e17df5f72394a679f6": {
|
|
1985
|
+
"title": "Function-form rules (cross-field validation)",
|
|
1986
|
+
"code": "<ProForm.Password\n name=\"confirm\"\n label=\"Confirm password\"\n rules={[\n { required: true, message: 'Please confirm your password' },\n ({ getFieldValue }) => ({\n validator: (_rule, value) => {\n if (!value || getFieldValue('password') === value) {\n return Promise.resolve();\n }\n return Promise.reject(new Error('The two passwords do not match'));\n },\n }),\n ]}\n/>",
|
|
1987
|
+
"source": "readme",
|
|
1988
|
+
"compilable": true
|
|
1989
|
+
},
|
|
1972
1990
|
"b9cc21db46c34c1f749ec2f5cc996c0eb92608376b07b2eb61f2bc427f045927": {
|
|
1973
1991
|
"title": "Virtual Scrolling",
|
|
1974
1992
|
"code": "{\n const largeData: PortfolioRow[] = Array.from({ length: 5000 }, (_, index) => ({\n id: `virtual-${index + 1}`,\n wallet: `Wallet ${index + 1}`,\n owner: `Desk ${index % 12}`,\n network: ['Ethereum', 'Solana', 'Polygon', 'Arbitrum'][index % 4],\n status: (['active', 'hold', 'review'] as const)[index % 3],\n balance: 200000 + (index * 1375),\n actionLabel: 'Open',\n countryFlag: index % 2 === 0 ? '🇺🇸' : '🇪🇺',\n }));\n\n return (\n <div>\n <TypographyBody size=\"sm\" color=\"default-tertiary\" style={hintStyle}>\n 5,000 rows rendered with the virtualized table kernel.\n </TypographyBody>\n <VirtualTable<PortfolioRow>\n rowKey=\"id\"\n columns={virtualColumns}\n dataSource={largeData}\n scroll={{ x: 740, y: 360 }}\n pagination={false}\n />\n </div>\n );\n }",
|
|
@@ -2083,12 +2101,6 @@
|
|
|
2083
2101
|
"source": "stories",
|
|
2084
2102
|
"compilable": false
|
|
2085
2103
|
},
|
|
2086
|
-
"c3aaf0098db4c77ba5af727f8c2eb70a9969be6ea15dcba309d583137cfe6e21": {
|
|
2087
|
-
"title": "Nested List",
|
|
2088
|
-
"code": "<ProForm\n {...args}\n initialValues={{\n groups: [\n { title: 'Group A', items: [{ name: 'Item 1' }] },\n ],\n }}\n onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n >\n <ProFormList name=\"groups\" label=\"Groups\">\n {(fields) =>\n fields.map(({ name, key }) => (\n <div key={key} style={{ border: '1px solid #eee', padding: 12, marginBottom: 8, borderRadius: 4 }}>\n <ProFormText name={`${name}.title`} label=\"Group Title\" />\n <ProFormList name=\"items\" label=\"Items\">\n {(subFields) =>\n subFields.map((sf) => (\n <ProFormText key={sf.key} name={`${sf.name}.name`} label=\"Item Name\" />\n ))\n }\n </ProFormList>\n </div>\n ))\n }\n </ProFormList>\n </ProForm>",
|
|
2089
|
-
"source": "stories",
|
|
2090
|
-
"compilable": false
|
|
2091
|
-
},
|
|
2092
2104
|
"c44b0833c259afe028af9e6fd0d572e5cdf883c9fe8f8701cc2f2199f6fa82a0": {
|
|
2093
2105
|
"title": "Canonical usage",
|
|
2094
2106
|
"code": "import { Checkbox } from '@1money/component-ui';\n// or\nimport { Checkbox } from '@1money/component-ui/Checkbox';",
|
|
@@ -2311,12 +2323,6 @@
|
|
|
2311
2323
|
"source": "stories",
|
|
2312
2324
|
"compilable": false
|
|
2313
2325
|
},
|
|
2314
|
-
"dbe17f0fba3f62604b6da16ec484cb907242b1a61d6976be96c8e08deea44e14": {
|
|
2315
|
-
"title": "Rule",
|
|
2316
|
-
"code": "<ProForm.Text\n name=\"username\"\n label=\"Username\"\n rules={[\n { required: true, message: 'Username is required' },\n {\n validator: async (value) => {\n if (!value) return true;\n const available = await checkUsernameAvailable(String(value));\n return available ? true : 'Username is already taken';\n },\n },\n ]}\n/>",
|
|
2317
|
-
"source": "readme",
|
|
2318
|
-
"compilable": true
|
|
2319
|
-
},
|
|
2320
2326
|
"dbe5994cff8f6c4f3635681f94133b647911651dcbd137756971ec6c7ff898f9": {
|
|
2321
2327
|
"title": "Primary",
|
|
2322
2328
|
"code": "<Grid {...args}>\n <Grid.Col span={SPAN_THIRD}><div style={DEMO_BOX_STYLE}>4</div></Grid.Col>\n <Grid.Col span={SPAN_THIRD}><div style={DEMO_BOX_STYLE}>4</div></Grid.Col>\n <Grid.Col span={SPAN_THIRD}><div style={DEMO_BOX_STYLE}>4</div></Grid.Col>\n </Grid>",
|
|
@@ -2449,6 +2455,12 @@
|
|
|
2449
2455
|
"source": "readme",
|
|
2450
2456
|
"compilable": true
|
|
2451
2457
|
},
|
|
2458
|
+
"e9cd91e807fb73460d6629c81e7b6b5b580f6432b27f470e6cdaebb98ced775c": {
|
|
2459
|
+
"title": "Validation",
|
|
2460
|
+
"code": "<ProForm\n {...args}\n initialValues={{}}\n onFinish={(values) => alert('Success: ' + JSON.stringify(values))}\n >\n <ProFormText\n name=\"username\"\n label=\"Username\"\n rules={[\n { required: true, message: 'Username is required' },\n { min: 3, message: 'At least 3 characters' },\n { max: 20, message: 'At most 20 characters' },\n ]}\n />\n <ProFormText\n name=\"email\"\n label=\"Email\"\n rules={[\n { required: true, message: 'Email is required' },\n { pattern: /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/, message: 'Invalid email' },\n ]}\n />\n <ProFormPassword\n name=\"password\"\n label=\"Password\"\n rules={[\n { required: true },\n { min: 8, message: 'At least 8 characters' },\n ]}\n />\n <ProFormCheckbox\n name=\"terms\"\n label=\"I accept the terms\"\n rules={[\n {\n validator: (_rule, value) => {\n if (!value) throw new Error('You must accept the terms');\n },\n },\n ]}\n />\n </ProForm>",
|
|
2461
|
+
"source": "stories",
|
|
2462
|
+
"compilable": false
|
|
2463
|
+
},
|
|
2452
2464
|
"e9f60d4e278ffd41098f4db04f41855ffd8a9cb7a16f51dc8f8e99f4295effaa": {
|
|
2453
2465
|
"title": "Disabled",
|
|
2454
2466
|
"code": "<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n <Switch {...args} label=\"Unchecked disabled\" disabled />\n <Switch {...args} label=\"Checked disabled\" disabled defaultChecked />\n </div>",
|
|
@@ -2635,12 +2647,6 @@
|
|
|
2635
2647
|
"source": "readme",
|
|
2636
2648
|
"compilable": true
|
|
2637
2649
|
},
|
|
2638
|
-
"fbc5d5eb0d5bdb23c26d08078a915d310bae38ddba853b4c3c905712dc72b3bb": {
|
|
2639
|
-
"title": "Async Validator",
|
|
2640
|
-
"code": "<ProForm\n {...args}\n initialValues={{ username: '' }}\n onFinish={(values) => alert('Success: ' + JSON.stringify(values))}\n >\n <ProFormText\n name=\"username\"\n label=\"Username\"\n placeholder=\"Try admin / root / 1money\"\n description=\"The availability check returns a Promise, so it never runs while typing (the sync onChange pass defers async validators). It is declared with validateTrigger: 'onBlur' to run on blur — submit always runs every rule — with a simulated 800ms server delay.\"\n rules={[\n { required: true, message: 'Username is required' },\n { validator: checkUsernameAvailable, validateTrigger: 'onBlur' },\n ]}\n />\n <CheckingHint name=\"username\" />\n </ProForm>",
|
|
2641
|
-
"source": "stories",
|
|
2642
|
-
"compilable": false
|
|
2643
|
-
},
|
|
2644
2650
|
"fbd27b2c45cf77922ee28f98299af2815b390ade86f902db573d0f520dcc2eb6": {
|
|
2645
2651
|
"title": "Import",
|
|
2646
2652
|
"code": "import { Skeleton } from '@1money/component-ui';\n// or\nimport { Skeleton } from '@1money/component-ui/Skeleton';",
|
|
@@ -7016,7 +7016,7 @@
|
|
|
7016
7016
|
},
|
|
7017
7017
|
{
|
|
7018
7018
|
"name": "onFinishFailed",
|
|
7019
|
-
"type": "(errorInfo: {\n values: Values;\n errors: Record<string,
|
|
7019
|
+
"type": "(errorInfo: {\n values: Values;\n errors: Record<string, ReactNode>;\n }) => void",
|
|
7020
7020
|
"optional": true,
|
|
7021
7021
|
"default": null,
|
|
7022
7022
|
"description": "",
|
|
@@ -7126,25 +7126,9 @@
|
|
|
7126
7126
|
"description": "",
|
|
7127
7127
|
"inheritedFrom": null
|
|
7128
7128
|
},
|
|
7129
|
-
{
|
|
7130
|
-
"name": "colon",
|
|
7131
|
-
"type": "boolean",
|
|
7132
|
-
"optional": true,
|
|
7133
|
-
"default": null,
|
|
7134
|
-
"description": "",
|
|
7135
|
-
"inheritedFrom": null
|
|
7136
|
-
},
|
|
7137
|
-
{
|
|
7138
|
-
"name": "requiredMark",
|
|
7139
|
-
"type": "boolean",
|
|
7140
|
-
"optional": true,
|
|
7141
|
-
"default": null,
|
|
7142
|
-
"description": "",
|
|
7143
|
-
"inheritedFrom": null
|
|
7144
|
-
},
|
|
7145
7129
|
{
|
|
7146
7130
|
"name": "validateTrigger",
|
|
7147
|
-
"type": "
|
|
7131
|
+
"type": "ValidateTriggerProp",
|
|
7148
7132
|
"optional": true,
|
|
7149
7133
|
"default": null,
|
|
7150
7134
|
"description": "",
|
|
@@ -7158,14 +7142,6 @@
|
|
|
7158
7142
|
"description": "",
|
|
7159
7143
|
"inheritedFrom": null
|
|
7160
7144
|
},
|
|
7161
|
-
{
|
|
7162
|
-
"name": "readonly",
|
|
7163
|
-
"type": "boolean",
|
|
7164
|
-
"optional": true,
|
|
7165
|
-
"default": null,
|
|
7166
|
-
"description": "",
|
|
7167
|
-
"inheritedFrom": null
|
|
7168
|
-
},
|
|
7169
7145
|
{
|
|
7170
7146
|
"name": "mode",
|
|
7171
7147
|
"type": "ProFormMode",
|
|
@@ -7379,7 +7355,11 @@
|
|
|
7379
7355
|
"source": "readme"
|
|
7380
7356
|
},
|
|
7381
7357
|
{
|
|
7382
|
-
"hash": "
|
|
7358
|
+
"hash": "059d4b90513df16e1152c3b3c26f16fd3f888eed8540bfcd39df492d290fb571",
|
|
7359
|
+
"source": "readme"
|
|
7360
|
+
},
|
|
7361
|
+
{
|
|
7362
|
+
"hash": "b978823a61980bc8652f12244d9754f6b25138846aa816e17df5f72394a679f6",
|
|
7383
7363
|
"source": "readme"
|
|
7384
7364
|
},
|
|
7385
7365
|
{
|
|
@@ -7431,11 +7411,11 @@
|
|
|
7431
7411
|
"source": "stories"
|
|
7432
7412
|
},
|
|
7433
7413
|
{
|
|
7434
|
-
"hash": "
|
|
7414
|
+
"hash": "e9cd91e807fb73460d6629c81e7b6b5b580f6432b27f470e6cdaebb98ced775c",
|
|
7435
7415
|
"source": "stories"
|
|
7436
7416
|
},
|
|
7437
7417
|
{
|
|
7438
|
-
"hash": "
|
|
7418
|
+
"hash": "59856252632897157d32c74aa985ecb8fb411ce6574ee696171c79f957372825",
|
|
7439
7419
|
"source": "stories"
|
|
7440
7420
|
},
|
|
7441
7421
|
{
|
|
@@ -7459,7 +7439,7 @@
|
|
|
7459
7439
|
"source": "stories"
|
|
7460
7440
|
},
|
|
7461
7441
|
{
|
|
7462
|
-
"hash": "
|
|
7442
|
+
"hash": "6f097a82d83df1982f3f442539825fbae168fd100c8516f97657fdc82d8373f1",
|
|
7463
7443
|
"source": "stories"
|
|
7464
7444
|
},
|
|
7465
7445
|
{
|
|
@@ -7551,7 +7531,7 @@
|
|
|
7551
7531
|
"source": "stories"
|
|
7552
7532
|
},
|
|
7553
7533
|
{
|
|
7554
|
-
"hash": "
|
|
7534
|
+
"hash": "8a26ecdb4c7ab900bc0b4ddf1c51f7da668aa5ed67d2683ef63f07028cdb7e84",
|
|
7555
7535
|
"source": "stories"
|
|
7556
7536
|
},
|
|
7557
7537
|
{
|
|
@@ -7567,7 +7547,7 @@
|
|
|
7567
7547
|
"source": "stories"
|
|
7568
7548
|
},
|
|
7569
7549
|
{
|
|
7570
|
-
"hash": "
|
|
7550
|
+
"hash": "13500f6400048c58ebdd67eb24eb90d67d08102e36cba22502bc9dc016cc7476",
|
|
7571
7551
|
"source": "stories"
|
|
7572
7552
|
},
|
|
7573
7553
|
{
|
|
@@ -8095,14 +8075,6 @@
|
|
|
8095
8075
|
"description": "",
|
|
8096
8076
|
"inheritedFrom": null
|
|
8097
8077
|
},
|
|
8098
|
-
{
|
|
8099
|
-
"name": "ignoreFormListField",
|
|
8100
|
-
"type": "boolean",
|
|
8101
|
-
"optional": true,
|
|
8102
|
-
"default": null,
|
|
8103
|
-
"description": "",
|
|
8104
|
-
"inheritedFrom": null
|
|
8105
|
-
},
|
|
8106
8078
|
{
|
|
8107
8079
|
"name": "children",
|
|
8108
8080
|
"type": "(\n values: Record<string, unknown>,\n form: ProFormFormInstance<Values>,\n ) => ReactNode",
|
|
@@ -8544,15 +8516,7 @@
|
|
|
8544
8516
|
},
|
|
8545
8517
|
{
|
|
8546
8518
|
"name": "rules",
|
|
8547
|
-
"type": "
|
|
8548
|
-
"optional": true,
|
|
8549
|
-
"default": null,
|
|
8550
|
-
"description": "",
|
|
8551
|
-
"inheritedFrom": null
|
|
8552
|
-
},
|
|
8553
|
-
{
|
|
8554
|
-
"name": "required",
|
|
8555
|
-
"type": "boolean",
|
|
8519
|
+
"type": "FormRule[]",
|
|
8556
8520
|
"optional": true,
|
|
8557
8521
|
"default": null,
|
|
8558
8522
|
"description": "",
|
|
@@ -9202,15 +9166,7 @@
|
|
|
9202
9166
|
},
|
|
9203
9167
|
{
|
|
9204
9168
|
"name": "rules",
|
|
9205
|
-
"type": "
|
|
9206
|
-
"optional": true,
|
|
9207
|
-
"default": null,
|
|
9208
|
-
"description": "",
|
|
9209
|
-
"inheritedFrom": null
|
|
9210
|
-
},
|
|
9211
|
-
{
|
|
9212
|
-
"name": "required",
|
|
9213
|
-
"type": "boolean",
|
|
9169
|
+
"type": "FormRule[]",
|
|
9214
9170
|
"optional": true,
|
|
9215
9171
|
"default": null,
|
|
9216
9172
|
"description": "",
|
|
@@ -9248,14 +9204,6 @@
|
|
|
9248
9204
|
"description": "",
|
|
9249
9205
|
"inheritedFrom": null
|
|
9250
9206
|
},
|
|
9251
|
-
{
|
|
9252
|
-
"name": "colon",
|
|
9253
|
-
"type": "boolean",
|
|
9254
|
-
"optional": true,
|
|
9255
|
-
"default": null,
|
|
9256
|
-
"description": "",
|
|
9257
|
-
"inheritedFrom": null
|
|
9258
|
-
},
|
|
9259
9207
|
{
|
|
9260
9208
|
"name": "hidden",
|
|
9261
9209
|
"type": "boolean",
|
|
@@ -9343,6 +9291,14 @@
|
|
|
9343
9291
|
"default": null,
|
|
9344
9292
|
"description": "Debounce (ms) applied to onChange-triggered validation",
|
|
9345
9293
|
"inheritedFrom": null
|
|
9294
|
+
},
|
|
9295
|
+
{
|
|
9296
|
+
"name": "validateTrigger",
|
|
9297
|
+
"type": "ValidateTriggerProp",
|
|
9298
|
+
"optional": true,
|
|
9299
|
+
"default": null,
|
|
9300
|
+
"description": "Item-level validateTrigger - overrides the form-level setting",
|
|
9301
|
+
"inheritedFrom": null
|
|
9346
9302
|
}
|
|
9347
9303
|
],
|
|
9348
9304
|
"extends": [],
|
|
@@ -11181,7 +11137,7 @@
|
|
|
11181
11137
|
"useFormWatch"
|
|
11182
11138
|
],
|
|
11183
11139
|
"searchTags": [],
|
|
11184
|
-
"typeText": "| { success: true; values: Values; errors?: undefined }\n | { success: false; errors: Record<string,
|
|
11140
|
+
"typeText": "| { success: true; values: Values; errors?: undefined }\n | { success: false; errors: Record<string, ReactNode>; values?: undefined }",
|
|
11185
11141
|
"canonicalUsage": "import {\n ProForm,\n ProFormText,\n ProFormSelect,\n DialogForm,\n QueryFilter,\n} from '@1money/component-ui';\n// or\nimport { ProForm, ProFormText } from '@1money/component-ui/ProForm';",
|
|
11186
11142
|
"examples": [
|
|
11187
11143
|
{
|