gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: change event (#842)

Browse Source
This commit is contained in:
Daniel Lautzenheiser
2023-07-10 15:49:08 -04:00
committed by GitHub
parent 16819ed7be
commit eff9a62c5b
21 changed files with 928 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/docs/content/docs/beta-features.mdx
View File

@ -92,7 +92,11 @@ CMS.registerEventListener({
});
```
Supported events are `mounted`, `login`, `logout`, `preSave` and `postSave`. The `preSave` hook can be used to modify the entry data like so:
Supported events are `mounted`, `login`, `logout`, `change`, `preSave` and `postSave`.
### PreSave
The `preSave` event handler can be used to modify the entry data like so:
```javascript
CMS.registerEventListener({
@ -109,6 +113,24 @@ CMS.registerEventListener({
});
```
### Change
The `change` event handler must provide a field name, and can be used to modify the entry data like so:
```javascript
CMS.registerEventListener(
{
name: 'change',
handler: ({ entry }, { field }) => {
return 'newFieldValue';
},
},
{
field: 'path.to.my.field',
},
);
```
## i18n Support
Static CMS can provide a side by side interface for authoring content in multiple languages. Configuring Static CMS for i18n support requires top level configuration, collection level configuration and field level configuration.

73
packages/docs/content/docs/collection-types.mdx
View File

@ -230,6 +230,79 @@ collections: [
</CodeTabs>
##### Filtered by Nested Field
The example below creates a collection based on a nested field's value.
<CodeTabs>
```yaml
collections:
- name: 'nested-field-filtered-collection'
label: 'Nested Field Filtered Collection'
folder: '_nested_field'
create: true
filter:
field: nested.object.field
value: yes
fields:
- name: nested
label: Nested
widget: object
fields:
- name: object
label: Object
widget: object
fields:
- name: field
label: Field
widget: select
options:
- yes
- no
```
```js
collections: [
{
name: "nested-field-filtered-collection",
label: "Nested Field Filtered Collection",
folder: "_nested_field",
create: true,
filter: {
field: "nested.object.field",
value: "yes"
},
fields: [
{
name: "nested",
label: "Nested",
widget: "object",
fields: [
{
name: "object",
label: "Object",
widget: "object",
fields: [
{
name: "field",
label: "Field",
widget: "select",
options: [
"yes",
"no"
]
}
]
}
]
}
]
}
],
```
</CodeTabs>
##### Filtered by Tags
The example below creates two collections in the same folder, filtered by the `tags` field. The first collection includes posts with the `news` or `article` tags, and the second, with the `blog` tag.

191
packages/docs/content/docs/widgets.mdx
View File

@ -47,20 +47,7 @@ The following options are available on all fields:
| i18n | boolean<br />\| 'translate'<br />\| 'duplicate'<br />\| 'none' | | _Optional_. <BetaImage /><ul><li>`translate` - Allows translation of the field</li><li>`duplicate` - Duplicates the value from the default locale</li><li>`true` - Accept parent values as default</li><li>`none` or `false` - Exclude field from translations</li></ul> |
| condition | FilterRule<br />\| List of FilterRules | | _Optional_. See [Field Conditions](#field-conditions) |
## Field Conditions
The fields can be shown conditionally based on the values of the other fields.
The `condition` option can take a single filter rule or a list of filter rules.
| Name | Type | Default | Description |
| -------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| field | string | | The name of one of the field. |
| value | string<br />\| list of strings | | _Optional_. The desired value or values to match. Required if no `pattern` provided. Ignored if `pattern` is provided |
| pattern | regular expression | | _Optional_. A regex pattern to match against the field's value |
| matchAll | boolean | `false` | _Optional_. _Ignored if value is not a list of strings_<br /><ul><li>`true` - The field's values must include or match all of the filter rule's values</li><li>`false` - The field's value must include or match only one of the filter rule's values</li></ul> |
## Example
## Example Widget
<CodeTabs>
```yaml
@ -78,3 +65,179 @@ pattern: ['.{12,}', 'Must have at least 12 characters'],
```
</CodeTabs>
## Field Conditions
The fields can be shown conditionally based on the values of the other fields.
The `condition` option can take a single filter rule or a list of filter rules.
| Name | Type | Default | Description |
| -------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| field | string | | The name of one of the field. |
| value | string<br />\| list of strings | | _Optional_. The desired value or values to match. Required if no `pattern` provided. Ignored if `pattern` is provided |
| pattern | regular expression | | _Optional_. A regex pattern to match against the field's value |
| matchAll | boolean | `false` | _Optional_. _Ignored if value is not a list of strings_<br /><ul><li>`true` - The field's values must include or match all of the filter rule's values</li><li>`false` - The field's value must include or match only one of the filter rule's values</li></ul> |
### Example
The example below creates a collection based on a nested field's value.
<CodeTabs>
```yaml
collections:
- name: 'nested-field-filtered-collection'
label: 'Nested Field Filtered Collection'
folder: '_field_condition'
create: true
fields:
- name: type
label: Type
widget: select
options:
- value: type1
label: Type 1
- value: type2
label: Type 2
- name: value1
label: Value 1
widget: string
condition:
field: type
value: type1
- name: value2
label: Value 2
widget: text
condition:
field: type
value: type2
```
```js
collections: [
{
name: "nested-field-filtered-collection",
label: "Nested Field Filtered Collection",
folder: "_field_condition",
create: true,
fields: [
{
name: "type",
label: "Type",
widget: "select",
options: [
{
value: "type1",
label: "Type 1"
},
{
value: "type2",
label: "Type 2"
}
]
},
{
name: "value1",
label: "Value 1",
widget: "string",
condition: {
field: "type",
value: "type1"
}
},
{
name: "value2",
label: "Value 2",
widget: "text",
condition: {
field: "type",
value: "type2"
}
}
]
}
],
```
</CodeTabs>
### Nested Field Example
The example below creates a collection based on a nested field's value.
<CodeTabs>
```yaml
collections:
- name: 'nested-field-filtered-collection'
label: 'Nested Field Filtered Collection'
folder: '_nested_field_condition'
create: true
fields:
- name: value
label: Value 1
widget: string
condition:
field: nested.object.field
value: yes
- name: nested
label: Nested
widget: object
fields:
- name: object
label: Object
widget: object
fields:
- name: field
label: Field
widget: select
options:
- yes
- no
```
```js
collections: [
{
name: "nested-field-filtered-collection",
label: "Nested Field Filtered Collection",
folder: "_nested_field_condition",
create: true,
fields: [
{
name: "value",
label: "Value 1",
widget: "string",
condition: {
field: "nested.object.field",
value: "yes"
}
},
{
name: "nested",
label: "Nested",
widget: "object",
fields: [
{
name: "object",
label: "Object",
widget: "object",
fields: [
{
name: "field",
label: "Field",
widget: "select",
options: [
"yes",
"no"
]
}
]
}
]
}
]
}
],
```
</CodeTabs>