@agendize/design-system/README.md

Agendize web design system

# Agendize System Design

## Description

System design for Agendize Component - based on tailwindcss (https://tailwindcss.com/)



## Install

To install on your project 

```sh
yarn add @agendize/design-system
# or
npm install @agendize/design-system
```

**Global**

***Components***

List of components 
* FieldDateTime
* FieldEmail
* FieldFile
* FieldHidden
* FieldInput
* FieldLabel
* FieldNumber
* FieldPhone
* FieldSelect
* FieldTextArea
* FieldToggle
* FieldUrl
* SearchInput
* ButtonValidation
* DialogBox

```js
import { createApp } from 'vue';
import App from './App.vue';

import  { FieldInput, FieldEmail, FieldTextArea, FieldToggle, SearchInput } from '@agendize/design-system';
import '@agendize/design-system/dist/style.css';

const app = createApp(App);
app.component('FieldInput', FieldInput);
app.component('FieldEmail', FieldEmail);
app.component('FieldTextArea', FieldTextArea);
app.component('FieldToggle', FieldToggle);
app.component('SearchInput', SearchInput);
```

**Local**

```vue
<script>
  import  { FieldInput, FieldEmail, FieldTextArea, FieldToggle, SearchInput } from '@agendize/design-system';
  import '@agendize/design-system/dist/style.css';
    
  export default {
    components: { FieldInput, FieldEmail, FieldTextArea, FieldToggle, SearchInput}
  }
</script>
```

**Use with Vite**

If you want use design-system in a Vite project you must add 'vue-select', 'vue-tel-input' in external section of rollupOptions

**Toaster Api**

A toaster engine is also available and must be declared on the app (main)

```js
import { createApp } from 'vue';
import App from './App.vue';

import  { TOAST_OPTIONS } from '@agendize/design-system';
import Toast from "vue-toastification";

const app = createApp(App);
app.use(Toast, TOAST_OPTIONS);
```

and then 

```js

import '@agendize/design-system/dist/style.css';


import { useToast } from "vue-toastification";

function createToast() {
  const toast = useToast()

  // Use it!
  toast("I'm a toast!")
  toast.info("Toast info", {icon:'fa fa-info'})
  toast.success("Toast success", {icon:'fa fa-check'})
  toast.error("Toast error")
  toast.warning("Toast warning", {icon:'fa fa-exclamation'})
}

```