Merge pull request #32 from open-formulieren/feature/2-fieldset-type

Implement fieldset component schema type definition

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<never>,
+    | '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<TranslatableKeys>['openForms'];
+}

src/formio/components/index.ts

@@ -23,3 +23,4 @@ export * from './address';
 // Layout components
 export * from './content';
 export * from './columns';
+export * from './fieldset';

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.

test-d/formio/components/fieldset.test-d.ts

@@ -0,0 +1,33 @@
+import {expectAssignable} from 'tsd';
+
+import {FieldsetComponentSchema} from '../../../lib';
+
+// Minimal schema
+expectAssignable<FieldsetComponentSchema>({
+  id: 'eqegfc',
+  type: 'fieldset',
+  key: 'fieldset',
+  label: 'Fieldset',
+  hideHeader: false,
+  components: [],
+});
+
+// Full schema
+expectAssignable<FieldsetComponentSchema>({
+  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',
+    },
+  ],
+});