Formatting Utilities
Multiple utility functions for formatting are available.
Date Formatting
The formatDate()
function takes three arguments:
- the date to be formatted
- (optional) format options
- if not specified, the date is formatted as
{dateStyle: 'long'}
in the current locale of the report - a string for either:
iso
(format:yyyy-mm-dd
) orfull
,long
,medium
,short
date style in the current locale of the report - a object for Intl.DateTimeFormat options
- if not specified, the date is formatted as
- (optional) locale to override the default locale: see Intl.DateTimeFormat locales
Examples:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
Lodash Utilities
All lodash utility functions are available in templates as lodash
.
See https://lodash.com/docs/ for a list of available functions.
Examples:
1 2 |
|
Text Enumeration Formatting
The <comma-and-join>
template component allows joining text enumerations with commas and the last item with "and".
Some items might be optional and not be rendered always. This component takes care of inserting separators into the text.
This example shows the basic usage for a static list of text parts. It renders the number of findings for each severity level. If there are no findings for a severity level, the level is omitted.
1 2 3 4 5 6 7 8 9 10 11 |
|
Following example renders a dynamic list of strings from a template variable joined with commas and "and":
1 2 3 |
|
By default, <comma-and-join>
concatenates text parts with commas and the last one with the english word "and".
These separators can be changed via the parameters comma=", "
and and=" and "
to format other languages.
This example joins text parts in different languages:
1 2 3 4 |
|
Helper Functions
It is possible to define helper functions and variables inside the Vue template language to reuse logic.
Setting variables only works for native DOM tag (e.g. <div>
, <span>
, etc.), but not for Vue components (e.g. <template>
, <table-of-contents>
, etc.).
The name of the :set
attributes does not matter, but they have to be unique per tag.
Helper functions are defined at the start of the template, they can be used by following template elements.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
Note that defining variables and helper functions is not officially supported by the Vue template language, but rather a workaround. For more details see: https://stackoverflow.com/questions/43999618/how-to-define-a-temporary-variable-in-vue-js-template