Quasar-app-extension-qdecimal NPM

QDecimal (quasar-app-extension-qdecimal)

QDecimal is a UI App Extension for Quasar Framework v1. It will not work with legacy versions of Quasar Framework.

This work is currently in alpha and minor changes may still happen. Your help with testing is greatly appreciated.

Notes

Minimum required version is Quasar 1.0.0.

Installation

To add this App Extension to your Quasar application, run the following (in your Quasar app folder):

quasar ext add qdecimal

Describe

You can use quasar describe QDecimal

Demo

Can be found here.

Example Code

<q-decimal class="q-mb-md" label="decimal right aligned" outlined v-model="decimal" input-style="text-align: right"></q-decimal>
<q-decimal class="q-mb-md" label="decimal right aligned with prefix" outlined v-model="decimal" input-style="text-align: right" prefix="Px"></q-decimal>
<q-decimal class="q-mb-md" label="decimal left aligned" outlined v-model="decimal"></q-decimal>
<q-decimal class="q-mb-md" label="decimal left aligned with suffix" outlined v-model="decimal" suffix="Sx"></q-decimal>

<q-decimal class="q-mb-md" label="currency - right aligned" outlined mode="currency" :currency="currency" v-model="decimal" input-style="text-align: right"></q-decimal>
<q-decimal class="q-mb-md" label="currency - right aligned with prefix" outlined mode="currency" :currency="currency" v-model="decimal" input-style="text-align: right" :prefix="true"></q-decimal>
<q-decimal class="q-mb-md" label="currency - left aligned" outlined mode="currency" :currency="currency" v-model="decimal"></q-decimal>
<q-decimal class="q-mb-md" label="currency - left aligned with suffix" outlined mode="currency" :currency="currency" v-model="decimal" :suffix="true"></q-decimal>

<q-decimal class="q-mb-md" label="bitcoin - left aligned with prefix" outlined v-model="bitcoin" :precision="8" prefix="₿"></q-decimal>
<q-decimal class="q-mb-md" label="bitcoin - right aligned with suffix" outlined v-model="bitcoin" :precision="8" input-style="text-align: right" suffix="₿"></q-decimal>

and the data...

data () {
  return {
    decimal: 0,
    bitcoin: 0,
    currency: 'EUR',
    language: 'en-us',
    languages,
    currencies: [
      { value: 'EUR', label: 'Euros' },
      { value: 'USD', label: 'US Dollars' },
      { value: 'BRL', label: 'Brazilian Reals' }
    ]
  }
}

QInput Properties

QDecimal is a transparent wrapper for QInput, so QDecimal will aceppt and undestand any property related to the QInput

QDecimal Vue Properties

Vue Property	Type	Description
value	Number	value must be a number (decimal or integer). (eg: `v-model="1.23"`)
lang	String	Language identifier (default: $q.lang.isoName)
suffix	Boolean or String	Suffix, the value can be either a string or a boolean, if that is a boolean, the suffix value will be defined by the mode
prefix	Boolean or String	Prefix, the value can be either a string or a boolean, if that is a boolean, the prefix value will be defined by the mode
type	String	The input type (default: `tel`)
mode	String	The formatting style to use. Possible values are `decimal` for plain number formatting, `currency` for currency formatting, and `percent` for percent formatting (default: `decimal`)
currency	String	The currency to use in currency formatting. Possible values are the ISO 4217 currency codes, such as `USD` for the US dollar, `EUR` for the euro, or `CNY` for the Chinese. There is no default value, if the mode is `currency`, the currency property must be provided.
display	String	How to display the currency in currency formatting. Possible values are `symbol` to use a localized currency symbol such as €, `code` to use the ISO currency code, `name` to use a localized currency name such as `dollar` (default: `symbol`)
places	Number	The number of integer digits to use in the integer part. Possible values are from `1` to `16`. places plus precision must be equal or less than `16`. the default is (`16 - precision`).
precision	Number	The number of integer digits to use in the fraction part. Possible values are from `0` to `15`. places plus precision must be equal or less than `16`. the default is `2`.
step	Number	The step property specifies the legal number intervals (eg: `1`, `0.2`, `3.3`) (default: `2`)