Neanic UI Toolkit for Vue

@neanic/vue is a collection of UI components for Vue.js, providing a suite of utilities for creating context menus, modals, sidebars and toast notifications with ease. It leverages TypeScript to ensure type safety and better developer experience.

Features

• Toast notifications with multiple levels (success, info, warning, error)
• Modal windows with dynamic content
• Customizable context menus
• Sidebar component for additional on-screen content
• Calendar Component
• Fully typed APIs for better integration with TypeScript projects

Usage

Toast Notifications

To use toast notifications in your Vue components:

import { useToast } from '@neanic/vue';

const toast = useToast();

// Show a default toast
toast.show('Title', 'Message');

// Show a success toast
toast.success('Success', 'This is a success message.');

// Show an info toast
toast.info('Info', 'This is an info message.');

// Show a warning toast
toast.warning('Warning', 'This is a warning message.');

// Show an error toast
toast.error('Error', 'This is an error message.');

Modals

To create and manage modals:

import { useModal } from '@neanic/vue';
import YourComponent from './YourComponent.vue';

const modal = useModal();

// Open a modal with dynamic content
modal.open('Modal Title', YourComponent, true, { prop1: 'value1' });

// Close the modal
modal.close();

Context Menus

For context menus:

import { useContextMenu } from '@neanic/vue';
import YourMenuComponent from './YourMenuComponent.vue';

const contextMenu = useContextMenu();

// Open a context menu
contextMenu.open({
  attachTo: {
    element: document.getElementById('target-element'),
    relativePlacement: 'right-bottom',
  },
  component: {
    type: YourMenuComponent,
    props: { data: 'some data' },
  },
});

// Close the context menu
contextMenu.close();

Sidebars

To use the sidebar component:

import { useSidebar } from '@neanic/vue';

const sidebar = useSidebar();

License

This project is licensed under the ISC License – see the LICENSE file for details. Developed by Neanic.