{"version":3,"file":"App-c0d1c0c0-chunk.js","sources":["../../../../app/javascript/mints-components/cali-numeric/App.vue"],"sourcesContent":["<template>\r\n  <div class=\"position-relative\" v-if=\"!readOnly\">\r\n    <input\r\n        :placeholder=\"placeholder\"\r\n        :disabled=\"disabled\"\r\n        @blur=\"onBlurHandler\"\r\n        @input=\"onInputHandler\"\r\n        @focus=\"onFocusHandler\"\r\n        ref=\"numeric\"\r\n        type=\"tel\"\r\n        v-model=\"amount\"\r\n        :class=\"inputClass\"\r\n        class=\"w-100\"\r\n    >\r\n\r\n    <slot name=\"actions\"></slot>\r\n  </div>\r\n  <span\r\n      v-else\r\n      ref=\"readOnly\"\r\n  >{{ amount || placeholder }}</span>\r\n</template>\r\n\r\n<script>\r\nimport { formatMoney, toFixed, unformat } from 'accounting-js'\r\n\r\nexport default {\r\n  name: 'VueNumeric',\r\n\r\n  props: {\r\n    /**\r\n     * Currency symbol.\r\n     */\r\n    currency: {\r\n      type: String,\r\n      default: '',\r\n      required: false\r\n    },\r\n\r\n    /**\r\n     * Disabled input.\r\n     */\r\n    disabled: {\r\n      type: Boolean,\r\n      default: false,\r\n      required: false\r\n    },\r\n\r\n    /**\r\n     * Maximum value allowed.\r\n     */\r\n    max: {\r\n      type: Number,\r\n      default: Number.MAX_SAFE_INTEGER || 9007199254740991,\r\n      required: false,\r\n    },\r\n\r\n    /**\r\n     * Minimum value allowed.\r\n     */\r\n    min: {\r\n      type: Number,\r\n      default: Number.MIN_SAFE_INTEGER || -9007199254740991,\r\n      required: false\r\n    },\r\n\r\n    /**\r\n     * Enable/Disable minus value.\r\n     */\r\n    minus: {\r\n      type: Boolean,\r\n      default: false,\r\n      required: false\r\n    },\r\n\r\n    /**\r\n     * Input placeholder.\r\n     */\r\n    placeholder: {\r\n      type: String,\r\n      default: '',\r\n      required: false\r\n    },\r\n\r\n    /**\r\n     * Value when the input is empty\r\n     */\r\n    emptyValue: {\r\n      type: [Number, String],\r\n      default: '',\r\n      required: false\r\n    },\r\n\r\n    /**\r\n     * Number of decimals.\r\n     * Decimals symbol are the opposite of separator symbol.\r\n     */\r\n    precision: {\r\n      type: Number,\r\n      default: 0,\r\n      required: false\r\n    },\r\n\r\n    /**\r\n     * Thousand separator type.\r\n     * Separator props accept either . or , (default).\r\n     */\r\n    separator: {\r\n      type: String,\r\n      default: ',',\r\n      required: false\r\n    },\r\n\r\n    /**\r\n     * Forced thousand separator.\r\n     * Accepts any string.\r\n     */\r\n    thousandSeparator: {\r\n      default: undefined,\r\n      required: false,\r\n      type: String\r\n    },\r\n\r\n    /**\r\n     * Forced decimal separator.\r\n     * Accepts any string.\r\n     */\r\n    decimalSeparator: {\r\n      default: undefined,\r\n      required: false,\r\n      type: String\r\n    },\r\n\r\n    /**\r\n     * The output type used for v-model.\r\n     * It can either be String or Number (default).\r\n     */\r\n    outputType: {\r\n      required: false,\r\n      type: String,\r\n      default: 'Number'\r\n    },\r\n\r\n    /**\r\n     * v-model value.\r\n     */\r\n    modelValue: {\r\n      //type: [Number, String],\r\n      default: 0,\r\n      required: true\r\n    },\r\n\r\n    /**\r\n     * Hide input and show value in text only.\r\n     */\r\n    readOnly: {\r\n      type: Boolean,\r\n      default: false,\r\n      required: false\r\n    },\r\n\r\n    /**\r\n     * Class for the span tag when readOnly props is true.\r\n     */\r\n    readOnlyClass: {\r\n      type: String,\r\n      default: '',\r\n      required: false\r\n    },\r\n\r\n    /**\r\n     * Position of currency symbol\r\n     * Symbol position props accept either 'suffix' or 'prefix' (default).\r\n     */\r\n    currencySymbolPosition: {\r\n      type: String,\r\n      default: 'prefix',\r\n      required: false\r\n    },\r\n\r\n    /**\r\n     * Input class\r\n     */\r\n    inputClass: {\r\n      type: String,\r\n    }\r\n  },\r\n\r\n  data: () => ({\r\n    amount: ''\r\n  }),\r\n\r\n  computed: {\r\n    /**\r\n     * Number type of formatted value.\r\n     * @return {Number}\r\n     */\r\n    amountNumber () {\r\n      return this.unformat(this.amount)\r\n    },\r\n\r\n    /**\r\n     * Number type of value props.\r\n     * @return {Number}\r\n     */\r\n    valueNumber () {\r\n      return this.unformat(this.modelValue)\r\n    },\r\n\r\n    /**\r\n     * Define decimal separator based on separator props.\r\n     * @return {String} '.' or ','\r\n     */\r\n    decimalSeparatorSymbol () {\r\n      if (typeof this.decimalSeparator !== 'undefined') return this.decimalSeparator\r\n      if (this.separator === ',') return '.'\r\n      return ','\r\n    },\r\n\r\n    /**\r\n     * Define thousand separator based on separator props.\r\n     * @return {String} '.' or ','\r\n     */\r\n    thousandSeparatorSymbol () {\r\n      if (typeof this.thousandSeparator !== 'undefined') return this.thousandSeparator\r\n      if (this.separator === '.') return '.'\r\n      if (this.separator === 'space') return ' '\r\n      return ','\r\n    },\r\n\r\n    /**\r\n     * Define format position for currency symbol and value.\r\n     * @return {String} format\r\n     */\r\n    symbolPosition () {\r\n      if (!this.currency) return '%v'\r\n      return this.currencySymbolPosition === 'suffix' ? '%v %s' : '%s %v'\r\n    }\r\n  },\r\n\r\n  watch: {\r\n    /**\r\n     * Watch for value change from other input with same v-model.\r\n     * @param {Number} newValue\r\n     */\r\n    valueNumber (newValue) {\r\n      if (this.$refs.numeric !== document.activeElement) {\r\n        this.amount = this.format(newValue)\r\n      }\r\n    },\r\n\r\n    /**\r\n     * When readOnly is true, replace the span tag class.\r\n     * @param {Boolean} newValue\r\n     * @param {Boolean} oldValue\r\n     */\r\n    readOnly (newValue, oldValue) {\r\n      if (oldValue === false && newValue === true) {\r\n        this.$nextTick(() => {\r\n          this.$refs.readOnly.className = this.readOnlyClass\r\n        })\r\n      }\r\n    },\r\n\r\n    /**\r\n     * Immediately reflect separator changes\r\n     */\r\n    separator () {\r\n      this.process(this.valueNumber)\r\n      this.amount = this.format(this.valueNumber)\r\n    },\r\n\r\n    /**\r\n     * Immediately reflect currency changes\r\n     */\r\n    currency () {\r\n      this.process(this.valueNumber)\r\n      this.amount = this.format(this.valueNumber)\r\n    },\r\n\r\n    /**\r\n     * Immediately reflect precision changes\r\n     */\r\n    precision () {\r\n      this.process(this.valueNumber)\r\n      this.amount = this.format(this.valueNumber)\r\n    }\r\n  },\r\n\r\n  mounted () {\r\n    // Set default value props when placeholder undefined.\r\n    if (!this.placeholder || this.value === null) {\r\n      this.process(this.valueNumber)\r\n      this.amount = this.format(this.valueNumber)\r\n\r\n      // In case of delayed props value.\r\n      setTimeout(() => {\r\n        this.process(this.valueNumber)\r\n        this.amount = this.format(this.valueNumber)\r\n      }, 500)\r\n    }\r\n\r\n    // Set read-only span element's class\r\n    if (this.readOnly) this.$refs.readOnly.className = this.readOnlyClass\r\n  },\r\n\r\n  methods: {\r\n    /**\r\n     * Handle blur event.\r\n     * @param {Object} e\r\n     */\r\n    onBlurHandler (e) {\r\n      this.$emit('blur', e)\r\n      this.amount = this.format(this.valueNumber)\r\n    },\r\n\r\n    /**\r\n     * Handle focus event.\r\n     * @param {Object} e\r\n     */\r\n    onFocusHandler (e) {\r\n      this.$emit('focus', e)\r\n      if (this.valueNumber === 0 || this.valueNumber === null) {\r\n        this.amount = null\r\n      } else {\r\n        this.amount = formatMoney(this.valueNumber, {\r\n          symbol: '',\r\n          format: '%v',\r\n          thousand: '',\r\n          decimal: this.decimalSeparatorSymbol,\r\n          precision: Number(this.precision)\r\n        })\r\n      }\r\n    },\r\n\r\n    /**\r\n     * Handle input event.\r\n     */\r\n    onInputHandler () {\r\n      this.process(this.amountNumber)\r\n    },\r\n\r\n    /**\r\n     * Validate value before update the component.\r\n     * @param {Number} value\r\n     */\r\n    process (value) {\r\n      if (value === null || value === 0) this.update(null)\r\n      if (value >= this.max) this.update(this.max)\r\n      if (value <= this.min) this.update(this.min)\r\n      if (value > this.min && value < this.max) this.update(value)\r\n      if (!this.minus && value < 0) {\r\n        this.min >= 0 ? this.update(this.min) : this.update(value)\r\n      }\r\n    },\r\n\r\n    /**\r\n     * Update parent component model value.\r\n     * @param {Number} value\r\n     */\r\n    update (value) {\r\n      if (value === null || value === 0) {\r\n        this.$emit('update:modelValue', null)\r\n      } else {\r\n        const fixedValue = toFixed(value, this.precision)\r\n        const output = this.outputType.toLowerCase() === 'string' ? fixedValue : Number(fixedValue)\r\n        this.$emit('update:modelValue', output)\r\n        this.$emit('change', output)\r\n      }\r\n    },\r\n\r\n    /**\r\n     * Format value using symbol and separator.\r\n     * @param {Number} value\r\n     * @return {String}\r\n     */\r\n    format (value) {\r\n      if (value === null) return null;\r\n\r\n      return formatMoney(value, {\r\n        symbol: this.currency,\r\n        format: this.symbolPosition,\r\n        precision: Number(this.precision),\r\n        decimal: this.decimalSeparatorSymbol,\r\n        thousand: this.thousandSeparatorSymbol\r\n      })\r\n    },\r\n\r\n    /**\r\n     * Remove symbol and separator.\r\n     * @param {Number} value\r\n     * @return {Number}\r\n     */\r\n    unformat (value) {\r\n      if (value === null) return null;\r\n\r\n      const toUnformat = typeof value === 'string' && value === '' ? this.emptyValue : value\r\n      return unformat(toUnformat, this.decimalSeparatorSymbol)\r\n    }\r\n  }\r\n}\r\n</script>"],"names":["_sfc_main","newValue","oldValue","formatMoney","value","fixedValue","toFixed","output","toUnformat","unformat","$props","_createElementBlock","_toDisplayString","_ctx","_openBlock","_hoisted_1","_createElementVNode","$options","args","$event","_normalizeClass","_renderSlot"],"mappings":"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"}