Agendize System Design

Description

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

Install

To install on your project

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

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

<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)

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

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'})
}