From 7e8a064ab664acbfcc321ccf369d3c7330ca4fa6 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Thu, 30 Nov 2023 12:29:51 +0100 Subject: [PATCH] :sparkles: [#2] Implement type definition for fieldset component type --- src/formio/components/fieldset.ts | 50 +++++++++++++++++++++ src/formio/components/index.ts | 1 + src/formio/index.ts | 4 +- test-d/formio/components/fieldset.test-d.ts | 33 ++++++++++++++ 4 files changed, 87 insertions(+), 1 deletion(-) create mode 100644 src/formio/components/fieldset.ts create mode 100644 test-d/formio/components/fieldset.test-d.ts diff --git a/src/formio/components/fieldset.ts b/src/formio/components/fieldset.ts new file mode 100644 index 0000000..0e08d26 --- /dev/null +++ b/src/formio/components/fieldset.ts @@ -0,0 +1,50 @@ +import {AnyComponentSchema, LayoutComponentSchema, OFExtensions} from '..'; + +type TranslatableKeys = 'label'; + +/** + * The fieldset component schema. + * + * Fieldsets are used to manage group fields together. They can improve accessibility + * by grouping related fields together. + * + * The `key` property has no effect on the submission data structure (it does not create + * a nesting level, the component is purely presentational). + * + * The label is displayed as the legend element, while the upstream component uses an + * explicit legend property for this purpose. + * + * @group Form.io components + * @category Concrete types + */ +export interface FieldsetComponentSchema + extends Omit< + LayoutComponentSchema, + | 'placeholder' + | 'multiple' + | 'defaultValue' + | 'errors' + | 'description' + | 'hideLabel' + | 'disabled' + | 'validateOn' + > { + id: string; + key: string; + type: 'fieldset'; + label: string; + /** + * Nested components inside the group/fieldset. + */ + components: AnyComponentSchema[]; + + // custom properties + /** + * Control whether the fieldset header/legend is displayed or not. + * + * @deprecated This should probably use the built-in `hideLabel` property instead, + * which requires a backend data migration and update to the SDK code. + */ + hideHeader: boolean; + openForms?: OFExtensions['openForms']; +} diff --git a/src/formio/components/index.ts b/src/formio/components/index.ts index a8bd8ee..70e30e5 100644 --- a/src/formio/components/index.ts +++ b/src/formio/components/index.ts @@ -23,3 +23,4 @@ export * from './address'; // Layout components export * from './content'; export * from './columns'; +export * from './fieldset'; diff --git a/src/formio/index.ts b/src/formio/index.ts index 0263c61..50b1679 100644 --- a/src/formio/index.ts +++ b/src/formio/index.ts @@ -8,6 +8,7 @@ import { DateComponentSchema, DateTimeComponentSchema, EmailComponentSchema, + FieldsetComponentSchema, FileComponentSchema, IbanComponentSchema, LicensePlateComponentSchema, @@ -71,7 +72,8 @@ export type AnyComponentSchema = | AddressComponentSchema // layout | ContentComponentSchema - | ColumnsComponentSchema; + | ColumnsComponentSchema + | FieldsetComponentSchema; /** * Convenience type alias for all supported concrete component schema types. diff --git a/test-d/formio/components/fieldset.test-d.ts b/test-d/formio/components/fieldset.test-d.ts new file mode 100644 index 0000000..dafe0eb --- /dev/null +++ b/test-d/formio/components/fieldset.test-d.ts @@ -0,0 +1,33 @@ +import {expectAssignable} from 'tsd'; + +import {FieldsetComponentSchema} from '../../../lib'; + +// Minimal schema +expectAssignable({ + id: 'eqegfc', + type: 'fieldset', + key: 'fieldset', + label: 'Fieldset', + hideHeader: false, + components: [], +}); + +// Full schema +expectAssignable({ + id: 'eqegfc', + type: 'fieldset', + key: 'fieldset', + label: 'Fieldset', + tooltip: 'A tooltip for the group', + hideHeader: false, + hidden: true, + clearOnHide: true, + components: [ + { + id: 'wien53il', + type: 'textfield', + key: 'nestedTextField', + label: 'Nested text field', + }, + ], +});