cuatromedios / quasar-app-extension-filters

A Quasar App Extension to expose common filters, like currency, uppercase and other numeric and string formatters

Quasar App Extension Filters

A Quasar App Extension to expose common Vue filters, like currency, percentage , capitalize and other common numeric and text filters

Install

quasar ext add filters

Quasar CLI will retrieve it from NPM and install the extension.

Prompts

Numeral thousands, and decimal delimeters, currency symbol and moment locale.

Uninstall

quasar ext remove filters

How to use

The extension will add common filters using a Quasar Boot file. Use them in your templates as common Vue filters, for example:

{{ theModel | camelCase }} {{ theModel | currency }}

String filters

Provided by Lodash

Descriptions taken from https://lodash.com/docs/4.17.15

filter	parameters	description
camelCase	none	Converts string to camelCase.
capitalize	none	Converts the first character of string to upper case and the remaining to lower case.
deburr	none	Deburrs string by converting Latin-1 Supplement and Latin Extended-A letters to basic Latin letters and removing combining diacritical marks.
kebabCase	none	Converts string to kebab-case.
lowerCase	none	Converts string, as space separated words, to lower case.
lowerFirst	none	Converts the first character of string to lower case.
padEnd	length, fillString	Pads string on the right side if it's shorter than length. Padding characters are truncated if they exceed length.
padStart	length, fillString	Pads string on the left side if it's shorter than length. Padding characters are truncated if they exceed length.
repeat	quantity	Pads string on the left side if it's shorter than length. Padding characters are truncated if they exceed length.
snakeCase	none	Converts string to snake_case
startCase	none	Converts string to Start Case
toLower	none	Converts string, as a whole, to lower case just like String#toLowerCase.
toUpper	none	Converts string, as a whole, to upper case just like String#toUpperCase.
trim	characters	Removes leading and trailing whitespace or specified characters from string.
trimEnd	characters	Removes trailing whitespace or specified characters from string.
trimStart	characters	Removes leading whitespace or specified characters from string.
truncate	options={}	Truncates string if it's longer than the given maximum string length. The last characters of the truncated string are replaced with the omission string which defaults to "...". (info)[https://lodash.com/docs/4.17.15#truncate]
upperCase	none	Converts string, as space separated words, to upper case.
upperFirst	none	Converts the first character of string to upper case.

Numeric filters

Provided by NumeralJS

More info https://numeraljs.com/

filter	parameters	description
currency	none	Shows currency format.
percentage	none	Shows as percentage format, for example 0.45 shows as 45%.
numeral	format	Use any NumeralJS format.

Date filters

Provided by MomentJS

More info https://momentjs.com/

filter	parameters	description
moment	format	Use any MomentJS format.

Demo

https://cuatromedios.github.io/quasar-app-extension-nequ-components/#/filters