@unb-libraries/vue-greyui v1.0.0-alpha.1

GreyUI

GreyUI provides type-safe Vue composables featuring reusable component logic simplifying the implementation of styled UI components with any CSS framework.

Getting Started

Install by running the following command from inside your project folder:

npm install -D @unb-libraries/vue-greyui

Features

GreyUI provides the following composables:

• useDataProvider

useDataProvider

Define and reactively manipulate data provider.

import { useDataProvider } from "@unb-libraries/vue-greyui"

const { data, add, filter, remove, set, sort } = useDataProvider(["grey", "dark-grey", "light-grey"])

add("ultra-light-grey")
// data.value => ["grey", "dark-grey", "light-grey", "medium-grey"]

filter((color) => color.indexOf("-") < 0)
// data.value => ["grey"]
filter(() => true)
// data.value => ["grey", "dark-grey", "light-grey", "ultra-light-grey"]

remove(3)
// data.value => ["grey", "dark-grey", "light-grey"]

set(["white", "grey", "black"])
// data.value => ["white", "grey", "black"]

sort((a, b) => a < b ? -1 : b < a ? 1 : 0)
// data.value => ["black", "grey", "white"]

Testing

The project uses Vitest and Vue Test Utils to run unit tests. Test coverage reports are generated with V8.

To execute tests (watch mode) and create test coverage reports, run

npm run test:unit:watch -- --coverage

HTML reports are placed in ./vitest.

License

MIT