QuietTomato UI

Simple UI-kit that uses vee-validate and maska packages.

Features

• Toasts
• Modal window
• Light and dark themes
• Button ripple effect as vue directive

Installation

npm i quiettomato-ui

Usage

import components and needed directive/composables:

<script setup lang="ts">
    import {
    BaseInput,
    BaseButton,
    useToasts,
    useTheme,
    BaseToaster,
} from "quiettomato-ui";
    const { addToast } = useToasts();
    const { initTheme, changeTheme } = useTheme();
    initTheme("body");
    function addToasts() {
        addToast({ title: "Hello", message: "How are you?", variant: "warning" });
    }
</script>

template:

<template>
  <div class="container">
    <BaseToaster />
    <BaseInput shape="black"></BaseInput>
    <BaseButton @click="addToasts"> Add Toast! </BaseButton>
    <BaseButton @click="changeTheme"> Change Theme </BaseButton>
  </div>
</template>