battoni-ui v0.0.2

Battoni UI

About

This is a component library that I have created to use on my projects. Of course, you can use it, but have in mind that I can drop this project anytime and it will be heavily designed around the way I like to code and for my purposes.

How to use

1 - Install the package

npm install battoni-ui

2 - Import styles on you App.vue

import 'battoni-ui/dist/style.css';

3 - Install font-awesome

npm i --save @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/vue-fontawesome@latest-3

4 - Set up FontAwesome

// I like set it up here: /src/libraries/font-awesome/index.js

import { library } from '@fortawesome/fontawesome-svg-core';
import { faUserSecret } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

export const FA_ICONS = {
  faUserSecret,
};

library.add(FA_ICONS);

export { FontAwesomeIcon };

// main.js

import { createApp } from 'vue';
import { FontAwesomeIcon } from './libraries/font-awesome';

import App from './App.vue';

const app = createApp(App);
app.component('font-awesome-icon', FontAwesomeIcon);
app.mount('#app');

5 - All set

<script setup>
import { AppButton, AppCard } from 'battoni-ui';

function onButtonClick() {
  console.log('Button was clicked.');
}
</script>

<template>
  <main class="p-24">
    <AppButton
      rightIcon="fa-solid fa-user-secret"
      label="My Button"
      @click="onButtonClick"
    />

    <br />

    <AppCard>Card</AppCard>
  </main>
</template>

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Run Unit Tests

npm run test:unit

Lint

npm run lint