Simple Vue.js filters that I usually need

gistfile1.js

/**
 * Simple filter to make JSON pretty when dumping to the view.
 * @param {JSON} value    The JSON Object.
 */
Vue.filter('jsonPrettyPrint', (json) => {
  if (typeof json !== 'string') {
    json = JSON.stringify(json, undefined, 2)
  }
  json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
  return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g, function (match) {
    let cls = 'number'
    if (/^"/.test(match)) {
      if (/:$/.test(match)) {
        cls = 'key'
      } else {
        cls = 'string'
      }
    } else if (/true|false/.test(match)) {
      cls = 'boolean'
    } else if (/null/.test(match)) {
      cls = 'null'
    }
    return '<span class="' + cls + '">' + match + '</span>'
  })
})

/**
 * Vue filter to round the decimal to the given place.
 *
 * @param {String} value    The value string.
 * @param {Number} decimals The number of decimal places.
 */
Vue.filter('round', function (value, decimals) {
  if (!value) {
    value = 0
  }
  if (!decimals) {
    decimals = 2
  }
  console.log(parseFloat(value))
  value = (Math.round(parseFloat(value) * Math.pow(10, decimals)) / Math.pow(10, decimals)).toFixed(decimals)
  return value
})

/**
 * Vue filter to make a simple timestamp for an ISO date.
 *
 * @param {String} value The value string.
 */
Vue.filter('timestamp', function (value) {
  let hour = 0
  const parts = value.split(' ')
  const date = parts[0].split('-')
  const time = parts[1].split(':')

  if (parseInt(time[0], 10) > 12) {
    hour = parseInt(time[0], 10) % 12
  } else {
    hour = parseInt(time[0], 10)
  }

  hour = hour < 10 ? '0' + hour : hour

  return '[' + date[1] + '/' + date[2] + ' ' + hour + ':' + time[1] + ']'
})

/**
 * Vue filter to truncate a string to the specified length.
 * @param {String} value The value string.
 */
Vue.filter('truncate', function (value, length) {
  if (value.length < length) {
    return value
  }

  length = length - 3

  return value.substring(0, length) + '...'
})

/**
 * Vue filter to convert a slug to a more human friendly form.
 *
 * @param {String} value The value string.
 */
Vue.filter('humanable', function (value) {
  const words = value.split(/[-_]+/g)
  const results = []
  for (let i = 0; i < words.length; i++) {
    const letter = words[i].charAt(0).toUpperCase()
    results.push(letter + words[i].slice(1))
  }
  return results.join(' ')
})

/**
 * Vue filter to convert the given value to percent.
 *
 * @param {String} value    The value string.
 * @param {Number} decimals The number of decimal places.
 */
Vue.filter('percentage', function (value, decimals) {
  if (!value) {
    value = 0
  }

  if (!decimals) {
    decimals = 0
  }

  value = value * 100
  value = Math.round(value * Math.pow(10, decimals)) / Math.pow(10, decimals)
  value = value + '%'
  return value
})