Filter

component.vue

var demo = new Vue({
    el: '#demo',
    data: {
    	demo: "demo TEXT"
    },
    filters: {
      lowercase: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.toLowerCase();
      },
      removespace(str) {
          if(str) {
              return str.replace(/\s+/g, '');
          }
      }
    }
})

Filters.vue

Vue.filter('getContrastColor', function (backgroundHexColor) {
    if (!backgroundHexColor) return '';
    const hexcolor = backgroundHexColor.replace("#", "");
    const r = parseInt(hexcolor.substr(0, 2), 16);
    const g = parseInt(hexcolor.substr(2, 2), 16);
    const b = parseInt(hexcolor.substr(4, 2), 16);
    var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
    return (yiq >= 128) ? '#000000' : '#ffffff';
})

/*
<span v-if="task.cf_text !== 'none'" class="task-badge" :style="`background-color: ${task.cf_color}; color: ${$options.filters.getContrastColor(task.cf_color)};`">{{ task.cf_text }}</span>
*/

Vue.filter('formatSize', (size) => {
  const b = 1024;
  if (size > b ** 4) return `${(size / b ** 4).toFixed(2)} TB`;
  if (size > b ** 3) return `${(size / b ** 3).toFixed(2)} GB`;
  if (size > b ** 2) return `${(size / b ** 2).toFixed(2)} MB`;
  if (size > b) return `${(size / b).toFixed(2)} KB`;
  return `${size.toString()} B`;
});

Vue.filter('mask', function (value) {
  if (!value) return '';
  return '*'.repeat(value.length);
});

Vue.filter('prettyjson', function (value) {
	if (!value) return '';
	return JSON.stringify(value, null, 4);
});