qp-filters ·

An easy-to-use collection of filters, originally created for use in a roleplaying project build with Vue.js 3.

Install

  $ npm install @mcpronovost/qpfilters --save

Available Filters

• qpabbr
• qpcode
• qpdate
• qprhex
• qpslug
• qpunit

Usage

Direct include (Vue.js 3)

<script setup>
  import { qpdate } from "@mcpronovost/qpfilters";
  // ...
</script>

<template>
  <span v-text="qpdate(props.topic.created_at)"></span>
</template>

Global include (Vue.js 3)

    import { createApp } from "vue";
    import qpfilters from "@mcpronovost/qpfilters";

    const app = createApp(App);

    app.config.globalProperties.$f = qpfilters;

    <script setup>
        // ...
    </script>

    <template>
        <span v-text="$f.qpdate(props.topic.created_at)"></span>
    </template>

Examples

qpabbr

qpabbr("Pachu'a Wapi Qatlaalawsiq")

PWQ

qpcode

qpcode("This is a [g]bold text[/g] and \n this is an [i]italic text[/i].")

This is a <span style="font-weight:bold;">bold text</span> and <br /> this is an <span style="font-style:italic;">italic text</span>.

qpdate

qpdate("2022-10-31T13:50:14.836475-04:00")

31 octobre 2022 à 13:50

qprhex

qprhex()

#89a411

qpslug

qpslug("Au royaume empoisonné feat. Seðem")

au-royaume-empoisonne-feat-sedem

qpunit

qpunit(4928)

4.93k

History

• See qp-filters release list.

License

This project is licensed under the MIT License - see the LICENSE file for details.