vue-money-format
Version:
A Vue component that formats currency.
255 lines (239 loc) • 7.87 kB
JavaScript
//
//
//
//
//
//
//
//
//
var script = {
props: {
value: Number,
locale: {
type: String,
default: 'en'
},
currencyCode: {
type: String,
default: 'USD'
},
supplementalPrecision: {
type: Number,
default: 0
},
subunitsValue: {
type: Boolean,
default: false
},
subunitsToUnit: {
type: Number,
default: 1
},
hideSubunits: {
type: Boolean,
default: false
}
},
methods: {
/////////////////////////////////////////////////////////////////////
// Format money based on integer or floating input
// ===============================================
// Possible inputs are:
// value: Numerical input (required)
// locale: Language and country information, such as 'en' or 'en-US'
// currencyCode: 3-character cdde from ISO 4217
// subunitsValue: Value is denominated in subunits, such as cents
// subunitsToUnits: Overrides the minor unit value from ISO 4217. The "subunitsValue"
// option is redundant if you enter a value for this
// hideSubunits: Set this to true if you don't want to display the subunits
// supplementalPrecision: Allows you to display partial subunits . This is ignored if
// you specify "hideSubunits=true"
/////////////////////////////////////////////////////////////////////
formatMoney: function(value,
locale,
currencyCode,
subunitsValue,
subunitsToUnit,
hideSubunits,
supplementalPrecision) {
var ret = 0;
if (Number.isFinite(value)) {
try {
var numFormat = new Intl.NumberFormat(locale, { style: 'currency', currency: currencyCode });
var options = numFormat.resolvedOptions();
var fraction_digits = options.minimumFractionDigits;
if (subunitsToUnit > 1) {
value = value/subunitsToUnit;
}
else if (subunitsValue == true) {
value = value/Math.pow( 10, options.minimumFractionDigits );
}
if (hideSubunits == true) {
numFormat = new Intl.NumberFormat(locale, { style: 'currency', currency: currencyCode, minimumFractionDigits: 0 , maximumFractionDigits: 0 });
}
else if (supplementalPrecision > 0) {
numFormat = new Intl.NumberFormat(locale, { style: 'currency',
currency: currencyCode,
minimumFractionDigits: options.minimumFractionDigits + supplementalPrecision ,
maximumFractionDigits: options.maximumFractionDigits + supplementalPrecision });
}
ret = numFormat.format(value);
}
catch (err) {
ret = err.message;
}
}
else {
ret = '#NaN!';
}
return ret;
}
}
};
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
}
// Vue.extend constructor export interop.
var options = typeof script === 'function' ? script.options : script;
// render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true;
// functional template
if (isFunctionalTemplate) {
options.functional = true;
}
}
// scopedId
if (scopeId) {
options._scopeId = scopeId;
}
var hook;
if (moduleIdentifier) {
// server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}
// inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
}
// register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
};
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
}
else if (style) {
hook = shadowMode
? function (context) {
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
}
: function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
var originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
}
else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
/* script */
var __vue_script__ = script;
/* template */
var __vue_render__ = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { staticClass: "money_format" }, [
_vm._v(
"\n " +
_vm._s(
_vm.formatMoney(
_vm.value,
_vm.locale,
_vm.currencyCode,
_vm.subunitsValue,
_vm.subunitsToUnit,
_vm.hideSubunits,
_vm.supplementalPrecision
)
) +
"\n"
)
])
};
var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */
var __vue_inject_styles__ = undefined;
/* scoped */
var __vue_scope_id__ = undefined;
/* module identifier */
var __vue_module_identifier__ = undefined;
/* functional template */
var __vue_is_functional_template__ = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__ = /*#__PURE__*/normalizeComponent(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
false,
undefined,
undefined,
undefined
);
// Import vue component
// Declare install function executed by Vue.use()
function install(Vue) {
if (install.installed) { return; }
install.installed = true;
Vue.component('MoneyFormat', __vue_component__);
}
// Create module definition for Vue.use()
var plugin = {
install: install,
};
// Auto-install when vue is found (eg. in browser via <script> tag)
var GlobalVue = null;
if (typeof window !== 'undefined') {
GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
GlobalVue = global.Vue;
}
if (GlobalVue) {
GlobalVue.use(plugin);
}
export { __vue_component__ as default, install };