fix(dev/docs): Updates to flag store methods
This commit is contained in:
Benjamin Fan
Joost De Cock
parent
52b8e16e35
commit
34ca199ee3
7 changed files with 65 additions and 29 deletions
|
|
@ -11,7 +11,6 @@ However, in our own UI on FreeSewing.org, we use this mechanism to allow
|
|||
designer to flag information to the user, and even suggest changes to the
|
||||
pattern configuration.
|
||||
|
||||
|
||||
## Signature
|
||||
|
||||
```js
|
||||
|
|
@ -23,4 +22,8 @@ undefined Store.flag.error({
|
|||
|
||||
Since these methods are not part of FreeSewing's core API, what you pass to this method does depend on your own implementation.
|
||||
|
||||
For a more detailed example of how we use this, see [flag.info()](/reference/store-methods/flag.info).
|
||||
:::note RELATED
|
||||
The above Signature contains abbreviated information.
|
||||
For full details about this method's Signature, Configuration, and
|
||||
Example usage, see [flag.info()](/reference/store-methods/flag.info).
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ However, in our own UI on FreeSewing.org, we use this mechanism to allow
|
|||
designer to flag information to the user, and even suggest changes to the
|
||||
pattern configuration.
|
||||
|
||||
|
||||
## Signature
|
||||
|
||||
```js
|
||||
|
|
@ -23,4 +22,8 @@ undefined Store.flag.fixme({
|
|||
|
||||
Since these methods are not part of FreeSewing's core API, what you pass to this method does depend on your own implementation.
|
||||
|
||||
For a more detailed example of how we use this, see [flag.info()](/reference/store-methods/flag.info).
|
||||
:::note RELATED
|
||||
The above Signature contains abbreviated information.
|
||||
For full details about this method's Signature, Configuration, and
|
||||
Example usage, see [flag.info()](/reference/store-methods/flag.info).
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -11,17 +11,28 @@ However, in our own UI on FreeSewing.org, we use this mechanism to allow
|
|||
designer to flag information to the user, and even suggest changes to the
|
||||
pattern configuration.
|
||||
|
||||
:::tip
|
||||
The Signature, Configuration, and Example information below applies to the
|
||||
`flag.error()`, `flag.fixme()`, `flag.info()`, `flag.note()`,
|
||||
`flag.tip()`, and `flag.warn()` methods.
|
||||
:::
|
||||
|
||||
## Signature
|
||||
|
||||
```js
|
||||
undefined Store.flag.info({
|
||||
id: 'id_string',
|
||||
title: 'flag:expandIsOn.t',
|
||||
desc: 'flag:expandIsOn.d',
|
||||
msg: 'flag:expandIsOn',
|
||||
notes: [
|
||||
'sorcha:moreInfo1',
|
||||
'sorcha:moreInfo2',
|
||||
],
|
||||
replace: {
|
||||
key1: //code for replacement value,
|
||||
key2: //code for replacement value,
|
||||
},
|
||||
suggest: {
|
||||
text: 'flag:disable',
|
||||
icon: 'expand',
|
||||
|
|
@ -37,29 +48,41 @@ The example above is from our implementation, which uses the following propertie
|
|||
|
||||
## Configuration
|
||||
|
||||
| Property | Type | Description |
|
||||
| ----------:| ------------------- | ----------- |
|
||||
| `id` | String | An ID for this flag message. If none is provided, `title` will be used |
|
||||
| `title` | String | The title of the message |
|
||||
| `desc` | String | The description of the message |
|
||||
| `notes` | String or Array of Strings | More information/notes (see [Notes](#notes))|
|
||||
| `suggest.text` | String | Text to go on the button to implement the suggested configuration change |
|
||||
| `suggest.icon` | String | Icon name to go on the button to implement the suggested configuration change. (see [suggest.icon](#suggesticon)) |
|
||||
| `suggest.update.settings` | Array | An array describing the changes to apply to the `settings` if the user accepts the suggestion. (see [suggest.update](#suggestupdate)) |
|
||||
| `suggest.update.ui` | Array | An array describing the changes to apply to the `ui` if the user accepts the suggestion. (see [suggest.update](#suggestupdate)) |
|
||||
| Property | Type | Description |
|
||||
| ------------------------: | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `id` | String | An ID for this flag message. If none is provided, `title` will be used |
|
||||
| `title` | String | The translation key for the title of the message |
|
||||
| `desc` | String | The translation key for the description of the message |
|
||||
| `msg` | String | The translation key for the message |
|
||||
| `notes` | String or Array of Strings | Translation keys for more information/notes (see [Notes](#notes)) |
|
||||
| `replace` | Object | Key/values for text replacements (see [Replacement Values](#replacement-values)) |
|
||||
| `suggest.text` | String | Text to go on the button to implement the suggested configuration change |
|
||||
| `suggest.icon` | String | Icon name to go on the button to implement the suggested configuration change. (see [suggest.icon](#suggesticon)) |
|
||||
| `suggest.update.settings` | Array | An array describing the changes to apply to the `settings` if the user accepts the suggestion. (see [suggest.update](#suggestupdate)) |
|
||||
| `suggest.update.ui` | Array | An array describing the changes to apply to the `ui` if the user accepts the suggestion. (see [suggest.update](#suggestupdate)) |
|
||||
|
||||
### Notes
|
||||
|
||||
Notes are optional, but allow you to add more text/content to the flag message.
|
||||
|
||||
Unlike `desc` which can only hold a string, `notes` can hold either a string or an array of strings.
|
||||
Unlike `title` or `desc` which can only hold a string, `notes` can hold either a string or an array of strings.
|
||||
|
||||
Both `desc` and `notes` will be rendered as markdown.
|
||||
`notes` are also translation keys, and the translation strings will be
|
||||
rendered as markdown.
|
||||
|
||||
### Replacement Values
|
||||
|
||||
The translation strings for `title`, `desc`, and `notes` can contain
|
||||
variables that allow calculated values to be inserted into messages.
|
||||
|
||||
The optional `replace` object holds key/value pair properties where
|
||||
keys are variable names and values contain code that generates
|
||||
the replacement text for that variable.
|
||||
|
||||
### suggest.icon
|
||||
|
||||
An optional name of an icon. Or leave it out to not render and icon.
|
||||
The idea is that the icon helps convey the message, the following icon names are supported:
|
||||
An optional name of an icon. Or leave it out to not render an icon.
|
||||
The idea is that the icon helps convey the message, with the following icon names supported:
|
||||
|
||||
- `note`
|
||||
- `info`
|
||||
|
|
@ -77,12 +100,12 @@ Any other name will be ignored.
|
|||
Note that the `suggest` object is optional. Without it, it will merely display a message to the user.
|
||||
However, when a suggest key is present, a button will be created that the user can click to accept the suggested changes.
|
||||
|
||||
The `suggest.update` object has only two possible top-level keys:
|
||||
The `suggest.update` object has only two possible top-level keys:
|
||||
|
||||
- `settings`
|
||||
- `settings`
|
||||
- `ui`
|
||||
|
||||
They both take the same parameter, an array with two elements:
|
||||
They both take the same parameter, an array with two elements:
|
||||
|
||||
```mjs
|
||||
Array [`path`, `value`]
|
||||
|
|
@ -129,4 +152,3 @@ So to set the `waistEase` option to `0.2`, it should look like this:
|
|||
return part
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ However, in our own UI on FreeSewing.org, we use this mechanism to allow
|
|||
designer to flag information to the user, and even suggest changes to the
|
||||
pattern configuration.
|
||||
|
||||
|
||||
## Signature
|
||||
|
||||
```js
|
||||
|
|
@ -23,4 +22,8 @@ undefined Store.flag.note({
|
|||
|
||||
Since these methods are not part of FreeSewing's core API, what you pass to this method does depend on your own implementation.
|
||||
|
||||
For a more detailed example of how we use this, see [flag.info()](/reference/store-methods/flag.info).
|
||||
:::note RELATED
|
||||
The above Signature contains abbreviated information.
|
||||
For full details about this method's Signature, Configuration, and
|
||||
Example usage, see [flag.info()](/reference/store-methods/flag.info).
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -38,4 +38,3 @@ The example above is from our implementation, which uses the following propertie
|
|||
return part
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ However, in our own UI on FreeSewing.org, we use this mechanism to allow
|
|||
designer to flag information to the user, and even suggest changes to the
|
||||
pattern configuration.
|
||||
|
||||
|
||||
## Signature
|
||||
|
||||
```js
|
||||
|
|
@ -23,4 +22,8 @@ undefined Store.flag.tip({
|
|||
|
||||
Since these methods are not part of FreeSewing's core API, what you pass to this method does depend on your own implementation.
|
||||
|
||||
For a more detailed example of how we use this, see [flag.info()](/reference/store-methods/flag.info).
|
||||
:::note RELATED
|
||||
The above Signature contains abbreviated information.
|
||||
For full details about this method's Signature, Configuration, and
|
||||
Example usage, see [flag.info()](/reference/store-methods/flag.info).
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ However, in our own UI on FreeSewing.org, we use this mechanism to allow
|
|||
designer to flag information to the user, and even suggest changes to the
|
||||
pattern configuration.
|
||||
|
||||
|
||||
## Signature
|
||||
|
||||
```js
|
||||
|
|
@ -23,4 +22,8 @@ undefined Store.flag.warn({
|
|||
|
||||
Since these methods are not part of FreeSewing's core API, what you pass to this method does depend on your own implementation.
|
||||
|
||||
For a more detailed example of how we use this, see [flag.info()](/reference/store-methods/flag.info).
|
||||
:::note RELATED
|
||||
The above Signature contains abbreviated information.
|
||||
For full details about this method's Signature, Configuration, and
|
||||
Example usage, see [flag.info()](/reference/store-methods/flag.info).
|
||||
:::
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue