Skip to content

Latest commit

 

History

History
224 lines (172 loc) · 6.36 KB

README.md

File metadata and controls

224 lines (172 loc) · 6.36 KB
Raw

Value Converters

anti-xss-html-sanitizer

Sanitizes HTML against XSS attacks for innerhtml, etc. via blacklist and RegEx. Tries to escape all elements / discards nothing.

Template

<span innerhtml.bind="insecureValue|sanitizeHTML"></span>

Configuration

import {HTMLSanitizer} from "aurelia-templating-resources";

aurelia.use.singleton(HTMLSanitizer, AntiXssHtmlSanitizer);

const htmlSanitizer = aurelia.container.get(HTMLSanitizer) as AntiXssHtmlSanitizer;
htmlSanitizer.setUntrustedTags(["script", "img", "iframe"])

sanitize-html-html-sanitizer

Requires optional peer dependency sanitize-html.

Sanitizes HTML against XSS attacks for innerhtml, etc. via whitelist and parser. Inherits options from sanitize-html library.

Template

<span innerhtml.bind="insecureValue|sanitizeHTML"></span>

Configuration

import sanitize from 'sanitize-html'
import {HTMLSanitizer} from "aurelia-templating-resources"

aurelia.use.singleton(HTMLSanitizer, SanitizeHtmlHtmlSanitizer)

const htmlSanitizer = aurelia.container.get(HTMLSanitizer) as SanitizeHtmlHtmlSanitizer
htmlSanitizer.withOptions(SanitizeHtmlHtmlSanitizer.paranoidOptions) // shortcut to allow nothing

const options: sanitize.IOptions = { ...sanitize.defaults } // get copy of library defaults for customization
options.disallowedTagsMode = "discard"                      // discard tags (rather than escape them)
options.allowedTags = ['b', 'i', 'img']                     // set whitelist (use .concat to add to)
options.allowedAttributes['img'] = ['src', 'alt']           /* whitelist attributes of a tag (does nothing,
                                                               if tag not whitelisted) */
htmlSanitizer.withOptions(options)

See sanitize-html for full manual.

byte-format-value-converter

Formats bytes into the next higher byte form with a given precision.

Template

<span>${bytes|byteFormat:2}</span>

Examples:

  • ${1024|byteFormat} -> 1 kiB

currency-value-converter

Formats a number to a given currency and a precision. If the number is smaller as the precision, it doubles the precision.

Template

<span>${yourNumber|currency[:currency[:precision[:fixedPrecision]]]}</span>

Examples:

  • ${0.0055|currency:"EUR":2} -> 0,0055 €
  • ${0.036|currency:"USD":2} -> $ 0,04
  • ${0.0036|currency:"USD":2:true} -> $ 0,00

date-format-value-converter (@deprecated)

Formats a unix timestamp as milliseconds or formatted date string to a localized date format using momentjs. Default format is "LLL".

This value converter is @deprecated, because the IntlDateFormatValueConverter provides a standard interface without momentjs.

You may need to update your tsconfig.json.

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true
  }
}

Template

<span>${unixTimeStampOrFormattedDateString|dateFormat:"L"}</span>

API

const formatter = aurelia.container.get(DateFormatValueConverter);
formatter.setDefaultFormat("LLL");

Requires

npm install moment --save

intl-date-format-value-converter

Formats a unix timestamp as milliseconds or formatted date string to a localized date format using Intl.DateTimeFormat.

API

const formatter = aurelia.container.get(IntlDateFormatValueConverter);
formatter.setOptions("default", { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
formatter.setOptions("long", { dateStyle: 'full', timeStyle: 'long' });

Template

<span>Default: ${unixTimeStampOrFormattedDateString|dateFormat}</span>
<span>Long: ${unixTimeStampOrFormattedDateString|dateFormat:"long"}</span>

intl-duration-format-value-converter

Formats a duration as milliseconds or DateTimeComponents to relative time units based on Intl.RelativeTimeFormat.

Template

<span>${millisecondsOrDateTimeComponents|durationFormat}</span>

API

const formatter = aurelia.container.get(IntlDurationFormatValueConverter);
formatter.setOptions("short", {style: "short"});
formatter.setSeparators("short", " ");

Examples:

  • ${4100000|durationFormat:"short"} -> in 1 hr. in 8 min. in 20 sec.

duration-format-value-converter (@deprecated)

This value converter is @deprecated, because the IntlDurationFormatValueConverter provides a standard interface without momentjs.

Template

<span>${milliseconds|durationFormat:"h[h] m[min] s[s]"}</span>

Examples:

  • ${4100000|durationFormat} -> 1h 8mins 20s

API

const formatter = aurelia.container.get(DurationFormatValueConverter);
formatter.setDefaultFormat("h[h] m[min] s[s]");

Requires

npm install moment-duration-format --save

highlight-text-value-converter

Highlights text by adding <mark></mark> tags. It uses the HTMLSanitizer interface to sanitize the input value before.

Template

<input type="text" value.bind="_searchString" change.delegate="updateHighlight()"/>
<span innerhtml="${property|highlightText:_regexpOrString}">&nbsp;</span>

ViewModel

export class ViewModel {
    private _searchString:string;
    private _regexpOrString:RegExp;
    
    private updateHighlight() {
        this._regexpOrString = new RegExp("(" + this._searchString + ")", "ig");
    }
}

percent-value-converter

<span>${yourNumber|percent}</span>

repeat-string-value-converter

<span>${"."|repeatString:10}</span>

sort-value-converter

Sort by property users.name descending

<span repeat.for="item of list|sort:'user.name':-1"></span>

reverse-value-converter

Reverse an array

<span repeat.for="item of list|reverse"></span>

object-keys-value-converter

<span repeat.for="key of objects|objectKeys"></span>

object-values-value-converter

<span repeat.for="value of objects|objectValues"></span>

number-value-converter

<span>${yourNumber|number[:precision[:fixedPrecision]]}</span>